<template>
  <div class="app-container">
    <el-form :model="queryParams" @submit.native.prevent ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item :label="'供应商名称'" prop="vendorName">
        <el-input
          v-model="queryParams.vendorName"
          placeholder="请输入供应商名称"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px"
        />
      </el-form-item>
      <el-form-item label="凭证号" prop="voucherNo">
        <el-input v-model="queryParams.voucherNo" placeholder="请输入凭证号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="凭证年" prop="voucherNo">
        <el-select v-model="queryParams.voucherNoYear" placeholder="请选择凭证年" clearable>
          <el-option v-for="dict in voucherNoYearList" :key="dict" :label="dict"
            :value="dict" />
        </el-select>
      </el-form-item>
      <el-form-item label="采购单号" prop="purchaseOrderNo">
        <el-input v-model="queryParams.purchaseOrderNo" placeholder="请输入采购单号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item  label="物料分类" prop="itemTypeO">
        <treeselect style="width: 220px;" v-model="queryParams.itemTypeO" :options="itemTypeOptions" :show-count="true" placeholder="请选择所属分类" value-format="label"/>
      </el-form-item>
      <el-form-item :label="'物料编码'" prop="sapItemCode">
        <el-input
          v-model="queryParams.sapItemCode"
          placeholder="请输入物料编码"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px"
        />
      </el-form-item>
      <el-form-item label="产品/原料" prop="iqcType">
        <el-select v-model="queryParams.iqcType" placeholder="请选择产品/原料" clearable>
          <el-option v-for="dict in dict.type.IQC_TYPE" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item :label="'创建时间'">
        <el-date-picker v-model="daterangePurchaseDate" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
          :start-placeholder="'开始日期'" :end-placeholder="'结束日期'"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{'搜索'}}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{'重置'}}</el-button>
      </el-form-item>
    </el-form>

    <el-tabs type="border-card" @tab-click="tabClick">
      <el-tab-pane :label="'明细'">
        <!-- <el-row style="margin-bottom: 10px;">
          <el-button type="primary" size="mini" @click="handleExport">{{'导出'}}</el-button>
        </el-row> -->
        <el-table v-loading="loading" :max-height="tableHeight" :data="tbodys" >
          <el-table-column :label="item.label" align="center" :prop="item.value" :width="item.width" v-for="(item, index) in theaders" :key="index">
            <!-- <template slot-scope="scope">
              <dict-tag :options="dict.type.mes_workorder_type" :value="scope.row.workorderType"  v-if="item.value==='workorderType'" />
              <div v-else>{{ item.value === 'machineTime' ? scope.row[item.value] ? Number(scope.row[item.value]).toFixed(2) : scope.row[item.value] : scope.row[item.value] }}</div>
            </template> -->
          </el-table-column>
        </el-table>
    
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane :label="'统计'">
        <el-row align="center"  style="line-height: 40px;">
          <el-col :span="7">{{'统计方式'}}
            <el-select v-model="statisisType" clearable :placeholder="'请选择统计方式'">
              <el-option v-for="item in statisisList" 
              :key="item" 
              :label="item"
              :value="item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7">{{'统计颗粒度'}}
            <el-select v-model="groupKey" clearable :placeholder="'请选择统计颗粒度'" :disabled="statisisType == '批供应商合格率' || statisisType == '不良问题类型统计'">
              <el-option v-for="item in groupbyList" 
              :key="item" 
              :label="item"
              :value="item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 10px;">{{'查询'}}</el-button>
            <el-button type="primary" size="mini" @click="handleExport">{{'导出'}}</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :max-height="tableHeight" :data="tbodys1" @sort-change="handleSortChange">
          <el-table-column :label="item.label" align="center" :prop="item.value" v-for="(item, index) in theaders1" :key="index" :sortable="item.sort? 'custom':false">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mes_ipqc_type_pc" :value="scope.row.ipqcType"  v-if="item.value==='ipqcType'" />
              <dict-tag :options="dict.type.mes_qc_result" :value="scope.row.checkResult"  v-if="item.value==='checkResult'" />
              <dict-tag :options="dict.type.mes_order_status" :value="scope.row.status"  v-if="item.value==='status'" />
              <div v-else>{{ scope.row[item.value] }}</div>
            </template>
          </el-table-column>
        </el-table>
    
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>
    
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getvoucherNoYear, getcheckStatus, getstatus } from "@/api/mes/qc/iqc";
import { getList, getUnquanlify, getUnqualifyType, getVendor } from "@/api/mes/proTable/iqcAnaly";
import { treeselect } from "@/api/mes/md/itemtype";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  getworkshopList} from '@/api/mes/pro/scheduleList'
  import {
  listWorkstation
} from "@/api/mes/md/workstation";
export default {
  name: "ScheduleSetupRule",
  components: {Treeselect},
  dicts: [
  "mes_ipqc_type_pc",
  "IQC_TYPE",
  "mes_qc_result",
  "mes_order_status"
],
  data() {
    return {
      // 遮罩层
      loading: true,
      selectedRows: [],
      workshopList: [],
      workstationList: [],
      workunitList: [],
      tabIndex: 0,
      // 选中数组
      ids: [],
      //dta列表
      dtaOptions: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 排产换型对照信息表格数据
      tbodys: [],
      theaders: [],
      tbodys1: [],
      theaders1: [],
      processOptions: [],
      itemTypeOptions: undefined,
      // 弹出层标题
      title: "",
      statisisType: null,
      groupKey: null,
      groupbyList: ['物料类别', '物料编码'],
      statisisList: ['不良率分析', '批供应商合格率', '不良问题类型统计'],
      // 是否显示弹出层
      open: false,
      tableHeight: 0,
      daterangePurchaseDate: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        "deptName": null,
        "endDate": null,
        "purchaseOrderNo": null,
        "processName": null,
        "sapItemCode": null,
        "iqcType": null,
        "productCode": null,
        "productId": null,
        "productName": null,
        "startDate": null,
        "taskCode": null,
        "voucherNoYear": null,
        ipqcType: null,
        vendorName: null,
        itemTypeCode: null,
        itemTypeO: null,
        "workorderCode": null,
        "workorderType": null,
        "workshopId": null,
        "workshopName": null,
        "workstationId": null,
        "workstationName": null,
        "workunitId": null,
        factoryCode: null,
        factoryName: null,
        "workunitName": null
      },
      voucherNoYearList:[],
      checkStatusList: [],
      statusList: [],
      // 表单参数
      form: {},
    };
  },
  mounted(){
    this.$nextTick(()=>{
      this._resizeHandler()
    })
    this._resizeHandler = () => {
      const arr = document.getElementsByClassName('el-form')
      const height = arr[0].offsetHeight
      const arr1 = document.getElementsByClassName('app-main')
      const height1 = arr1[0].offsetHeight
      this.tableHeight = height1 - height - (this.tabIndex ? 200 : 170)
    }
    window.addEventListener('resize', this._resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this._resizeHandler)
  },
  created() {
    this.getTreeselect()
    this.getList();
  },
  watch: {
    tabIndex: {
      handler(val){
        if(Number(val) === 0) {
          this.theaders = [
            {label: '检验单编号', value: 'iqcCode', width: '140px'},
            {label: '供应商名称', value: 'vendorName', width: '140px'},
            {label: '物料分类', value: 'itemTypeCode', width: '120px'},
            {label: '物料编码', value: 'sapItemCode', width: '240px'},
            {label: '物料名称', value: 'itemName', width: '120px'},
            {label: '单位', value: 'unit'},
            {label: '检测数量', value: 'quantity'},
            {label: '不合格数', value: 'quantity_unqualify', width: '140px'},
            {label: '检测结果', value: 'checkResult', width: '140px'},
            {label: '处理措施', value: 'execute', width: '140px'},
            {label: '创建时间', value: 'createTimeMap', width: '140px'},
            {label: '检测时间', value: 'checkTime', width: '140px'},
            {label: '检测人员', value: 'checkby', width: '140px'},
            {label: '凭证年', value: 'voucherNoYear', width: '140px'},
            {label: '凭证号', value: 'voucherNo', width: '140px'},
            {label: '凭证行号', value: 'salesVoucherItem', width: '140px'},
            {label: '采购单号', value: 'purchaseOrderNo', width: '140px'},
            {label: '采购单行号', value: 'purchaseOrderItemNo', width: '140px'},
          ]
          this.handleQuery()
        }
      },
      immediate: true
    },
    'queryParams.itemTypeO' : {
      handler(val){
        this.queryParams.itemTypeCode = val.itemTypeCode
      }
    }
  },
  methods: {
    getTreeselect() {
      getvoucherNoYear().then(res=>{
        if (res.data && res.data.length > 0){
          this.voucherNoYearList = res.data
        } else {
          this.voucherNoYearList = []
        }
      })
      getcheckStatus().then(res=>{
        if (res.data && res.data.length > 0){
          this.checkStatusList = res.data
        } else {
          this.checkStatusList = []
        }
      })
      getstatus().then(res=>{
        if (res.data && res.data.length > 0){
          this.statusList = res.data
        } else {
          this.statusList = []
        }
      })
      treeselect().then(response => {
        this.itemTypeOptions = response.data;
      });
    },
    handleSortChange(column) {
      const p = {}
      if (column.order === 'ascending') {
        p['ascSort'] = [column.prop]
      } else if (column.order === 'descending'){
        p['descSort'] = [column.prop]
      }
      this.getList(p);
    },
    onFactorySelect(row) {
      if (row != undefined && row != null) {
        this.queryParams.factoryCode = row.factoryCode;
        this.queryParams.factoryName = row.factoryName;
      }
    },
    onWorkstationSelect(row) {
      if (row != undefined) {
        this.queryParams.workstationName = row.workstationName;
      }
    },
    onWorkunitSelect(row){
      if (row != undefined) {
        this.queryParams.workunitName = row.workunitName;
      }
    },
    onworkshopSelect(row){
      if (row != undefined) {
        this.queryParams.workshopName = row.workshopName;
      }
    },
    tabClick(val){
      console.log('this.tabIndex', this.tabIndex, val)
      this.tabIndex = val.index
      this.$nextTick(() => {
        this._resizeHandler()
      })
    },
    onItemSelect(row) {
      if (row != undefined) {
        this.queryParams.productName = row.itemName;
      }
    },
    /** 查询排产换型对照信息列表 */
    getList(p) {
      this.loading = true;
      let param = JSON.parse(JSON.stringify(this.queryParams))
      if (p) {
        param = {...param, ...p}
      }
      if (this.daterangePurchaseDate && this.daterangePurchaseDate.length > 0) {
        param['createTimeMapMap'] = {
          startDate:this.daterangePurchaseDate[0],
          endDate:this.daterangePurchaseDate[1]
        }
      } else {
        param['createTimeMapMap'] = null
      }
      let api = getList
      if (Number(this.tabIndex) === 1) {
        if(this.statisisType === '不良问题类型统计'){
          this.theaders1 = [
            {label: '检验名称', value: 'checkName'},
            {label: '检验项目总和', value: 'ItemCount'},
            {label: '总NG次数和', value: 'ngCount', width: '120px'},
            {label: '检验名称NG次数和', value: 'itemNgCount', width: '240px'},
            {label: 'NG发生率', value: 'ngPt', width: '120px'},
            {label: 'NG占比', value: 'totlNgPt', width: '120px'}
          ]
          api = getUnqualifyType
        } else if(this.statisisType === '不良率分析'){
          if (this.groupKey == '物料类别') {
            this.theaders1 = [
              {label: '物料分类', value: 'groupKey'},
              {label: '总批数', value: 'checkName'},
              {label: '不合格批数', value: 'checkItemTotal'},
              {label: '特采批数', value: 'checkNgItemCount'},
              {label: '批合格率', value: 'ngItemCount'},
              {label: '批不良率', value: 'ngPt'},
              {label: '批特采率', value: 'totalNgPt'},
              {label: '总检验数量', value: 'totalNgPt'},
              {label: '不合格数量', value: 'totalNgPt'},
              {label: '特采数量', value: 'totalNgPt'},
              {label: '数量合格率', value: 'totalNgPt'},
              {label: '数量不合格率', value: 'totalNgPt'},
              {label: '特采数量比率', value: 'totalNgPt'},
            ]
          } else if (this.groupKey == '物料编码') {
            this.theaders1 = [
              {label: '物料编码', value: 'groupKey'},
              {label: '总批数', value: 'checkName'},
              {label: '不合格批数', value: 'checkItemTotal'},
              {label: '特采批数', value: 'checkNgItemCount'},
              {label: '批合格率', value: 'ngItemCount'},
              {label: '批不良率', value: 'ngPt'},
              {label: '批特采率', value: 'totalNgPt'},
              {label: '总检验数量', value: 'totalNgPt'},
              {label: '不合格数量', value: 'totalNgPt'},
              {label: '特采数量', value: 'totalNgPt'},
              {label: '数量合格率', value: 'totalNgPt'},
              {label: '数量不合格率', value: 'totalNgPt'},
              {label: '特采数量比率', value: 'totalNgPt'},
            ]
          }
          api = getUnquanlify
          param['groupKey'] = [this.groupKey]
        } else if(this.statisisType === '批供应商合格率'){
          this.theaders1 = [
            {label: '供应商名称', value: 'vendorName'},
            {label: '总批数', value: 'totalRecordCount'},
            {label: '不合格批数', value: 'totalUnqualifyCount'},
            {label: '批合格率', value: 'unqualifyPt'}
          ]
          api = getVendor
        }
      }
      if (param.itemTypeO) {
        delete param.itemTypeO
      }
      api(param).then(response => {
        if (Number(this.tabIndex) === 1) {
          this.tbodys1 = response.rows
        }
        else {
          this.tbodys = response.rows
        }
        this.total = response.total;
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (Number(this.tabIndex) === 1 && !this.statisisType) this.$message.warning('请选择统计方式');
      if (Number(this.tabIndex) === 1 && !this.groupKey && this.statisisType === '不良率分析') this.$message.warning('请选择统计颗粒度');
      this.queryParams.pageNum = 1;
      this.getList();
    },
    onBrandProcess(row){
     if (Object.values(row).length > 0) {
        this.queryParams.processName = row.processName;
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedRows = selection
      this.ids = selection.map(item => item.ruleId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    handleExport(){
      let apiName = ''
      if (Number(this.tabIndex) === 0) {
        apiName = 'report/pro/feedback/getList/export'
      } else if(this.statisisType === '损失工时排行'){
        apiName = 'report/pro/feedback/getUnqualifyType/export'
      } else if(this.statisisType === '工作中心'){
        apiName = 'report/pro/feedback/getListByWorkstation/export'
      } else if(this.statisisType === '工作单元'){
        apiName = 'report/pro/feedback/getListByWorkunit/export'
      } else if(this.statisisType === '工序'){
        apiName = 'report/pro/feedback/getListByProcess/export'
      } else if(this.statisisType === '责任部门排行'){
        apiName = 'report/pro/feedback/getUnquanlify/export'
      } else if(this.statisisType === '主要异常原因分析') {
        apiName = 'report/pro/feedback/getComplementList/export'
      }
      this.download(
        apiName,
        {
          ...this.queryParams,
        },
        `statistAnaly_${new Date().getTime()}.xlsx`
      );
    }
  }
};
</script>
