<template>
  <!-- 工艺查询 -->
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 选择产品 -->
      <div class="filter">
        <label>{{$t('600057')}}：</label>
        <Select v-model="selectProduct" 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="selectLine" filterable clearable class="searchSelect">
          <Option v-for="item in selectLineList" :value="item.id" :key="item.id">{{item.name}}</Option>
        </Select>
      </div>
      <div class="filter">
        <label>{{$t('1036')}}：</label>
        <DatePicker
          type="daterange"
          :value="dateTime"
          class="searchInput middleWidth"
          @on-change="selectDate"
        ></DatePicker>
      </div>
      <!-- 按钮 -->
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="Search()">{{$t('1001')}}</Button>
        <Button
          type="success"
          class="twoWord"
          icon="md-arrow-down"
          @click="downLoad()"
        >{{$t('900758')}}</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";
export default {
  data() {
    return {
      total: 0, // 总条数
      page: 1, // 页码
      pagesize: 10, // 一页展示多少条数据
      dateTime: [], // 搜索时间范围
      selectProduct: "", // 搜索条件-选择产品
      selectLine: "", // 搜索条件-选择产线
      selectProductList: [], // 选择产品数据
      selectLineList: [], // 选择产线数据
      tableData: [], // 表格数据
      tableColumns: [
        // 表格列(表头)字段对应
        {
          type: "sort",
          title: this.$t("1008"),
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "80px",
        },
        {
          title: this.$t("1026"),
          key: "name",
        },
        {
          title: this.$t("100308"),
          key: "type_name",
        },
        {
          title: this.$t("930136"),
          key: "version_name",
        },
        {
          title: this.$t("900754"),
          key: "creator_name",
        },
        {
          title: this.$t("930133"),
          key: "create_time",
        },
        {
          title: this.$t("930134"),
          key: "process_name",
        },
        //  附件名称
        {
          title: this.$t("930135"),
          key: "file_name",
        },
        {
          title: this.$t("8081"),
          key: "version",
        },
        {
          title: this.$t("200054"),
          key: "status",
        },
      ],
    };
  },
  created() {
    this.GetProducts(); //  获取选择产品数据
    this.GetNCStations(); //  获取选择产线数据
  },
  methods: {
    // 初始化搜索时间
    initTime() {
      const _this = this;
      let date = new Date();
      let start = _this.$time.timestampToTime(
        date.getTime() - 7 * 24 * 60 * 60 * 1000
      );
      let end = _this.$time.timestampToTime(date.getTime());
      _this.dateTime = [start, end];
    },
    // 监听搜索时间变化
    selectDate(v) {
      console.log(v);
      this.dateTime = [v[0], v[1]];
    },
    // 搜索条件- 选择产品
    GetProducts() {
      const _this = this;
      _this.axios
        .request({
          url: "/config/projectproduct/GetProducts",
          methods: "get",
        })
        .then((res) => {
          console.log(res);
          if (res.data.ret === 1) {
            this.selectProductList = res.data.data;
            console.log(this.selectProductList);
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 搜索条件-选择产线
    GetNCStations() {
      const _this = this;
      _this.axios
        .request({
          url: "/config/ProjectLevelSection/GetNCStations",
          methods: "get",
        })
        .then((res) => {
          console.log(res);
          if (res.data.ret === 1) {
            this.selectLineList = res.data.data;
            console.log(this.selectLineList);
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 监听搜索事件
    Search() {
      const _this = this; // 拿到当前组件的实例
      let { page, pagesize, selectLine, selectProduct, dateTime } = this;
      let params = {
        page,
        pagesize,
        level_id: selectLine,
        product_id: selectProduct,
        starttime: dateTime[0],
        endtime: dateTime[1],
      };
      _this.axios
        .request({
          url: "/esop/EsopDocumentSearch/GetPagedDocumentsUseRecord",
          params,
          methods: "get",
        })
        .then((res) => {
          console.log(res);
          let result = res.data;
          _this.total = 0; //  设定一个初始值
          _this.tableData = []; //  设定一个初始值
          if (result.ret == 1) {
            if (result.data.length) {
              _this.total = result.total;
              _this.initTableData(result.data);
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 监听下载事件
    downLoad() {
      // 非空判断
      const _this = this;
      let obj = _this.detailobj;
      if (_this.obj.id == undefined) {
        _this.$Message.error(_this.$t("1043"));
        return false;
      }
      let params = { id: this.obj.id };
      _this.axios
        .request({
          url: "/esop/Download/DownloadFile",
          params,
          methods: "get",
        })
        .then((res) => {
          console.log(res);
        });
    },
    // 当表格的当前行发生变化的时候会触发
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
      console.log(this.detailobj);
    },
    // 页码改变的回调，返回改变后的页码
    changePage(value) {
      this.page = value;
      this.tableData = this.tableSearch(this.page, this.pagesize);
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    handlePageSize(value) {
      this.pagesize = value;
      this.tableData = this.tableSearch(this.page, this.pagesize);
    },
  },
};
</script>

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