<template>
  <div id="inventoryBalance">
    <el-card shadow="never">
      <!-- 数据表格 -->
      <div>
        <search-table @search="reload"></search-table>
      </div>
      <ele-pro-table
        ref="table"
        class="table"
        :columns="columns"
        :pageSize="20"
        :datasource="datasource"
        height="calc(100vh - 405px)"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
        :needPage="false"
        :cell-class-name="setCellClass"
        :span-method="spanMethod"
        :cache-key="cacheKeyUrl"
      >
        <!-- <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="add(true, row)"
          >
            详情
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-download"
            @click="downLoad(row)"
          >
            下载
          </el-link>
        </template> -->
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import searchTable from './components/searchTable.vue';
  import { sendReceiveGatherExcel } from '@/api/warehouseManagement/statisticalReports';

  export default {
    components: { searchTable },
    computed: {
      columns() {
        let year, month, days;

        if (this.date) {
          year = this.date.split('-')[0];
          month = this.date.split('-')[1].replace(/^0+/, '');
          days = new Date(year, month, 0).getDate();
        } else {
          year = new Date().getFullYear();
          month = new Date().getMonth() + 1;
          days = new Date(year, month, 0).getDate();
        }

        let dateColumns = Array.from({ length: days }, (_, i) => ({
          prop: `dateList[${i}][dateTotalNum]`,
          label: `${month}/${i + 1}`,
          align: 'center',
          showOverflowTooltip: true,
          formatter(row) {
            return row.dateList[i].dateTotalNum
              ? row.dateList[i].dateTotalNum
              : '';
          }
        }));

        let arr = [
          {
            type: 'index',
            label: '序号',
            width: 50,
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'clientName',
            label: '客户',
            align: 'center',
            width: 200,
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center',
            width: 180,
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center',
            width: 180,
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'startNum',
            label: '期初\n素材',
            slot: 'startTime',
            align: 'center',
            width: 80,
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'endNum',
            label: '结存\n合计',
            align: 'center',
            width: 0,
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'totalNum',
            label: '数量',
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'category',
            label: '类别',
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'categoryNum',
            label: '类别小计',
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'dateList',
            label: '日期/数量',
            align: 'center',
            showOverflowTooltip: true,
            children: dateColumns
          }
        ];

        return arr;
      }
    },

    data() {
      return {
        date: '',
        cacheKeyUrl:
          'wms-warehouseManagement-statisticalReports-transceiverSummary'
      };
    },
    methods: {
      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' : '';
      },

      spanMethod({ row, column, rowIndex, columnIndex }) {
        
        if (
          column.property === 'startNum' ||
          // column.property === 'endNum' ||
          column.property === 'totalNum'
        ) {
          const groupStartIndex = Math.floor(rowIndex / 5) * 5;
          if (rowIndex === groupStartIndex) {
            // 每组的第一行，合并 5 行
            return {
              rowspan: 5,
              colspan: 1
            };
          } else {
            // 每组的非第一行，隐藏单元格
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
        if(row.dateList?.length){
          row.categoryNum = row.dateList.reduce((total, item) => {
            return total + item.dateTotalNum;
          }, 0);
        }
        // 其他列不进行合并
        return {
          rowspan: 1,
          colspan: 1
        };
      },

      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return sendReceiveGatherExcel({
          ...where
          //   ...order,
          //   type: 2,
          //   keyWord: this.keyWord,
          //   pageNum: page,
          //   size: limit
        });
      },
      reload(where) {
        this.date = where.startDate ?? '';
        console.log(where);
        this.$refs.table.reload({ page: 1, where: where });
      }
    }
  };
</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>
