<template>
  <div id="inventoryBalance">
    <el-card shadow="never" v-loading="loading">
      <!-- 数据表格 -->
      <div>
        <el-form ref="form" :model="form">
          <el-form-item label="日期">
            <el-date-picker
              @change="changeDate"
              v-model="form.reportDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>

      <ele-pro-table
        ref="table"
        class="table"
        :columns="columns"
        :datasource="datasource"
        height="calc(100vh - 405px)"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
        :needPage="false"
        :cache-key="cacheKeyUrl"
      >
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import { getProductionReport } from '@/api/mes';
  export default {
    mixins: [tableColumnsMixin],
    components: {},
    computed: {
      columns() {
        // let inspections = [];
        // this.datasource.forEach((item) => {
        //   inspections.push(...item.inspections);
        // });
        // let result = uniqueByProperty(inspections, 'inspectionCode');
        // let dataColumns = result.map((item) => ({
        //   prop: item.inspectionCode,
        //   label: item.inspectionName,
        //   align: 'center',
        //   showOverflowTooltip: true,
        //   formatter(row, column) {
        //     let data = row.inspections.find(
        //       (item) => item.inspectionCode === column.property
        //     );
        //     return data ? data.noQualifiedNumber : '';

        //   }
        // }));
        this.columnsVersion++;
        let dataColumns;

        if (!this.datasource.length) {
          dataColumns = [];
        } else {
          dataColumns = this.datasource[0].inspections.map((item) => ({
            prop: item.inspectionCode,
            label: item.inspectionName,
            align: 'center',
            showOverflowTooltip: true,
            formatter(row, column) {
              let data = row.inspections.find(
                (item) => item.inspectionCode === column.property
              );
              return data
                ? data.noQualifiedNumber
                  ? data.noQualifiedNumber
                  : ''
                : '';
            }
          }));
        }

        let arr = [
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            width: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '工单日期',
            align: 'center',
            width: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'workOrderNo',
            label: '工单号',
            align: 'center',
            width: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'customerName',
            label: '客户',
            align: 'center',
            width: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'productName',
            label: '产品名称',
            align: 'center',
            width: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'firstProcessFeedingQty',
            label: '首工序\n投料数量',
            align: 'center',
            width: 80,
            showOverflowTooltip: true
          },
          {
            prop: 'lastProcessFeedingQty',
            label: '尾工序\n投料数量',
            align: 'center',
            width: 80,
            showOverflowTooltip: true
          },
          {
            prop: 'noQualifiedNumberCount',
            label: '不良品\n总数',
            align: 'center',
            width: 80,
            showOverflowTooltip: true
          },
          {
            prop: 'dateList',
            label: '不良品类型/不良品数量',
            align: 'center',
            showOverflowTooltip: true,
            children: dataColumns
          }
        ];

        return arr;
      }
    },
    watch: {},

    data() {
      return {
        form: {
          reportDate: ''
        },
        loading: false,
        date: '',
        reportDate: '',
        datasource: [],
        cacheKeyUrl: 'mes-reportForms-productionDayReport1',
        columnsVersion: 0
      };
    },
    methods: {
      changeDate(e) {
        this.loading = true;
        if (!e) {
          this.form.reportDate = '';
        }

        this.getList();
      },
      setCellClass({ row, column }) {
        // console.log(row, column, rowIndex, columnIndex);
        let day = column.label.split('/')[1];
        let num = row.dateList[day - 1];
        if (!num) {
          return '';
        }
        return num?.dateTotalNum ? 'content-num' : '';
      },

      async getList() {
        const res = await getProductionReport(this.form);
        console.log(res);
        this.datasource = res;
        this.loading = false;
      },

      reload(where) {
        this.date = where.startDate ?? '';
        console.log(where);
        this.$refs.table.reload({ page: 1, where: where });
      },
      getYesterday() {
        const currentDate = new Date();
        currentDate.setDate(currentDate.getDate() - 1);
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        const yesterday = `${year}-${month}-${day}`;
        return yesterday;
      }
    },
    created() {
      this.form.reportDate = this.getYesterday();
      this.getList();
      this.loading = false;
    }
  };
</script>
<style lang="scss" scoped>
  #inventoryBalance {
    height: calc(100vh - 96px);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    // element-ui样式穿透
    :deep(.el-card) {
      height: 100%;
      .el-card__body {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .ele-pro-table {
          flex: 1;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            // display: flex;
            // flex-direction: column;
            // .el-table__body-wrapper {
            //   flex: 1;
            // }
          }
        }
      }
      .el-form-item {
        margin-bottom: 5px !important;
      }
    }
    .ele-form-actions {
      display: flex;
      justify-content: flex-end;
    }
  }

  :deep(.ele-pro-table-header-ellipsis > .el-table th.el-table__cell > .cell) {
    white-space: pre;
  }

  :deep(.content-num) {
    color: #000;
    background-color: #53c77f !important;
  }
</style>
