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

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

  /*************** 操作类型 ***************/
  // 全部列
  const baseColumns = ref([
    // 一级类
    {
      label: "基础信息", // 类型标题
      children: [
        {
          label: '操作提示',
          prop: 'operationTip', // 列属性
          visible: true, // 是否显示
          type: 'string', // 列类型
          fill: true, // 是否为填报列
          fixed: 'left', // 是否固定在左侧
          width: 100,
          onlyFill: true, // 只在填报列显示
          render: (_, row, col) => {
            return (
              <div class="operation_tip_cell">
                <p>计划</p>
                <p>实际</p>
              </div>
            )
          }
        },
        {
          label: '计划月份', // 列标题
          prop: 'salesMonth', // 列属性
          visible: true, // 是否显示
          type: 'string', // 列类型
          fill: true, // 是否为填报列
          fixed: 'left', // 是否固定在左侧
          width: 90
        },
        {
          "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": true,
          "width": 200,
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          "label": "经销商类型",
          "prop": "dealerType",
          showOverflowTooltip: true,
          "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": true,
          "width": 100,
          fixed: 'left'
        },
        {
          "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",
          showOverflowTooltip: true,
          "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",
          showOverflowTooltip: true,
          "fill": false,
          "width": 120
        },
        {
          "label": "门店名称",
          "prop": "storeName",
          "visible": true,
          "type": "string",
          showOverflowTooltip: true,
          "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",
          showOverflowTooltip: true,
          "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": "select",
          referenceKey: "plannedEndCapQty",
          "options": [
            {
              "label": "0",
              "value": 0
            },
            {
              "label": "0.5",
              "value": 0.5
            },
            {
              "label": "1",
              "value": 1
            },
            {
              "label": "2",
              "value": 2
            }
          ],
          render: (_, row, col) => {
            return (
              <div>
                <span>{row[col.referenceKey] || '-'}</span>
                <el-select modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    row[col.prop] = value;
                    submitChange(row, col);
                  }}
                  disabled={!row[col.referenceKey]}
                  placeholder="">
                  {col.options.map(item => (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    />
                  ))}
                </el-select>
              </div>
            )
          },
          "fill": true,
          "width": 140,
          requestKey: ["actualEndCapExecuted", "promotionDisplayExecuted"]
        },
        {
          "label": "实际端架 - 是否执行",
          "prop": "actualEndCapExecuted",
          "visible": true,
          "type": "formula",
          "fill": true,
          "width": 160,
          func: (row) => {
            row.actualEndCapExecuted = row.actualEndCapQty >= row.plannedEndCapQty ? '是' : '否'
            return row.actualEndCapExecuted
          },
          formulaStr: "执行端架数量 >= 计划端架数量"
        },
        {
          "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": "select",
          "fill": true,
          "width": 180,
          referenceKey: "plannedFloorStackArea",
          "options": [
            {
              "label": "0",
              "value": 0
            },
            {
              "label": "0.5",
              "value": 0.5
            },
            {
              "label": "0.8",
              "value": 0.8
            },
            {
              "label": "1",
              "value": 1
            },
            {
              "label": "2",
              "value": 2
            },
            {
              "label": "3",
              "value": 3
            },
            {
              "label": "4",
              "value": 4
            }
          ],
          render: (_, row, col) => {
            return (
              <div>
                <span>{row[col.referenceKey] || '-'}</span>
                <el-select modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    row[col.prop] = value;
                    submitChange(row, col);
                  }}
                  disabled={!row[col.referenceKey]}
                  placeholder="">
                  {col.options.map(item => (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    />
                  ))}
                </el-select>
              </div>
            )
          },
          requestKey: ["actualFloorStackExecuted", "promotionDisplayExecuted"]
        },
        {
          "label": "实际地堆 - 数量",
          "prop": "actualFloorStackQty",
          "visible": true,
          "type": "select",
          "fill": true,
          "width": 140,
          referenceKey: "plannedFloorStackQty",
          "options": [
            {
              "label": "0",
              "value": 0
            },
            {
              "label": "1",
              "value": 1
            },
            {
              "label": "2",
              "value": 2
            },
            {
              "label": "3",
              "value": 3
            }
          ],
          render: (_, row, col) => {
            return (
              <div>
                <span>{row[col.referenceKey] || '-'}</span>
                <el-select modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    row[col.prop] = value;
                    submitChange(row, col);
                  }}
                  disabled={!row[col.referenceKey]}
                  placeholder="">
                  {col.options.map(item => (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    />
                  ))}
                </el-select>
              </div>
            )
          },
          requestKey: ["actualFloorStackExecuted", "promotionDisplayExecuted"]
        },
        {
          "label": "实际地堆是否执行",
          "prop": "actualFloorStackExecuted",
          "visible": true,
          "type": "formula",
          "fill": true,
          "width": 150,
          func: (row) => {
            row.actualFloorStackExecuted = row.actualFloorStackArea >= row.plannedFloorStackArea && row.actualFloorStackQty >= row.plannedFloorStackQty ? '是' : '否'
            return row.actualFloorStackExecuted
          },
          formulaStr: "执行平米数 >= 计划平米数，并且 执行地堆数量 >= 计划地堆数量"
        },
        {
          "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": "input",
          "fill": true,
          "width": 190,
          referenceKey: "plannedOtherDisplay",
          render: (_, row, col) => {
            return (
              <div>
                <span>{row[col.referenceKey] || '-'}</span>
                <div>
                  <el-input modelValue={row[col.prop]}
                    onUpdate:modelValue={(value) => {
                      row[col.prop] = value;
                      submitChange(row, col);
                    }}
                    disabled={!row[col.referenceKey]}
                    placeholder=""
                    clearable
                  />
                </div>
              </div>
            )
          },
          requestKey: ["actualOtherDisplayExecuted", "promotionDisplayExecuted"]
        },
        {
          "label": "实际其他陈列 - 是否执行",
          "prop": "actualOtherDisplayExecuted",
          "visible": true,
          "type": "formula",
          "fill": true,
          "width": 190,
          func: (row) => {
            row.actualOtherDisplayExecuted = !row.actualOtherDisplay ? '否' : '是'
            return row.actualOtherDisplayExecuted
          },
          formulaStr: "执行其他陈列数量 + 形式，是否等于计划其他陈列数量 + 形式"
        },
        {
          "label": "合计费用 - 费用",
          "prop": "totalCost",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 140
        },
        {
          "label": "档期陈列是否执行",
          "prop": "promotionDisplayExecuted",
          "visible": true,
          "type": "formula",
          "fill": true,
          "width": 160,
          func: (row) => {
            // 实际端架-是否执行 && 实际地堆是否执行 && 实际其他陈列-是否执行
            row.promotionDisplayExecuted = row.actualEndShelfExecuted === '是' && row.actualFloorStackExecuted === '是' && row.actualOtherDisplayExecuted === '是' ? '是' : '否'
            return row.promotionDisplayExecuted
          },
          formulaStr: "实际端架-是否执行 === '是'，并且 实际地堆是否执行 === '是'，并且 实际其他陈列-是否执行 === '是'"
        },
        {
          "label": "付费陈列 - 是否",
          "prop": "paidDisplay",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 120
        },
        {
          "label": "当月拜访目标 - 是否",
          "prop": "monthlyVisitTarget",
          "visible": true,
          "type": "string",
          "fill": false,
          "width": 160
        },
        {
          label: '修改人',
          prop: 'updateBy',
          visible: true,
          type: 'string',
          fill: false,
          width: 120
        },
        {
          label: '修改时间',
          prop: 'updateTime',
          visible: true,
          type: 'string',
          fill: false,
          width: 180
        }
      ],
      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 submitDisplayScheduleDetail({
      id: row.sapdId,
      [col.prop]: row[col.prop], // 当前修改列的值
      ...col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {}), // 额外携带影响的列字段值
    })
  }

  // 表格数据
  const tableData = ref([])
  const isLoading = ref(true)
  let 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.salesMonth = parseTime(item.salesMonth, '{y}-{m}')
      // 开户日期
      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}')
      // 修改时间
      item.updateTime = parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}:{s}')
    })
    tableData.value = res.data.rows
    total.value = res.data.total
    isLoading.value = false
  }
  getTableList()

  const showSearch = ref(true)
  const updateShowSearch = (newVal) => {
    showSearch.value = newVal
  }

  const searchChange = (newVal) => {
    // 计划月份
    if (newVal.salesMonth) {
      newVal.salesMonth = parseTime(newVal.salesMonth, '{y}-{m}-{d}')
    }
    params = { ...params, ...newVal }
    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>