<template>
  <div class="ele-body">
    <el-card shadow="never">
      <search ref="search" @search="search"></search>
      <ele-pro-table
        ref="table"
        row-key="batchNo"
        :columns="columns"
        :datasource="datasource"
        :toolbar="false"
        :selection.sync="selection"
        @expand-change="expandChange"
        class="table"
  
      >
        <ele-toolbar>
          <!-- 默认插槽添加左边内容 -->
          <el-button type="primary" @click="exportList">导出</el-button>
        </ele-toolbar>

        <template v-slot:expand="{ row }">
          <ele-pro-table
            ref="table1"
            :columns="columns1"
            :datasource="getList(row)"
            :toolbar="false"
            :needPage="false"
            :show-header="false"
            :loading="loading"
          >
            <template v-slot:action="{ row }">
              <el-link type="primary" :underline="false" @click="openEdit(row)">
                二维码
              </el-link>
            </template>
          </ele-pro-table>
        </template>
      </ele-pro-table>
    </el-card>
    <el-dialog
      class="ele-dialog-form"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="400px"
      append-to-body
      title="二维码"
    >
      <div ref="printRef" class="codeDiv">
        <div>
          <ele-qr-code :value="text" :size="120" />
        </div>

        <div style="margin-left: 20px">
          <div>产品名称：{{ currentRow.productName }}</div>
          <div>产品编码：{{ currentRow.productCode }}</div>
          <div>规格：{{ currentRow.specification }}</div>
        </div>
      </div>

      <template v-slot:footer>
        <el-button @click="print">打印预览</el-button>
      </template>
    </el-dialog>
  </div>
</template>
  <script>
import search from './components/search.vue';
import EleQrCode from 'ele-admin/es/ele-qr-code';
import {
  getQualityControlWorkOrder,
  queryListDetail,exportList
} from '@/api/inspectionStatistics';
import dictMixins from '@/mixins/dictMixins';
import { printElement } from 'ele-admin';
export default {
  mixins: [dictMixins],
  components: {
    search,
    EleQrCode
  },
  data() {
    return {
      visible: false,
      text: '',
      currentRow: {},
      selection: [],
      list: [],
      loading: false,
      columns: [
        {
          width: 45,
          type: 'selection',
          columnKey: 'selection',
          align: 'center',
          reserveSelection: true
        },
        {
          width: 45,
          type: 'expand',
          columnKey: 'expand',
          align: 'center',
          slot: 'expand'
        },
        // {
        //   width: 50,
        //   type: 'index',
        //   columnKey: 'index',
        //   align: 'center',
        //   label: '序号'
        // },

        {
          prop: 'batchNo',
          label: '批次号',
          align: 'center',
          width: 150
        },
        {
          prop: 'qualityTime',
          label: '日期',
          align: 'center',
          width: 120
        },
        {
          label: '釜号',
          prop: 'workOrderCode1',
          align: 'center',
          width: 60
        },
        {
          label: '计划号',
          prop: 'workOrderCode2',
          align: 'center',
          width: 150
        },
        {
          prop: 'productName',
          label: '产品名称',
          align: 'center',
          width: 150
        },
        {
          prop: 'productCode',
          label: '产品编码',
          align: 'center',
          width: 150
        },
        {
          prop: 'specification',
          label: '规格',
          align: 'center',
          width: 150
        },

        {
          prop: 'total',
          label: '总数量',
          align: 'center',
          width: 80
        },
        {
          prop: 'qualifiedNumber',
          label: '合格数',
          align: 'center',
          width: 80
        },
        {
          prop: 'qualificationRate',
          label: '合格率',
          align: 'center',
          width: 80
        },
        {
          label: '报废',
          align: 'center',
          width: 60,
          prop: 'scrapNumberSum'
        },
        {
          prop: 'scrapReason',
          label: '原因',
          align: 'center',
          width: 160
        },
        {
          prop: 'scrapNumberRate',
          label: '报废率',
          align: 'center',
          width: 70
        },
        {
          prop: 'cutRepairNumberSum',
          label: '切补',
          align: 'center',
          width: 60
        },
        {
          prop: 'cutRepairReason',
          label: '原因',
          align: 'center',
          width: 160
        },
        {
          label: '切补率',
          prop: 'cutRepairNumberRate',
          width: 70
        },
        {
          prop: 'correctNumberSum',
          label: '降级修正',
          align: 'center',
          width: 80
        },
        {
          prop: 'correctReason',
          label: '原因',
          align: 'center',
          width: 150
        },
        {
          label: '降级修正率',
          prop: 'correctNumberRate',
          width: 100
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 80,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }
      ],
      columns1: [
        {
          width: 45,

          reserveSelection: true
        },
        {
          width: 45
        },

        {
          prop: '',
          label: '批次号',
          align: 'center',
          width: 150
        },
        {
          prop: 'qualityTime',
          label: '日期',
          align: 'center',
          width: 120
        },
        {
          label: '釜号',
          prop: 'workOrderCode1',
          align: 'center',
          width: 60
        },
        {
          label: '计划号',
          prop: 'workOrderCode2',
          align: 'center',
          width: 150
        },
        {
          prop: 'productName',
          label: '产品名称',
          align: 'center',
          width: 150
        },
        {
          prop: 'productCode',
          label: '产品编码',
          align: 'center',
          width: 150
        },
        {
          prop: 'specification',
          label: '规格',
          align: 'center',
          width: 150
        },

        {
          prop: 'total',
          label: '总数量',
          align: 'center',
          width: 80
        },
        {
          prop: 'qualifiedNumber',
          label: '合格数',
          align: 'center',
          width: 80
        },
        {
          prop: 'qualificationRate',
          label: '合格率',
          align: 'center',
          width: 80
        },
        {
          label: '报废',
          align: 'center',
          width: 60,
          prop: 'scrapNumberSum'
        },
        {
          prop: 'scrapReason',
          label: '原因',
          align: 'center',
          width: 160
        },
        {
          prop: 'scrapNumberRate',
          label: '报废率',
          align: 'center',
          width: 70
        },
        {
          prop: 'cutRepairNumberSum',
          label: '切补',
          align: 'center',
          width: 60
        },
        {
          prop: 'cutRepairReason',
          label: '原因',
          align: 'center',
          width: 160
        },
        {
          label: '切补率',
          prop: 'cutRepairNumberRate',
          width: 70
        },
        {
          prop: 'correctNumberSum',
          label: '降级修正',
          align: 'center',
          width: 80
        },
        {
          prop: 'correctReason',
          label: '原因',
          align: 'center',
          width: 150
        },
        {
          label: '降级修正率',
          prop: 'correctNumberRate',
          width: 100
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 79,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }
      ],
      where:{},
      page:'',
      limit:""
    };
  },
  created() {},
  methods: {
    obj_to_str(obj) {
      var str = '';
      for (var k in obj) {
        str += `${k}=${obj[k]}&`;
      }
      return str;
    },
    getList(row) {
      return this.list.filter((item) => item.batchNo == row.batchNo);
    },

    datasource({ page, where, limit, parent }) {
      this.where=where
      this.page=page
      this.limit=limit
      return getQualityControlWorkOrder({
        ...where,
        pageNum: page,
        size: limit
      });
    },
    async expandChange(data) {
      if (this.list.map((item) => item.batchNo).includes(data.batchNo)) {
        return;
      }
      const val = await queryListDetail(data.batchNo);
      val.forEach(item=>{
        item['batchNo']=data.batchNo
      })
      this.list.push(...val);
    },

    print() {
      printElement(this.$refs.printRef);
    },
    openEdit(row) {
      this.visible = true;
      this.currentRow = row;
      const paramsStr = this.obj_to_str({
        productName: encodeURIComponent(row.productName),
        specification: encodeURIComponent(row.specification),
        productCode: row.productCode,
        batchNo: row.batchNo,
        createTime: row.qualityTime.split(' ')[0]
        // de: encodeURIComponent(this.$props.currentRowData.designDrawing)
      });
      this.text =
        window.location.origin +
        '/qms/fromQRCode/designDrawing.html' +
        '?' +
        paramsStr;
    },
    exportList(){
      exportList({
        ...this.where,
        stringList:this.selection.map(item=>item.batchNo),
        pageNum: this.page,
        size: this.limit
      })
    },
    search(where) {
      this.$refs.table.reload({
        where: where,
        page: 1
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.codeDiv {
  display: flex;
  div {
    font-size: 16px;
    line-height: 35px;
  }
}
.ele-body {
  :deep(.el-table--border .el-table__expanded-cell) {
    padding: 0;
    .el-table {
      border: none;
    }
  }
}
</style>