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

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

  // 是否启用填报模式
  const showFill = userStore().hasQcMarketEmpInfo

  /*************** 操作类型 ***************/
  // 全部列
  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: false, // 是否为填报列
          width: 100
        },
        {
          "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": "端架数量",
          "subLabel": '计划',
          "prop": "plannedEndCapQty",
          "visible": true,
          "type": "string",
          "fill": true,
          "width": 140
        },
        // {
        //   "label": "计划端架 - 费用",
        //   "prop": "plannedEndCapTotalCost",
        //   "visible": true,
        //   "type": "string",
        //   "fill": false,
        //   "width": 140
        // },
        {
          "label": "端架数量",
          "subLabel": '实际',
          "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) => {
                    if (!value) {
                      value = 0;
                    }
                    row[col.prop] = value;
                    submitChange(row, col);
                  }}
                  disabled={!row[col.referenceKey]}
                  class={{'no-disabled': row[col.referenceKey]}}
                  placeholder=""
                  clearable>
                  {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": "端架是否",
          "subLabel": '按计划执行',
          "prop": "actualEndCapExecuted",
          "visible": true,
          "type": "formula",
          "fill": true,
          "width": 140,
          func: (row) => {
            // 如果计划端架数量为空则返回 '-'
            if (!row.plannedEndCapQty) {
              row.actualEndCapExecuted = '-'
              return '-';
            }
            row.actualEndCapExecuted = row.actualEndCapQty >= row.plannedEndCapQty ? '执行' : '未执行'
            return row.actualEndCapExecuted
          },
          formulaStr: "执行端架数量 >= 计划端架数量"
        },
        {
          "label": "地堆平米数（㎡）",
          "subLabel": '计划',
          "prop": "plannedFloorStackArea",
          "visible": true,
          "type": "string",
          "fill": true,
          "width": 140
        },
        
        // {
        //   "label": "计划地堆 - 费用",
        //   "prop": "plannedFloorStackTotalCost",
        //   "visible": true,
        //   "type": "string",
        //   "fill": false,
        //   "width": 140
        // },
        {
          "label": "地堆平米数（㎡）",
          "subLabel": '实际',
          "prop": "actualFloorStackArea",
          "visible": true,
          "type": "input",
          "fill": true,
          "width": 140,
          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
          //   },
          //   {
          //     "label": "6",
          //     "value": 6
          //   }
          // ],
          render: (_, row, col) => {
            return (
              <div>
                {/* <span>{row[col.referenceKey] || '-'}</span> */}
                <el-input modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    // 判断空字符串给 0
                   const numValue = value === '' ? 0 : Number(value);
                    row[col.prop] = numValue;
                    submitChange(row, col);
                  }}
                  min="0"
                  disabled={!row[col.referenceKey]}
                  class={{'no-disabled': row[col.referenceKey]}}
                  type="number"
                  placeholder=""
                  clearable>
                </el-input>
              </div>
            )
          },
          requestKey: ["actualFloorStackExecuted", "promotionDisplayExecuted"]
        },
        {
          "label": "地堆数量",
          "subLabel": '计划',
          "prop": "plannedFloorStackQty",
          "visible": true,
          "type": "string",
          "fill": true,
          "width": 140
        },
        {
          "label": "地堆数量",
          "subLabel": '实际',
          "prop": "actualFloorStackQty",
          "visible": true,
          "type": "input",
          "fill": true,
          "width": 140,
          referenceKey: "plannedFloorStackQty",
          // "options": [
          //   {
          //     "label": "0",
          //     "value": 0
          //   },
          //   {
          //     "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-input modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    const numValue = value === '' ? 0 : Number(value);
                    row[col.prop] = numValue;
                    submitChange(row, col);
                  }}
                  disabled={!row[col.referenceKey]}
                  class={{'no-disabled': row[col.referenceKey]}}
                  min="0"
                  type="number"
                  placeholder=""
                  clearable>
                </el-input>
              </div>
            )
          },
          requestKey: ["actualFloorStackExecuted", "promotionDisplayExecuted"]
        },
        {
          "label": "地堆是否",
          "subLabel": '按计划执行',
          "prop": "actualFloorStackExecuted",
          "visible": true,
          "type": "formula",
          "fill": true,
          "width": 140,
          func: (row) => {
            // 如果计划端架数量为空则返回 '-'
            if (!row.plannedFloorStackArea || !row.plannedFloorStackQty) {
              row.actualFloorStackExecuted = '-'
              return '-';
            }
            row.actualFloorStackExecuted = row.actualFloorStackArea >= row.plannedFloorStackArea && row.actualFloorStackQty >= row.plannedFloorStackQty ? '执行' : '未执行'
            return row.actualFloorStackExecuted
          },
          formulaStr: "执行平米数 >= 计划平米数，并且 执行地堆数量 >= 计划地堆数量"
        },
        {
          "label": "其他陈列数量+形式",
          "subLabel": '计划',
          "prop": "plannedOtherDisplay",
          "visible": true,
          "type": "string",
          "fill": true,
          "width": 140
        },
        // {
        //   "label": "计划其他陈列 - 总费用",
        //   "prop": "plannedOtherDisplayTotalCost",
        //   "visible": true,
        //   "type": "string",
        //   "fill": false,
        //   "width": 160
        // },
        {
          "label": "其他陈列数量+形式",
          "subLabel": '实际',
          "prop": "actualOtherDisplay",
          "visible": true,
          "type": "select",
          "options": [
            { label: '执行与计划一致', value: '执行与计划一致' },
            { label: '执行与计划不一致', value: '执行与计划不一致' }
          ],
          "fill": true,
          "width": 190,
          referenceKey: "plannedOtherDisplay",
          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]}
                  class={{'no-disabled': row[col.referenceKey]}}
                  placeholder=""
                  clearable
                >
                  {col.options.map(item => (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    />
                  ))}
                </el-select>
              </div>
            )
          },
          requestKey: ["actualOtherDisplayExecuted", "promotionDisplayExecuted"]
        },
        {
          "label": "其他陈列是否",
          "subLabel": '按计划执行',
          "prop": "actualOtherDisplayExecuted",
          "visible": true,
          "type": "formula",
          "fill": true,
          "width": 140,
          func: (row) => {
            if (!row.plannedOtherDisplay) {
              row.actualOtherDisplayExecuted = '-'
              return '-';
            }
            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) => {
        //     // 实际端架-是否执行 && 实际地堆是否执行 && 实际其他陈列-是否执行
        //     const executionStatuses = [
        //       row.actualEndCapExecuted,
        //       row.actualFloorStackExecuted,
        //       row.actualOtherDisplayExecuted
        //     ].filter(status => status !== '-');

        //     // 如果所有过滤后的状态都是'是'，则返回'是'，否则返回'否'
        //     row.promotionDisplayExecuted = executionStatuses.every(status => status === '是') ? '执行' : '未执行';
        //     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)
      if (obj && 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>