<template>
  <div class="testdiv">
    <!-- 文档下发 -->
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 选择产品 -->
      <div class="filter">
        <label>{{$t('600057')}}：</label>
        <Select v-model="product_id" filterable clearable class="searchSelect">
          <Option v-for="item in selectProductList" :value="item.id" :key="item.id">{{item.name}}</Option>
        </Select>
      </div>
      <!-- 选择产线 -->
      <div class="filter">
        <label>{{$t('950141')}}：</label>
        <Select v-model="level_id" clearable class="searchSelect">
          <Option v-for="item in selectLineList" :value="item.id" :key="item.id">{{item.name}}</Option>
        </Select>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord intervalRight"
          icon="ios-search"
          @click="Search()"
        >{{$t('1001')}}</Button>
        <Button
          type="primary"
          class="fourWord"
          icon="md-return-left"
          @click="Recycle()"
        >{{$t('920191')}}</Button>
        <Button
          type="primary"
          class="fourWord"
          icon="md-arrow-down"
          @click="Issue()"
        >{{$t('920192')}}</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <!-- Table数据展示 -->
      <Table
        highlight-row
        :data="tableData"
        class="tableClass"
        :columns="tableColumns"
        @on-current-change="handleRowChange"
      ></Table>
      <!-- 底部分页区域 -->
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request"; //  导入axios 接口
export default {
  data() {
    return {
      total: 0, // 总条数
      page: 1, // 页码值
      pagesize: 10, // 每一页展示数据
      product_id: "", // 搜索条件-选择产品
      level_id: "", // 搜索条件-选择产线
      selectProductList: [], // 选择产品数据
      selectLineList: [], // 选择产线数据
      tableData: [], // table 表格对应数据
      tableColumns: [
        // 表格列字段对应
        {
          type: "index",
          title: this.$t("1008"),
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "80px",
        },
        {
          title: this.$t("900880"),
          key: "name",
        },
        {
          title: this.$t("900967"),
          key: "name",
        },
        {
          title: this.$t("960432"),
          key: "name",
        },
        {
          title: "已下发文档数量",
          key: "name",
        },
        {
          title: "已添加文档数量",
          key: "name",
        },
      ],
    };
  },
  created() {
    this.GetProducts();
    this.GetNCStations();
  },
  methods: {
    // 监听查询事件
    Search() {
      const _this = this; // 拿到当前组件的实例
      let params = {
        page: 1,
        pagesize: 10,
        product_id: this.product_id,
        level_id: this.level_id,
      };
      _this.axios
        .request({
          url: "/esop/EsopDocumentBinding/GetDocumentBindingList",
          params,
          methods: "get",
        })
        .then((res) => {
          console.log(res);
          let result = res.data;
          _this.total = 0; //  设定一个初始值
          _this.tableData = []; //  设定一个初始值
          if (res.data.ret === 1) {
            this.total = res.data.total;
            this.tableData = res.data.data;
          }
        });
    },
    // 监听一键回收
    Recycle() {
      this.$Message.error({
        content: "请选择产品, 产线",
        duration: 3,
        closable: true,
      });
    },
    // 监听一键下发
    Issue() {
      this.$Message.error({
        content: "请选择产品, 产线",
        duration: 3,
        closable: true,
      });
    },
    //  获取选择产品数据列表
    GetProducts() {
      axios
        .request({
          url: "/config/projectproduct/GetProducts",
          method: "get",
        })
        .then((res) => {
          console.log(res);
          if (res.data.ret === 1) {
            this.selectProductList = res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    //  获取选择产品数据列表
    GetNCStations() {
      axios
        .request({
          url: "/config/ProjectLevelSection/GetNCStations",
          method: "get",
        })
        .then((res) => {
          console.log(res);
          if (res.data.ret === 1) {
            this.selectLineList = res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 表格当前行发生变化时触发
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
    },
    // 页码值改变时回调,  返回改变后的页码值
    changePage(value) {
      this.page = value;
      this.tableData = this.Search(this.page, this.pagesize);
    },
    // 切换每一页条数时回调, 返回的是切换后每一页条数
    handlePageSize(value) {
      console.log(value);
      this.pagesize = value;
      this.tableData = this.Search(this.page, this.pagesize);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
