<!-- 档期陈列 -->
<template>
  <CommonPlan :tableData="tableData"
    :isLoading="isLoading"
    :total="total"
    :tableColumns="tableColumns"
    :chooseColumns="chooseColumns"
    :visibleProps="visibleProps"
    :params="params"
    @updateColumns="updateColumns"
    @getTableList="getTableList" />
</template>

<script setup
  lang="jsx">
  import CommonPlan from '@/views/promotion/components/CommonPlan'
  import { getDisplayScheduleDetail, submitDisplayPlan } from '@/api'
  import { parseTime } from '@/utils'
  import { onMounted } from 'vue';

  /*************** 操作类型 ***************/
  // 全部列
  const baseColumns = ref([
    // 一级类
    {
      label: "基础信息", // 类型标题
      children: [
        {
          "label": "销售大区",
          "prop": "regionName",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 90
        },
        {
          "label": "销售战区",
          "prop": "districtName",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 90
        },
        {
          "label": "经销商 - 省份",
          "prop": "dealerProvince",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 110
        },
        {
          "label": "经销商 - 城市",
          "prop": "dealerCity",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 110
        },
        {
          "label": "经销商 - 代码",
          "prop": "dealerCode",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 110
        },
        {
          "label": "经销商名称",
          "prop": "dealerName",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 200
        },
        {
          "label": "经销商类型",
          "prop": "dealerType",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 150
        },
        {
          "label": "开户日期",
          "prop": "openingDate",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 120
        },
        {
          "label": "闭户日期",
          "prop": "closingDate",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 120
        },
        {
          "label": "大区总监",
          "prop": "regionManager",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 80
        },
        {
          "label": "战区经理",
          "prop": "districtManager",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 80
        },
        {
          "label": "城市经理",
          "prop": "cityManager",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 80
        },
        {
          "label": "系统名称",
          "prop": "lineName",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 100
        },
        {
          "label": "系统类型",
          "prop": "lineType",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 110
        },
        {
          "label": "渠道大类",
          "prop": "channelDl",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 100
        },
        {
          "label": "渠道小类",
          "prop": "channelXl",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 150
        },
        {
          "label": "系统业态",
          "prop": "lineLf",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 120
        },
        {
          "label": "门店数",
          "prop": "storeCount",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 90
        }
      ],
      prop: 'baseColumns',
      visible: true
    },
    {
      label: "档期基础信息",
      children: [
        {
          "label": "档期执行月份",
          "prop": "promotionExecutionMonth",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 120
        },
        {
          "label": "档期计划 - 促销规格",
          "prop": "plannedPromotionSpec",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        },
        {
          "label": "档期计划 - 促销口味",
          "prop": "plannedPromotionFlavor",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        }
      ],
      prop: 'scheduleBaseColumns',
      visible: true
    },
    {
      label: "促销计划",
      prop: 'scheduleFpColumns',
      children: [
        {
          "label": "计划 - 档期规则",
          "prop": "plannedPromotionRules",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "计划 - 档期前补差天数",
          "prop": "plannedPrePromotionAdjustDays",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        },
        {
          "label": "计划 - 档期后补差天数",
          "prop": "plannedPostPromotionAdjustDays",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        },
        {
          "label": "计划 - 档期开始时间",
          "prop": "plannedPromotionStartDate",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        },
        {
          "label": "计划 - 补差开始时间",
          "prop": "plannedAdjustmentStartDate",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        },
        {
          "label": "计划 - 档期结束时间",
          "prop": "plannedPromotionEndDate",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        },
        {
          "label": "计划 - 补差结束时间",
          "prop": "plannedAdjustmentEndDate",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        }
      ],
      visible: true
    },
    {
      label: '档期门店陈列计划',
      prop: 'scheduleStoreColumns',
      children: [
        {
          "label": "计划 - 档期陈列开始时间",
          "prop": "plannedPromotionDisplayStartDate",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 180
        },
        {
          "label": "计划 - 档期陈列结束时间",
          "prop": "plannedPromotionDisplayEndDate",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 180
        },
        {
          "label": "门店编码",
          "prop": "storeCode",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 120
        },
        {
          "label": "门店名称",
          "prop": "storeName",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 170
        },
        {
          "label": "门店类型",
          "prop": "storeType",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 80
        },
        {
          "label": "门店计数",
          "prop": "storeCountNum",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 80
        },
        {
          "label": "门店地址",
          "prop": "storeAddress",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 280
        },
        {
          "label": "计划端架 - 数量",
          "prop": "plannedEndCapQty",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "计划端架 - 费用",
          "prop": "plannedEndCapTotalCost",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "实际端架 - 数量",
          "prop": "actualEndCapQty",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "实际端架 - 是否执行",
          "prop": "actualEndCapExecuted",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        },
        {
          "label": "计划地堆 - 平米数（㎡）",
          "prop": "plannedFloorStackArea",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 180
        },
        {
          "label": "计划地堆 - 数量",
          "prop": "plannedFloorStackQty",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "计划地堆 - 费用",
          "prop": "plannedFloorStackTotalCost",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "实际地堆 - 平米数（㎡）",
          "prop": "actualFloorStackArea",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 180
        },
        {
          "label": "实际地堆 - 数量",
          "prop": "actualFloorStackQty",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "实际地堆是否执行",
          "prop": "actualFloorStackExecuted",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "计划其他陈列数量 + 形式",
          "prop": "plannedOtherDisplay",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 180
        },
        {
          "label": "计划其他陈列 - 总费用",
          "prop": "plannedOtherDisplayTotalCost",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        },
        {
          "label": "实际其他陈列 - 数量 + 形式",
          "prop": "actualOtherDisplay",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 190
        },
        {
          "label": "实际其他陈列 - 是否执行",
          "prop": "actualOtherDisplayExecuted",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 170
        },
        {
          "label": "合计费用 - 费用",
          "prop": "totalCost",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "档期陈列是否执行",
          "prop": "promotionDisplayExecuted",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "付费陈列 - 是否",
          "prop": "paidDisplay",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 120
        },
        {
          "label": "当月拜访目标 - 是否",
          "prop": "monthlyVisitTarget",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        }
      ],
      visible: true
    }
  ]);
  // 表格列
  const tableColumns = ref([])
  // 右上角工具选择列
  const chooseColumns = ref([])
  // 计算列具体数据
  const updateColumns = (operation) => {
    return new Promise((resolve, reject) => {
      if (operation === '平铺模式') {
        chooseColumns.value = baseColumns.value
        tableColumns.value = baseColumns.value.flatMap(item => {
          if (item.children) {
            return item.children.filter(child => !child.onlyFill);
          }
          return [];
        });
      } else if (operation === '填报模式') {
        chooseColumns.value = baseColumns.value.flatMap(item => {
          if (item.children) {
            return item.children.filter(child => child.fill === true)
          }
          return [];
        });

        tableColumns.value = chooseColumns.value
      }
      resolve()
    })
  }

  onMounted(() => {
    updateColumns()
  })

  // 树形结构选择列默认有哪些
  const visibleProps = computed(() => {
    return baseColumns.value.flatMap(item => {
      if (item.children) {
        return item.children.filter(child => child.visible).map(child => child.prop);
      }
      return item.prop;
    });
  });

  // 提交变更
  const submitChange = async (row, col) => {
    // 需要特殊处理的
    // 1. 实际主货架-形式，为空时，置空实际主货架-数量
    if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
      row.actualMainShelfQty = 0
    }

    // 关联的公式计算列，需要特殊处理
    for (const str of col.requestKey) {
      const obj = tableColumns.value.find(item => item.prop === str)
      console.log('obj', obj)
      if (obj.type === 'formula') {
        obj.func(row)
      }
    }

    await submitDisplayPlan({
      id: row.sadId,
      [col.prop]: row[col.prop], // 当前修改列的值
      ...col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {}), // 额外携带影响的列字段值
    })
    // // 这些提交变化的，同时会影响公式计算的，需要把公式计算的字段列结果，一起发给后台
    // // 注意：实际主货架形式改变并为空时，要置空实际主货架数量
    // if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
    //   row.actualMainShelfQty = ''
    //   // 并提交保存一次
    //   await submitDisplayPlan({
    //     id: row.sadId,
    //     actualMainShelfQty: row.actualMainShelfQty,
    //   })
    // }

    // // 主货架
    // if (['actualMainShelfType', 'actualMainShelfQty'].includes(col.prop)) {
    //   await submitDisplayPlan({
    //     id: row.sadId,
    //     actualMainShelfExecuted: row.actualMainShelfExecuted,
    //   })
    // }
    // // 端架
    // if (['actualEndCapQty'].includes(col.prop)) {
    //   await submitDisplayPlan({
    //     id: row.sadId,
    //     actualEndCapExecuted: row.actualEndCapExecuted,
    //   })
    // }
    // // 地堆
    // if (['actualFloorStackArea', 'actualFloorStackQty'].includes(col.prop)) {
    //   await submitDisplayPlan({
    //     id: row.sadId,
    //     actualFloorStackExecuted: row.actualFloorStackExecuted,
    //   })
    // }
    // // 常规陈列是否执行
    // await submitDisplayPlan({
    //   id: row.sadId,
    //   regularDisplayExecuted: row.regularDisplayExecuted,
    // })
  }

  // 表格数据
  const tableData = ref([])
  const isLoading = ref(true)
  const params = reactive({
    pageNum: 1,
    pageSize: 20,
  })
  const total = ref(0)

  // 筛选工具
  const getTableList = async () => {
    isLoading.value = true
    const res = await getDisplayScheduleDetail({
      ...params
    })
    res.data.rows.forEach(item => {
      // 计划月份
      item.promotionExecutionMonth = parseTime(item.promotionExecutionMonth, '{y}-{m}-{d}')
      // 开户日期
      item.openingDate = parseTime(item.openingDate, '{y}-{m}-{d}')
      // 闭户日期
      item.closingDate = parseTime(item.closingDate, '{y}-{m}-{d}')
      // 计划 - 档期开始时间
      item.plannedPromotionStartDate = parseTime(item.plannedPromotionStartDate, '{y}-{m}-{d}')
      // 计划 - 补差开始时间
      item.plannedAdjustmentStartDate = parseTime(item.plannedAdjustmentStartDate, '{y}-{m}-{d}')
      // 计划 - 档期结束时间
      item.plannedPromotionEndDate = parseTime(item.plannedPromotionEndDate, '{y}-{m}-{d}')
      // 计划 - 补差结束时间
      item.plannedAdjustmentEndDate = parseTime(item.plannedAdjustmentEndDate, '{y}-{m}-{d}')
      // 计划 - 档期陈列开始时间
      item.plannedPromotionDisplayStartDate = parseTime(item.plannedPromotionDisplayStartDate, '{y}-{m}-{d}')
      // 计划 - 档期陈列结束时间
      item.plannedPromotionDisplayEndDate = parseTime(item.plannedPromotionDisplayEndDate, '{y}-{m}-{d}')
    })
    tableData.value = res.data.rows
    total.value = res.data.total
    isLoading.value = false
  }
  getTableList()
</script>

<style scoped
  lang="scss">
  .container {

    .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column-reverse;

      .el-tabs__content {
        display: flex;
        flex-direction: column;
        height: 100%;

        .el-tab-pane {
          height: 100%;
          display: flex;
          flex-direction: column;

          .pagination-container {
            margin: 10px;
          }
        }

        .formula-column {
          display: flex;
          justify-content: center;
          align-items: center;

          .el-icon {
            margin-left: 2px;
          }
        }
      }
    }

    .el-form-item {
      align-items: center;
    }

    /* 表格区域 */
    .auto-fit-header-table {

      /* 优化超长文本的显示效果 */
      .cell {
        /* padding: 0 .2133rem; */
      }

      ::v-deep(.el-table__row) {
        .el-table__cell {
          padding: 0;
        }
      }


      ::v-deep(.column-style) {

        .cell-style {
          margin: 0 -12px;


          >div {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            >span {
              text-align: left;
              text-indent: 5px;
              display: inline-block;
              width: 100%;
              background-color: #e1e2e6;
              border-bottom: 1px solid #ebeef5;
            }
          }

          /* 表格内下拉框 */
          .el-select {
            width: 100% !important;
            padding: 10px;
          }

          .el-input {
            padding: 10px;
          }
        }
      }

    }
  }
</style>