<template>
    <div class="app-container mys-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="salesVoucher">
          <el-input
            v-model="queryParams.salesVoucher"
            placeholder="请输入销售订单"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="订单项次" prop="salesVoucherItem">
          <el-input
            v-model="queryParams.salesVoucherItem"
            placeholder="请输入订单项次"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="工单号" prop="workorderCodes">
          <el-input
            v-model="queryParams.workorderCodes"
            placeholder="请输入工单号"
            type="textarea"
            :rows="2"
            resize="none"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="编排单号" prop="arrangeCodes">
          <el-input
            v-model="queryParams.arrangeCodes"
            placeholder="请输入编排单号"
            type="textarea"
            :rows="2"
            resize="none"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        
        <el-form-item label="条码" prop="barcode">
          <el-input
            v-model="queryParams.barcode"
            placeholder="请输入条码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </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 label="是否入库" prop="warehouse">
          <el-select v-model="queryParams.warehouse" style="width:220px;" placeholder="请选择是否入库" clearable>
            <el-option label="是" value="2" />
            <el-option label="否" value="1" />
        </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-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['mes:wm:issueheader:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="tbodys" @selection-change="handleSelectionChange"  @row-click="mainTableClick" :height="tableHeight" :row-class-name="tableRowClassName">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="销售订单" align="center" width="150px" prop="salesVoucher" >
          <!-- <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleView(scope.row)"
            >{{scope.row.salesVoucher}}</el-button>
          </template> -->
        </el-table-column>
        <el-table-column label="订单项次" align="center" prop="salesVoucherItem" />
        <el-table-column label="编排单号" align="center" prop="arrangeCode" />
        <el-table-column label="工单号" align="center" prop="workorderCode" />
        <el-table-column label="条码" align="center" prop="barcode" />
        <el-table-column label="入库时间" align="center" prop="warehouseTime" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.warehouseTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
        </el-table-column>
        <el-table-column label="产品编码" align="center" prop="productCode" />
        <el-table-column label="产品名称" align="center" prop="productName" />
        <el-table-column label="数量" align="center" prop="packageNum" />
        <el-table-column label="装箱分组码" align="center" prop="blGroup" />
        <el-table-column label="装箱码" align="center" prop="boxCode" />
        <el-table-column label="SIZE明细" align="center" prop="boxCode" >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleViewSIZE(scope.row)"
            >SIZE明细</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div class="second-box" v-if="isShowSecond">
      <el-table v-loading="loadingLeft" :data="tbodysLeft" border>
        <el-table-column :label="'工作中心'" align="center" prop="workstation_name"></el-table-column>
        <el-table-column :label="'工作单元'" align="center" prop="workunit_name"></el-table-column>
        <el-table-column :label="'报工人员'" align="center" prop="create_by"></el-table-column>
        <el-table-column :label="'标准工时'" align="center" prop="std_working_time">
        </el-table-column>
        <el-table-column :label="'实际工时'" align="center" prop="machine_time"></el-table-column>
        <el-table-column :label="'报工时间'" align="center" prop="create_time"></el-table-column>
      </el-table>
    </div>
  
      <!-- 添加或修改生产领料单头对话框 -->
      <el-dialog :title="title" :visible.sync="openSIZE" width="960px" append-to-body>
        <el-card shadow="always" class="box-card">
          <Issueline ref="line" :sizeItems="sizeItems"></Issueline>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { getplbl } from "@/api/mes/proTable/productSee";
  import {getTreeList} from "@/api/mes/wm/warehouse"
  import dayjs from 'dayjs'
  import Issueline from "./line.vue";
  export default {
    name: "Issueheader",
    dicts: ['mes_order_status'],
    components: {Issueline},
    data() {
      return {
        warehouseInfo:[],
        warehouseOptions:[],
        warehouseProps:{
          multiple: false,
          value: 'pId',
          label: 'pName',
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 生产领料单头表格数据
        tbodys: [],
  
        daterangePurchaseDate: [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        openSIZE: false,
        tableHeight: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          warehouse: null,
          issueCode: null,
          issueName: null,
          workstationId: null,
          workstationCode: null,
          barcode: null,
          workorderCode: null,
          taskId: null,
          taskCode: null,
          locationId: null,
          locationCode: null,
          locationName: null,
          areaId: null,
          areaCode: null,
          areaName: null,
          issueDate: null,
          salesVoucher: null,
          workorderCodes: null,
          arrangeCodes: null,
          salesVoucherItem: null,
          barcode: null
        },
        highlightRow: null,
        tbodysLeft: [],
        loadingLeft: false,
        isShowSecond: false,
        sizeItems: [],
        // 表单参数
        form: {
            feedback: {},
            sizeItems: []
        }
      };
    },
    created() {
      this.getList();
    },
    mounted(){
        this.$nextTick(()=>{
        this._resizeHandler()
        })
        this._resizeHandler = () => {
            this.tableHeight = (window.innerHeight / 2) - 120
        }
        window.addEventListener('resize', this._resizeHandler)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this._resizeHandler)
    },
    methods: {
      // 取消按钮
      cancel() {
        this.open = false;
        this.openSIZE = false
        this.reset();
      },
      tableRowClassName({ row, rowIndex }) {
        if(!row.barcode || !this.highlightRow) return ''
        // 如果当前行是高亮行，则添加特定的类名
        if (row.barcode === this.highlightRow.barcode) {
            return 'highlight-row';
        }
        return '';
      },
      mainTableClick(row){
        this.loadingLeft = true;
        this.highlightRow = row;
        if (row.feedback) {
            this.tbodysLeft = [row.feedback]
        } else {
            this.tbodysLeft = []
        }
        this.loadingLeft = false;
        this.isShowSecond = true
      },
      /** 查询生产领料单头列表 */
      getList() {
        this.loading = true;
        this.queryParams.params = {};
        if (null != this.daterangePurchaseDate && '' != this.daterangePurchaseDate) {
          this.queryParams.params["beginPurchaseDate"] = this.daterangePurchaseDate[0];
          this.queryParams.params["endPurchaseDate"] = this.daterangePurchaseDate[1];
        }
        const params = {
          ...this.queryParams,
          workorderCodes: this.queryParams.workorderCodes ? this.queryParams.workorderCodes.split(/[\n,;，、；。]/).filter(item => item) : null,
          arrangeCodes: this.queryParams.arrangeCodes ? this.queryParams.arrangeCodes.split(/[\n,;，、；。]/).filter(item => item) : null,
        }
        getplbl(params).then(response => {
          this.tbodys = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.form = {
          issueId: null,
          issueCode: null,
          issueName: null,
          workstationId: null,
          workstationCode: null,
          workstationName: null,
          barcode: null,
          workorderCode: null,
          workorderName: null,
          clientId:null,
          clientCode:null,
          clientName:null,
          taskId: null,
          taskCode: null,
          warehouseId: null,
          warehouseCode: null,
          warehouseName: null,
          locationId: null,
          locationCode: null,
          locationName: null,
          areaId: null,
          areaCode: null,
          areaName: null,
          issueDate: new Date(),
          remark: null,
          attr1: null,
          attr2: null,
          attr3: null,
          attr4: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          salesVoucher: null,
          workorderCodes: null,
          arrangeCodes: null,
          salesVoucherItem: null,
          barcode: null,
          feedback: {
            workstation_name: '',
            workunit_name: '',
            create_by: '',
            std_working_time: '',
            machine_time: '',
            create_time: ''
          },
          sizeItems: []
        };
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.daterangePurchaseDate = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.recordId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
       // 查询明细按钮操作
      handleViewSIZE(row){
        if (!row.sizeItems) {
            this.sizeItems = []
        } else {
            this.sizeItems = row.sizeItems
        }
        this.openSIZE = true;
        this.title = "查看SIZE明细";
      },
      /** 导出按钮操作 */
      handleExport() {
        let params = {}
        if (this.ids && this.ids.length > 0) {
            params['recordIds'] = this.ids.join(',')
        } else {
            this.queryParams.params = {};
            if (null != this.daterangePurchaseDate && '' != this.daterangePurchaseDate) {
            this.queryParams.params["beginPurchaseDate"] = this.daterangePurchaseDate[0];
            this.queryParams.params["endPurchaseDate"] = this.daterangePurchaseDate[1];
            }
            params = {
            ...this.queryParams,
            workorderCodes: this.queryParams.workorderCodes ? this.queryParams.workorderCodes.split(/[\n,;，、；。]/).filter(item => item) : null,
            arrangeCodes: this.queryParams.arrangeCodes ? this.queryParams.arrangeCodes.split(/[\n,;，、；。]/).filter(item => item) : null,
            }
        }
        this.download2('report/pro/tracedback/export', {
          params: params
        }, `tracedback_${new Date().getTime()}.xlsx`)
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .mys-container {
  .pagination-container {
    padding: 0px 20px !important;
  }
  ::v-deep .highlight-row {
    background-color: #e5eeff !important; 
    td {
      background-color: #e5eeff !important; 
    }
  }
}
  </style>