<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="add"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          icon="el-icon-upload2"
          size="mini"
          @click="Refresh"
          >刷新</el-button
        >
      </el-col>
    </el-row>

    <!--搜索-->
    <el-header class="searchBox">
      <el-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        class="demo-form-inline"
      >
        <el-form-item label="渠道名称">
          <el-input
            v-model="searchForm.channelName"
            name="searchForm.channelName"
            placeholder="策略名称"
          />
        </el-form-item>
        <el-form-item label="合作方">
          <el-input v-model="searchForm.channelPartner" placeholder="合作方" />
        </el-form-item>

        <el-form-item style="float: right">
          <el-button type="primary" @click="init()">搜索</el-button>
          <el-button @click="reset('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="channelName" label="一级渠道名称" width="180">
      </el-table-column>
      <el-table-column prop="unicomContacts" label="负责人" width="180">
      </el-table-column>
      <el-table-column prop="channelPartner" label="合作方"> </el-table-column>
      <el-table-column prop="channelCode" label="渠道编码"> </el-table-column>
      <el-table-column prop="channelStatus" label="状态"> </el-table-column>
      <el-table-column prop="onlineTime" label="生效时间"> </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row.id)"
            size="mini"
            type="text"
            icon="el-icon-edit"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="query(scope.row.id)"
            >查询</el-button
          >
          <el-button
            @click="del(scope.row.id)"
            size="mini"
            type="text"
            icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page="pageNo"
      :limit="pageSizes"
      @pagination="pagination"
    />
  </div>
</template>

<script>
import { post, get, del, put } from "@/api/common";


export default {
  data() {
    return {
      searchForm: {
        // channelName: "",
        // channelPartner: "",
        pageNo: 1,
        pageSizes: 20,
      },

      pageNo: 1,
      total: 100,
      pageSizes: 20,
      channelName: "",
      channelPartner: "",
      unicomContacts: "",
      channelCode: "",
      channelStatus: "",
      onlineTime: "",
      tableData: [],
    };
  },
  mounted() {
    // 获取列表
    this.getChannerList();
    // 获取分页
  },
  methods: {
    query(id) {
      console.log(id);
      this.$router.push("/channel/secondChannelList?id=" + id);
    },
    //刷新
    Refresh() {
      console.log(11111111111);
      this.getChannerList();
    },
    // 搜索
    init() {
      get("/channel/info/page", this.searchForm).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        // 清空
        this.searchForm = {
          channelName: "",
          channelPartner: "",
        };
      });
    },

    // 改变页码触发
    pagination(page) {
      this.pageNo = page.page;
      // 重新获取列表数据
      this.getChannerList();
    },
    // 获取订购页列表方法
    getChannerList() {
      get("/channel/info/page", {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        parentId: 0,
      }).then((res) => {
        console.log(res);

        // 一级列表的数组长度=total
        this.total = res.data.list.length;
        this.tableData = res.data.list;
      });
    },
    //添加跳转
    add() {
      this.$router.push("/channel/channelEdit");
    },
    //删除
    del(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          del("/channel/info/delete", { id }).then((res) => {
            // 判断是否成功，成功刷新列表
            if (res.data) {
              // 刷新
              this.getChannerList();
              // 提示
              setTimeout(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }, 200);

              // 判断该页是否还存在数据
              console.log(this.tableData);
              if (this.tableData.length == 0) {
                console.log(this.tableData.length == 0);
                // 没有数据
                this.pageNo - 1;
                // 刷新
                this.getChannerList();
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑
    edit(id) {
      this.$router.push("/channel/channelEdit?ids=" + id);
       
    },
  },
};
</script>

<style scoped></style>
