<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="'日期'">
          <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 :label="'车间'" prop="workshopName">
            <el-select filterable v-model="queryParams.workshopName" placeholder="请选择工作中心" clearable>
                <el-option
                v-for="dict in workshopList"
                :key="dict.workshopId"
                :label="dict.workshopName"
                :value="dict.workshopName"
                />
            </el-select>
        </el-form-item>
        <el-form-item :label="'工作中心'" prop="workstationName">
            <el-select filterable v-model="queryParams.workstationName" placeholder="请选择工作中心" clearable>
              <el-option
                v-for="dict in workstationList"
                :key="dict.workstationId"
                :label="dict.workstationName"
                :value="dict.workstationName"
              />
            </el-select>
        </el-form-item>
        <el-form-item :label="'工作单元'" prop="workunitName">
            <el-select filterable v-model="queryParams.workunitName" placeholder="请选择工作中心" clearable>
              <el-option
                v-for="dict in workunitList"
                :key="dict.workunitId"
                :label="dict.workunitName"
                :value="dict.workunitName"
              />
            </el-select>
        </el-form-item>
        <el-form-item :label="'是否完工'" prop="workunitId">
          <el-select v-model="queryParams.complate" placeholder="请选择是否完工" clearable>
            <el-option label="否"
                value="Incomplete"></el-option>
            <el-option label="是"
            value="Completed"></el-option>
            </el-select>
        </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="'无SIZE'">
          <el-row style="margin-bottom: 10px;">
            <el-button type="primary" size="mini"  v-clipboard:copy="joinWorkorder" v-clipboard:success="clipboardSuccess" :disabled="tbodys.length === 0">{{'复制工单号'}}</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="getWorkorderList"
          />
        </el-tab-pane>
        <el-tab-pane :label="'有SIZE'">
          <el-row align="center" style="line-height: 40px;">
            <el-col :span="3">
              <el-button type="primary" size="mini" v-clipboard:copy="joinWorkorder" v-clipboard:success="clipboardSuccess" :disabled="tbodys1.length === 0">{{'复制工单号'}}</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 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="getWorkorderList"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
import dayjs from 'dayjs'
  import {
    getworkshopList,
    getworkstationList} from '@/api/mes/pro/scheduleList'
  import {
    listWorkunit
    } from "@/api/mes/md/workunit";
  import { getWorkorderList } from "@/api/mes/proTable/supplementaryOrder";
  
  export default {
    name: "ScheduleSetupRule",
    dicts: [
    "mes_workorder_type",
  ],
    data() {
      return {
        showQueryLPN: false,
        // 遮罩层
        loading: true,
        selectedRows: [],
        tabIndex: 0,
        // 选中数组
        ids: [],
        //dta列表
        workshopList: [],
        workstationList: [],
        workunitList: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 排产换型对照信息表格数据
        tbodys: [],
        theaders: [],
        tbodys1: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        tableHeight: 0,
        daterangePurchaseDate: [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          "customerProjectNo": null,
          complate: 'Completed',
          "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.getOptions()
      this.getWorkorderList();
    },
    computed: {
        joinWorkorder() {
            if (!this.tbodys || this.tbodys.length === 0) {
                return ''
            }
            const arr = this.tbodys.map(v => v.workorder_code)
            return arr.join('\n')
        }
    },
    methods: {
      clipboardSuccess() {
        this.$modal.msgSuccess("复制成功");
      },
      async getOptions(){
        const response = await getworkshopList()
        this.workshopList = response.rows
        const response1 = await getworkstationList({workshopId: null})
        this.workstationList = response1.rows
        const response2 = await listWorkunit()
        this.workunitList = response2.rows
      },
      tabClick(val){
        console.log('this.tabIndex', this.tabIndex, val)
        this.tabIndex = val.index
        this.getWorkorderList();
        this.$nextTick(() => {
          this._resizeHandler()
        })
      },
      /** 查询排产换型对照信息列表 */
      getWorkorderList() {
        this.loading = true;
        this.queryParams.params = {};
        if (this.daterangePurchaseDate && this.daterangePurchaseDate.length > 0) {
          this.queryParams.params["beginPurchaseDate"] = this.daterangePurchaseDate[0]
          this.queryParams.params["endPurchaseDate"] = this.daterangePurchaseDate[1]
        }
        const params = {...this.queryParams}
        if (Number(this.tabIndex) === 1) {
            this.theaders = [
                {label: '工单编码', value: 'workorder_code'},
                {label: '缺失SIZE', value: 'size_quantity'},
                {label: '差异数量', value: 'diff'},
                {label: '已补数量', value: 'complements_sum'}
            ]
            params['sizeType'] = 1
        } else {
            this.theaders = [
                {label: '工单编码', value: 'workorder_code'},
                {label: '计划数量', value: 'quantity'},
                {label: '完成数量', value: 'feedback_sum'},
                {label: '差异数', value: 'diff'},
                {label: '已补数量', value: 'complements_sum'}
            ]
            params['sizeType'] = 0
        }
        getWorkorderList(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() {
        this.queryParams.pageNum = 1;
        this.getWorkorderList();
      },
      /** 重置按钮操作 */
      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
      }
    }
  };
  </script>
  