<template>
  <!-- 工票查询统计页面 -->
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <!-- 产线层级 -->
        <div class="filter">
            <label >{{$t('1132')}}：</label>
            <Cascader :data="datalevel" :value="leveldata" @on-change="handlelevelchange" trigger="click" change-on-select class="searchSelect"></Cascader>
        </div>
        <!-- 产品编号 -->
        <div class="filter">
          <label>{{ $t("100089") }}：</label>
          <Select
            clearable
            filterable
            label-in-value
            class="searchSelect"
            v-model="serial_number"
          >
            <Option v-for="(item,index) in numberList" :value="item.code" :key="index">{{ item.name }}({{ item.drawingcode }})
            </Option>
          </Select>
        </div>
        <!-- 工单 -->
        <div class="filter">
          <label>{{ $t("900053") }}：</label>
          <Input class="searchInput" type="text" v-model="workOrder" />
        </div>
        <!-- 操作人员 -->
        <div class="filter">
          <label>{{ $t("600531") }}：</label>
          <Select
            clearable
            filterable
            label-in-value
            class="searchSelect"
            v-model="operator"
          >
            <Option v-for="(item,index) in operatorList" :value="item.id" :key="index">{{ item.name }}
            </Option>
          </Select>
        </div>
      </div>
      <!-- 时间 -->
      <div v-show="!morecondition">
        <div class="filter">
          <label>{{ $t("1046") }}：</label>
          <DatePicker
            id="日期"
            type="datetimerange"
            v-model="daterange"
            confirm
            placeholder=""
            class="searchInput MaxWidth"
            format="yyyy-MM-dd HH:mm:ss"
            @on-change="selectdate"
          >
          </DatePicker>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="searchBtn">
        <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="Search()">{{ $t("1001") }}</Button>
        <Button type="success" class="fourWord" icon="ios-cloud-download" @click="Export()">{{ $t("1007") }}</Button>
      </div>
      <!-- 更多条件 按钮 -->
      <MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>
    </div>
    <!-- Table 区域 -->
    <div class="divborder newTableDiv">
      <Table
        highlight-row
        class="tableClass"
        :data="tableData1"
        :columns="tableColumns1"
        @on-current-change="handleRowChange"
        :loading="loading"
      ></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 v-show="detailModal" class="divborder newTableDiv">
      <Table
        highlight-row
        class="tableClass"
        :data="tableData2"
        :columns="tableColumns2"
      ></Table>
    </div>

  </div>
</template>

<script>
import axios from "@/libs/api.request";
import moment from "moment";
export default {
  data() {
    return {
      loading:false,
      morecondition:false,
      leveldata: [],
      datalevel: [],
      sectionid:0,
      total: 0, // 总条数
      page: 1, // 当前页数
      pagesize: 10, // 每一页显示条数
      workOrder: "", // 工单
      operator: "", // 操作人员
      serial_number: 0, // 产品编号
      numberList: [], // 产品编号数据
      lineList: [], // 产线数据
      stationList: [], // 工位数据
      operatorList: [], // 操作人员数据
      daterange: [],
      dtStart: "",
      dtEnd: "",
      tableData1: [], // table表格区域
      detailobj: {}, // 点击表格获取数据
      tableColumns1: [
        {
          type: "sort",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "80px"
        },
        {
          title: this.$t("900053"), // 工单
          key: "Wo"
        },
        {
          title: this.$t("100088"), // 产品名称
          key: "ProductName"
        },
        {
          title: this.$t("100090"), // 图纸号
          key: "DrawCode"
        },
        {
          title: this.$t("500006"), // 工序
          key: "Route"
        },
        {
          title: this.$t("1025"), // 生产线
          key: "Line"
        },
        {
          title: this.$t("1026"), // 工位
          key: "Station"
        },
        {
          title: this.$t("1038"), // 操作
          key: "Operate"
        },
        {
          title: this.$t("800195"), // 结果
          key: "Result"
        },
        {
          title: this.$t("950350"), // 总数
          key: "total",
          render:(h,params)=>{
            return h('span',params.row.NgCount+params.row.NgCount.NgCount2+params.row.OkCount)
          }
        },
        {
          title: this.$t("950233"), // 合格品数量
          key: "OkCount"
        },
        {
          title: '工废数量', // 工费数量
          key: "NgCount"
        },
        {
          title: '废料数量', // 废料数量
          key: "NgCount2"
        },
        {
          title: '试料数量', // 试料数量
          key: "DebugCount"
        },
        {
          title: this.$t("900993"), // 操作人
          key: "User"
        },
        {
          title: this.$t("1046"), // 时间
          key: "Time"
        }
      ],
      detailModal:false,
      tableData2:[],
      tableColumns2:[
        {
          type: "sort",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + 1
            );
          },
          width: "80px"
        },
        {
          title:'工单',
          key:'wo'
        },
        {
          title:'项目',
          key:'Item'
        },
        {
          title:'值',
          key:'Value'
        },
        {
          title:'结果',
          key:'Result'
        },
        {
          title:'时间',
          key:'TransDateTime'
        }
      ]
    };
  },
  created() {
    this.initTime();
    this.initlevel();//产线层级
    this.getProducts(); // 产品编号
    this.GetUsers(); // 操作人员数据
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1); // 格式化表格样式
  },
  // 事件处理函数
  methods: {
    initTime(){
        //时间默认一周
        var time = this.$time.changetime(3).split(' - ')
        this.dtStart = time[0]; // 时间第一项
        this.dtEnd = time[1]; // 时间第二项
        this.daterange = [time[0], time[1]]
    },
    initlevel () {
        axios.request({
            url: '/config/ProjectLevelSection/GetSectionTree',
            method: 'get'
        }).then(res => {
            const arr = []
            this.datalevel = res.data.data
            this.leveldata = arr
        })
    },
    handlelevelchange (value) {
        this.leveldata = value
        this.sectionid = 0
        if(value!=undefined&&Array.isArray(value)&&value.length >0){
          this.sectionid = value[value.length - 1];
        }
    },
    getProducts() {
      axios
        .request({
          url: "/config/ProjectProduct/GetProductsByCode",
          method: "get"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1&&result&&Array.isArray(result)&&result.length) {
            this.numberList = result;
          }else {
            this.numberList = []; 
          }
        });
    },
    // 监听操作人员
    GetUsers() {
      var params = {
        page: 1,
        pagesize: 999999
      };
      axios
        .request({
          url: "/config/user/GetUsers",
          params,
          method: "get"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1&&result&&Array.isArray(result)&&result.length) {
            this.operatorList = result;
          }else {
            this.operatorList = [];
          }
        });
    },
    // 监听日期时间变化
    selectdate(e) {
      this.dtStart = e[0]; // 时间第一项
      this.dtEnd = e[1]; // 时间第二项
      let last_str = this.dtEnd.split(" ")[1];
      if (last_str === "00:00:00") {
        this.dtEnd = moment(this.dtEnd).format("YYYY-MM-DD") + '23:59:59';
      }
      this.daterange = [this.dtStart, this.dtEnd];
    },
    // 监听搜索事件
    Search() {
      this.detailModal = false;
      let params = {
        page: this.page,
        pagesize: this.pagesize,
        productid: this.serial_number, // 产品编号
        line: 0, // 产线
        station: this.sectionid, // 工位
        wo: this.workOrder, // 工单
        mid: this.operator, // 操作人员
        beginTime: this.dtStart, // 开始时间
        endTime: this.dtEnd, // 结束时间
      };
      this.loading = true;
      axios
        .request({
          url: "/cnc/WoTrace/GetReport",
          params,
          method: "get"
        })
        .then(res => {
          this.loading = false;
          if (res.data.ret === 1) {
            this.total = res.data.total;
            this.tableData1 = res.data.data;
            this.page = res.data.page;
          }
        }).catch(()=>{
          this.loading = false;
        });
    },
    // 监听导出事件
    Export() {
      let params = {
        page: this.page,
        pagesize: this.pagesize,
        productid: this.serial_number, // 产品编号
        line: 0, // 产线
        station: this.sectionid, // 工位
        wo: this.workOrder, // 工单
        mid: this.operator, // 操作人员
        beginTime: this.dtStart, // 开始时间
        endTime: this.dtEnd, // 结束时间
      };
      this.$Spin.show();
      this.axios
        .request({
          url: "/cnc/WoTrace/ExportTraceReport",
          params,
          method: "get"
        })
        .then(res => {
          this.$Spin.hide();
          if (res.data.ret === 1) {
            if (res.data.data.length > 0) {
              window.location.href = this.axios.publicPath + "" + res.data.data;
            }
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        }).catch(()=>{
          this.$Spin.hide();
        });
    },
    // 点击表格获取当前行数据
    handleRowChange(cur) {
      this.detailobj = cur;
      //获取详情
      this.getDetailData();
    },
    getDetailData(){
      this.detailModal = true;
      let params = {
          traceId:this.detailobj.TraceId
      }
      axios
        .request({
          url: "/cnc/WoTrace/GetReportDtl",
          params,
          method: "get"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1&&result&&Array.isArray(result)&&result.length) {
            this.tableData2 = result;
          }else {
            this.tableData2 = []
          }
        });
    },
    // 页码改变的回调，返回改变后的页码 
    changePage(value) {
      this.page = value;
      this.Search();
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    handlePageSize(value) {
      this.pagesize = value;
      this.Search();
    }
  }
};
</script>

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