<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="workorderType">
        <el-select v-model="queryParams.workorderType" clearable :placeholder="'请选择状态'">
          <el-option v-for="dict in dict.type.mes_workorder_type" :key="dict.value" :label="dict.label"
            :value="dict.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'生产工单'" prop="workorderCode">
        <el-input v-model="queryParams.workorderCode" :placeholder="'请输入生产工单'" />
      </el-form-item>
      <el-form-item :label="'任务号'" prop="taskCode">
        <el-input v-model="queryParams.taskCode" :placeholder="'请输入任务号'" />
      </el-form-item>
      <el-form-item :label="'产品编码'" prop="productCode">
        <el-input v-model="queryParams.productCode" :placeholder="'请输入产品编码'" />
      </el-form-item>
      <el-form-item :label="'产品名称'" prop="productName">
        <el-input v-model="queryParams.productName">
          <el-button slot="append" icon="el-icon-search" @click="$refs['ItemSelectRef'].showFlag = true"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item :label="'工序'" prop="processName">
        <el-input v-model="queryParams.processName">
          <el-button slot="append" @click="$refs.brSelectpro.showFlag = true" icon="el-icon-search"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item :label="'车间'" prop="workshopName">
        <el-input v-model="queryParams.workshopName">
          <el-button slot="append" @click="$refs.workshopSelectRef.showFlag = true" icon="el-icon-search"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item :label="'工作中心'" prop="workstationName">
        <el-input v-model="queryParams.workstationName">
          <el-button slot="append" icon="el-icon-search"
            @click="$refs['WorkstationSelect'].showFlag = true"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item :label="'工作单元'" prop="workunitId">
        <el-input v-model="queryParams.workunitName">
          <el-button slot="append" icon="el-icon-search" @click="$refs['WorkunitSelect'].showFlag = true"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item :label="'报工人员'" prop="workunitId">
        <el-input v-model="queryParams.nickName">
          <el-button slot="append" icon="el-icon-search" @click="$refs.userSelect.showFlag = true"></el-button>
        </el-input>
      </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="tableType" clearable :placeholder="'请选择统计内容'">
              <el-option v-for="item in statisisOption" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7">{{ '范围样式' }}
            <el-select v-model="statisisType" clearable :placeholder="'请选择范围样式'">
              <el-option v-for="(item, index) in statisisList" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ '查询' }}</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">
          <el-table-column :label="item.label" align="center" :prop="item.value" v-for="(item, index) in theaders1"
            :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-tabs>

    <ItemSelect ref="ItemSelectRef" @onSelected="onItemSelect" />
    <workshopSelect ref="workshopSelectRef" showModal @onSelected="onworkshopSelect" />
    <WorkuintSelect ref="WorkunitSelect" showModal @onSelected="onWorkunitSelect" />
    <WorkstationSelect ref="WorkstationSelect" showModal @onSelected="onWorkstationSelect" />
    <ProcessSelect ref="brSelectpro" showModal @onSelected="onBrandProcess"></ProcessSelect>
    <UserSingleSelect ref="userSelect" showModal @onSelected="onUserSelected"></UserSingleSelect>
  </div>
</template>

<script>
import dayjs from 'dayjs'

import { getList, getListByProcess, getListByUser, getListByWorkshop, getListByWorkOrder, getListByWorkstation, getListByWorkunit, getAchievementRateApi, getEfficiencyRateApi, getFeedDefRateApi, getProductivityRateApi } from "@/api/mes/proTable/statistAnaly";
import ProcessSelect from "@/components/process/taskSelectSingle.vue";
import ItemSelect from "@/components/itemSelect/single.vue";
import workshopSelect from "@/components/workshopSelect/single.vue";
import WorkuintSelect from "@/components/workunitSelect/single.vue";
import WorkstationSelect from "@/components/workstationSelect/simpletableSingle.vue"
import UserSingleSelect from "@/components/userSelect/single1.vue"

export default {
  name: "ScheduleSetupRule",
  components: { UserSingleSelect, ProcessSelect, ItemSelect, workshopSelect, WorkuintSelect, WorkstationSelect },
  dicts: [
    "mes_workorder_type",
  ],
  data() {
    return {
      showQueryLPN: false,
      // 遮罩层
      loading: true,
      selectedRows: [],
      tabIndex: 0,
      // 选中数组
      ids: [],
      //dta列表
      dtaOptions: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 排产换型对照信息表格数据
      tbodys: [],
      theaders: [],
      tbodys1: [],
      theaders1: [],
      // 弹出层标题
      title: "",
      statisisType: 1,
      // statisisList: ['工单', '车间', '工作中心', '工作单元', '工序', '人员'],
      statisisList: [{
        label: '工作单元',
        value: 1
      }, {
        label: '工作中心',
        value: 2
      }, {
        label: '车间',
        value: 3
      }],
      tableType: '计划达成统计表',
      statisisOption: ['计划达成统计表', '效率统计表', '生产力统计表', '产品不良分析统计表'],
      // 是否显示弹出层
      open: false,
      tableHeight: 0,
      daterangePurchaseDate: [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        "customerProjectNo": null,
        "endDate": null,
        "orderCode": null,
        "processName": null,
        "processCode": null,
        "processId": null,
        "productCode": null,
        "productId": null,
        "productName": null,
        "startDate": null,
        "taskCode": null,
        "userName": null,
        "nickName": null,
        "workorderCode": null,
        "workorderType": null,
        "workshopId": null,
        "workshopName": null,
        "workstationId": null,
        "workstationName": null,
        "workunitId": null,
        "workunitName": null
      },
      // 表单参数
      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
      console.log('this.tabIndex', this.tabIndex)
      this.tableHeight = height1 - height - (this.tabIndex ? 200 : 170)
    }
    window.addEventListener('resize', this._resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this._resizeHandler)
  },
  created() {
    this.getList();
  },
  watch: {
    tabIndex: {
      handler(val) {
        if (Number(val) === 0) {
          this.theaders = [
            { label: '工单类型', value: 'workorderType', width: '80px' },
            { label: '生产工单', value: 'workorderCode', width: '140px' },
            { label: '产品编码', value: 'productCode', width: '120px' },
            { label: '产品名称', value: 'productName', width: '240px' },
            { label: '工序任务', value: 'taskCode', width: '120px' },
            { label: '工序名称', value: 'processName', width: '80px' },
            { label: '工作中心编码', value: 'workstationCode', width: '100px' },
            { label: '工作中心名称', value: 'workstationName', width: '140px' },
            { label: '工作单元编码', value: 'workunitCode', width: '100px' },
            { label: '工作单元名称', value: 'workunitName', width: '280px' },
            { label: '报工人员编码', value: 'userName', width: '140px' },
            { label: '报工人员名称', value: 'nickName', width: '140px' },
            { label: '派工数量', value: 'quantity', width: '80px' },
            { label: '报工数量', value: 'quantityFeedback', width: '80px' },
            { label: '合格数量', value: 'quantityQualify', width: '80px' },
            { label: '不合格数量', value: 'quantityUnqualify', width: '90px' },
            { label: '不合格原因', value: 'abnormalReason', width: '90px' },
            { label: '标准工时', value: 'stdWorkingTime', width: '80px' },
            { label: '实际工时', value: 'machineTime', width: '80px' },
            { label: '计划完成时间', value: 'scheduleEndDate', width: '100px' },
            { label: '报工时间', value: 'feedbackTime', width: '100px' }
          ]
          this.handleQuery()
        }
      },
      immediate: true
    }
  },
  methods: {
    onUserSelected(row) {
      if (row != undefined) {
        console.log('rrr', row)
        this.queryParams.nickName = row.nickName;
      }
    },
    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() {
      this.loading = true;
      if (this.daterangePurchaseDate && this.daterangePurchaseDate.length > 0) {
        this.queryParams['startDate'] = this.daterangePurchaseDate[0]
        this.queryParams['endDate'] = this.daterangePurchaseDate[1]
      } else {
        this.queryParams['startDate'] = null
        this.queryParams['endDate'] = null
      }
      let api = getList
      if (Number(this.tabIndex) === 1) {
        if (this.tableType === '计划达成统计表') {
          api = getAchievementRateApi
          this.theaders1 = [
            { label: '任务条数', value: 'taskWorkunitCount' },
            { label: '任务完工条数', value: 'taskWorkunitFinshed' },
            { label: '达成任务率', value: 'taskWorkunitCountRate' },
            { label: '任务计划数', value: 'quantitySum' },
            { label: '实际报工数', value: 'feedQuantity' },
            { label: '达成任务数率', value: 'feedQuantityRate' }
          ]
        } else if (this.tableType === '效率统计表') {
          api = getEfficiencyRateApi
          this.theaders1 = [
            { label: '计划工时(毫秒)', value: 'planWorkTime' },
            { label: '延误工时(毫秒)', value: 'delayWorkTime' },
            { label: '投入工时(毫秒)', value: 'workTime' },
            { label: '产出工时(毫秒)', value: 'feedWorkTime' },
            { label: '效率值', value: 'efficiencyRate' }
          ]
        } else if (this.tableType === '生产力统计表') {
          api = getProductivityRateApi
          this.theaders1 = [
            { label: '计划工时(毫秒)', value: 'planWorkTime' },
            { label: '延误工时(毫秒)', value: 'delayWorkTime' },
            { label: '投入工时(毫秒)', value: 'workTime' },
            { label: '产出工时(毫秒)', value: 'feedWorkTime' },
            { label: '效率值', value: 'efficiencyRate' }
          ]
        } else if (this.tableType === '产品不良分析统计表') {
          api = getFeedDefRateApi
          this.theaders1 = [
            { label: '不良名称与编码', value: 'defectCodes' },
            { label: '任务条数', value: 'taskWorkunitCount' },
            { label: '不良任务工单条数', value: 'taskWorkunitDefCount' },
            { label: '任务不良发生率', value: 'taskWorkunitCountRate' },
            { label: '不良条数', value: 'feedDefSum' },
            { label: '任务数量', value: 'quantitySum' },
            { label: '不良数量', value: 'quantityUnSum' },
            { label: '数量不良率', value: 'quantityRate' }
          ]
        }
        // if (this.statisisType === '工单') {
        //   api = getListByWorkOrder
        //   this.theaders1 = [
        //     { label: '工单编码', value: 'workorderCode' },
        //     { label: '工单名称', value: 'workorderName' },
        //     { label: '报工数量', value: 'quantityFeedback' },
        //     { label: '合格数量', value: 'quantityQualify' },
        //     { label: '不合格数量', value: 'quantityUnqualify' },
        //     { label: '合格率', value: 'qualificationRate' }
        //   ]
        // } else if (this.statisisType === '车间') {
        //   this.theaders1 = [
        //     { label: '车间编号', value: 'workshopCode' },
        //     { label: '车间名称', value: 'workshopName' },
        //     { label: '报工数量', value: 'quantityFeedback' },
        //     { label: '合格数量', value: 'quantityQualify' },
        //     { label: '不合格数量', value: 'quantityUnqualify' },
        //     { label: '合格率', value: 'qualificationRate' }
        //   ]
        //   api = getListByWorkshop
        // } else if (this.statisisType === '工作中心') {
        //   this.theaders1 = [
        //     { label: '工作中心编号', value: 'workstationCode' },
        //     { label: '工作中心名称', value: 'workstationName' },
        //     { label: '报工数量', value: 'quantityFeedback' },
        //     { label: '合格数量', value: 'quantityQualify' },
        //     { label: '不合格数量', value: 'quantityUnqualify' },
        //     { label: '合格率', value: 'qualificationRate' }
        //   ]
        //   api = getListByWorkstation
        // } else if (this.statisisType === '工作单元') {
        //   this.theaders1 = [
        //     { label: '工作单元编码', value: 'workunitCode' },
        //     { label: '工作单元名称', value: 'workunitName' },
        //     { label: '报工数量', value: 'quantityFeedback' },
        //     { label: '合格数量', value: 'quantityQualify' },
        //     { label: '不合格数量', value: 'quantityUnqualify' },
        //     { label: '合格率', value: 'qualificationRate' }
        //   ]
        //   api = getListByWorkunit
        // } else if (this.statisisType === '工序') {
        //   this.theaders1 = [
        //     { label: '工序编码', value: 'processCode' },
        //     { label: '工序名称', value: 'processName' },
        //     { label: '报工数量', value: 'quantityFeedback' },
        //     { label: '合格数量', value: 'quantityQualify' },
        //     { label: '不合格数量', value: 'quantityUnqualify' },
        //     { label: '合格率', value: 'qualificationRate' }
        //   ]
        //   api = getListByProcess
        // } else if (this.statisisType === '人员') {
        //   this.theaders1 = [
        //     { label: '报工人员编码', value: 'userName' },
        //     { label: '报工人员名称', value: 'nickName' },
        //     { label: '报工数量', value: 'quantityFeedback' },
        //     { label: '合格数量', value: 'quantityQualify' },
        //     { label: '不合格数量', value: 'quantityUnqualify' },
        //     { label: '合格率', value: 'qualificationRate' }
        //   ]
        //   api = getListByUser
        // }
      }
      let params = this.queryParams;
      if (Number(this.tabIndex) === 1) {
        params = {
          ...this.queryParams,
          checkIndex: this.statisisType
        }
      }
      api(params).then(response => {
        if (Number(this.tabIndex) === 1) {
          this.tbodys1 = response.rows
        }
        else {
          this.tbodys = response.rows
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (Number(this.tabIndex) === 1 && !this.statisisType) this.$message.warning('请选择统计方式');
      this.queryParams.pageNum = 1;
      this.getList();
    },
    onBrandSelected(row) {
      if (Object.values(row).length > 0) {
        this.queryParams.itemTypeId = row.itemTypeId;
        this.queryParams.itemTypeName = row.itemTypeName;
      }
    },
    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.tableType === '计划达成统计表') {
        apiName = 'report/pro/feedback/getAchievementRate/export'
      } else if (this.tableType === '效率统计表') {
        apiName = 'report/pro/feedback/getEfficiencyRate/export'
      } else if (this.tableType === '生产力统计表') {
        apiName = 'report/pro/feedback/getFeedDefRate/export'
      } else if (this.tableType === '产品不良分析统计表') {
        apiName = 'report/pro/feedback/getProductivityRate/export'
      }
      // else if (this.statisisType === '车间') {
      //   apiName = 'report/pro/feedback/getListByWorkshop/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/getListByUser/export'
      // } else if (this.statisisType === '工单') {
      //   apiName = 'report/pro/feedback/getListByWorkOrder/export'
      // }
      let params = this.queryParams;
      if (Number(this.tabIndex) === 1) {
        params = {
          ...this.queryParams,
          checkIndex: this.statisisType
        }
      }
      this.download(
        apiName,
        params,
        `statistAnaly_${new Date().getTime()}.xlsx`
      );
    }
  }
};
</script>
