<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 { getDisplayList, submitDisplayPlan } 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: 100
        },
        {
          label: "销售战区",
          prop: "districtName",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "经销商-省份",
          prop: "dealerProvince",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "经销商-城市",
          prop: "dealerCity",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "经销商-代码",
          prop: "dealerCode",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "经销商-类型",
          showOverflowTooltip: true,
          prop: "dealerType",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "开户日期",
          prop: "openingDate",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "闭户日期",
          prop: "closingDate",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "大区总监",
          prop: "regionManager",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "战区经理",
          prop: "districtManager",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "城市经理",
          prop: "cityManager",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        // {
        //   label: "门店名称",
        //   prop: "storeNameCodeDealerName", //新增动态列（只在填报列显示）
        //   visible: true,
        //   type: 'string',
        //   fill: true,
        //   // showOverflowTooltip: true,
        //   onlyFill: true,// 仅仅在填报模式下生效
        //   fixed: 'left',
        //   width: 225,
        //   render: (h, row) => {
        //     return h('div', {
        //       class: 'store-name-render-cell'
        //     }, [
        //       h('p', row.storeName),
        //       h('p', row.storeCode),
        //       h('p', row.dealerName)
        //     ])
        //   }
        // },
        {
          label: "门店名称",
          prop: "storeName",
          showOverflowTooltip: true,
          visible: true,
          type: 'string',
          fill: true,
          fixed: 'left',
          width: 220
        },
        {
          label: "门店编码",
          prop: "storeCode",
          showOverflowTooltip: true,
          visible: true,
          type: 'string',
          fill: true,
          width: 110
        },
        {
          label: "经销商名称",
          prop: "dealerName",
          showOverflowTooltip: true,
          visible: true,
          type: 'string',
          fill: true,
          // fixed: 'left',
          width: 220
        },
        {
          label: "系统类型",
          prop: "lineType",
          visible: true,
          type: 'string',
          fill: false,
          fixed: 'left',
          width: 100
        },
        {
          label: "门店-省份",
          prop: "storeProvince",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "门店-城市",
          prop: "storeCity",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "系统名称",
          prop: "lineName",
          showOverflowTooltip: true,
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "渠道大类",
          prop: "channelDl",
          showOverflowTooltip: true,
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "渠道小类",
          prop: "channelXl",
          showOverflowTooltip: true,
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "门店类型",
          prop: "storeType",
          visible: true,
          type: 'string',
          showOverflowTooltip: true,
          fill: false,
          width: 100
        },
        {
          label: "系统业态",
          prop: "systemFormat",
          showOverflowTooltip: true,
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "门店面积",
          prop: "storeArea",
          showOverflowTooltip: true,
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "门店分级（销量坎级）",
          prop: "storeLevel",
          visible: true,
          showOverflowTooltip: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "门店地址",
          prop: "storeAddress",
          showOverflowTooltip: true,
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "品项数",
          prop: "productCount",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        }
      ],
      prop: 'baseColumns',
      visible: true
    },
    {
      label: "大业态测试",
      children: [
        {
          label: "大业态测试-动销模型",
          prop: "lfSalesModel",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: "大业态测试-月均POS",
          prop: "lfMonthlyPos",
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        }
      ],
      prop: 'lfColumns',
      visible: true
    },
    {
      label: "费用计划",
      prop: 'fpColumns',
      children: [
        {
          label: "主货架形式",
          subLabel: '计划',
          prop: "plannedMainShelfType",
          visible: true,
          type: 'string',
          fill: true,
          width: 130
        },

        {
          label: "主货架单个费用计划",
          prop: "plannedMainShelfUnitCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "主货架总费用计划",
          prop: "plannedMainShelfTotalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "主货架形式",
          subLabel: '实际',
          prop: "actualMainShelfType",
          visible: true,
          type: 'select',
          options: [
            { label: '3纵', value: '3纵' },
            { label: '4纵', value: '4纵' },
            { label: '5纵', value: '5纵' },
            { label: '6纵', value: '6纵' },
            { label: '7纵', value: '7纵' },
            { label: '8纵及以上', value: '8纵及以上' }
          ],
          referenceKey: "plannedMainShelfType",
          fill: true,
          width: 130,
          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: ["actualMainShelfQty", "actualMainShelfExecuted", "regularDisplayExecuted"]
        },
        {
          label: "主货架数量",
          subLabel: '计划',
          prop: "plannedMainShelfQty",
          visible: true,
          type: 'string',
          fill: true,
          width: 130
        },
        {
          label: "主货架数量",
          subLabel: '实际',
          prop: "actualMainShelfQty",
          visible: true,
          type: 'input',
          // options: [
          //   { label: '0', value: 0 },
          //   { label: '1', value: 1 },
          //   { label: '2', value: 2 }
          // ],
          referenceKey: "plannedMainShelfQty",
          fill: true,
          width: 130,
          render: (_, row, col) => {
            return (
              <div>
                {/* <span>{row[col.referenceKey] || '-'}</span> */}
                <el-input modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    {/* 限制只能输入数字 */ }
                    if (!/^\d*$/.test(value)) {
                      return;
                    }
                    const numValue = value === '' ? 0 : Number(value);
                    row[col.prop] = numValue;
                    submitChange(row, col);
                  }}
                  placeholder=""
                  disabled={!row[col.referenceKey]}
                  class={{ 'no-disabled': row[col.referenceKey] }}
                  clearable>
                </el-input>
              </div>
            )
          },
          requestKey: ["actualMainShelfExecuted", "regularDisplayExecuted"]
        },
        {
          label: "主货架是否",
          subLabel: '按计划执行',
          prop: "actualMainShelfExecuted",
          visible: true,
          type: 'formula',
          func: (row) => {
            // 如果参考值是空则返回 '-'
            if (!row.plannedMainShelfType || !row.plannedMainShelfQty) {
              row.actualMainShelfExecuted = '-'
              return '-';
            }
            // 未执行情况（实际主货架形式 < 计划主货架形式）
            if (parseInt(row.actualMainShelfType) < parseInt(row.plannedMainShelfType)) {
              row.actualMainShelfExecuted = '未执行'
            } else if (!row.actualMainShelfQty) {
              row.actualMainShelfExecuted = '未执行'
            } else if (parseInt(row.actualMainShelfQty) < parseInt(row.plannedMainShelfQty)) {
              // 实际主货架数量 < 计划主货架数量
              row.actualMainShelfExecuted = '部分执行'
            } else {
              // 实际主货架数量 >= 计划主货架数量
              row.actualMainShelfExecuted = '执行'
            }
            return row.actualMainShelfExecuted;
          },
          formulaStr: '公式：（实际主货架形式 >= 计划主货架形式）并且（实际主货架数量 >= 计划主货架数量）',
          fill: true,
          width: 130
        },
        {
          label: "端架数量",
          subLabel: '计划',
          prop: "plannedEndCapQty",
          visible: true,
          type: 'string',
          fill: true,
          width: 130
        },
        {
          label: "端架总费用计划",
          prop: "plannedEndCapTotalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "端架单个费用计划",
          prop: "plannedEndCapUnitCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "端架数量",
          subLabel: '实际',
          prop: "actualEndCapQty",
          visible: true,
          type: 'select',
          options: [
            { label: '0', value: 0 },
            { label: '0.5', value: 0.5 },
            { label: '1', value: 1 },
            { label: '2', value: 2 }
          ],
          referenceKey: "plannedEndCapQty",
          fill: true,
          width: 130,
          render: (_, row, col) => {
            return (
              <div>
                {/* <span>{row[col.referenceKey] || '-'}</span> */}
                <el-select modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    // 判断空字符串给 0
                    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>
            )
          },
          // 请求时需要额外携带影响的列字段值
          requestKey: ["actualEndCapExecuted", "regularDisplayExecuted"]
        },
        {
          label: "端架是否",
          subLabel: '按计划执行',
          prop: "actualEndCapExecuted",
          visible: true,
          type: 'formula',
          func: (row) => {
            // 如果参考值是空则返回 '-'
            if (!row.plannedEndCapQty) {
              row.actualEndCapExecuted = '-'
              return '-';
            }
            row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '执行' : '未执行';
            return row.actualEndCapExecuted;
          },
          formulaStr: '公式：（实际端架数量 >= 计划端架数量）',
          fill: true,
          width: 130
        },
        {
          label: "地堆平米数（㎡）",
          subLabel: '计划',
          prop: "plannedFloorStackArea",
          visible: true,
          type: 'string',
          fill: true,
          width: 130
        },

        {
          label: "主题地堆是否计划",
          prop: "plannedThemedFloorStack",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "地堆总费用计划",
          prop: "plannedFloorStackTotalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "折算1㎡单个费用计划",
          prop: "plannedFloorStackUnitCostPerSqm",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "地堆平米数（㎡）",
          subLabel: '实际',
          prop: "actualFloorStackArea",
          visible: true,
          type: 'select',
          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: '5', value: 5 },
            { label: '6', value: 6 },
          ],
          referenceKey: "plannedFloorStackArea",
          fill: true,
          width: 130,
          render: (_, row, col) => {
            return (
              <div>
                {/* <span>{row[col.referenceKey] || '-'}</span> */}
                <el-select modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    // 判断空字符串给 0
                    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>
            )
          },
          // 请求时需要额外携带影响的列字段值
          requestKey: ["actualFloorStackExecuted", "regularDisplayExecuted"]
        },
        {
          label: "地堆数量",
          subLabel: '计划',
          prop: "plannedFloorStackQty",
          visible: true,
          type: 'string',
          fill: true,
          width: 130
        },
        {
          label: "地堆数量",
          subLabel: '实际',
          prop: "actualFloorStackQty",
          visible: true,
          type: 'select',
          options: [
            { label: '0', value: 0 },
            { label: '1', value: 1 },
            { label: '2', value: 2 },
            { label: '3', value: 3 },
            { label: '4', value: 4 }
          ],
          referenceKey: "plannedFloorStackQty",
          fill: true,
          width: 130,
          render: (_, row, col) => {
            return (
              <div>
                {/* <span>{row[col.referenceKey] || '-'}</span> */}
                <el-select modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    // 判断空字符串给 0
                    if (!value) {
                      value = 0
                    }
                    row[col.prop] = value;
                    submitChange(row, col);
                  }}
                  disabled={!row.actualFloorStackArea || !row[col.referenceKey]}
                  class={{ 'no-disabled': row.actualFloorStackArea && row[col.referenceKey] }}
                  placeholder=""
                  clearable>
                  {col.options.map(item => (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    />
                  ))}
                </el-select>
              </div>
            )
          },
          // 请求时需要额外携带影响的列字段值
          requestKey: ["actualFloorStackExecuted", "regularDisplayExecuted"]
        },
        {
          label: "主题地堆是否实际",
          prop: "actualThemedFloorStack",
          referenceKey: "plannedThemedFloorStack",
          visible: true,
          type: 'select',
          options: [
            { label: '是', value: '是' },
            { label: '否', value: '否' }
          ],
          fill: false,
          width: 130,
          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>
            )
          }
        },
        {
          label: "地堆是否",
          subLabel: '按计划执行',
          prop: "actualFloorStackExecuted",
          visible: true,
          type: 'formula',
          func: (row) => {
            // 如果参考值是空则返回 '-'
            if (!row.plannedFloorStackArea || !row.plannedFloorStackQty) {
              row.actualFloorStackExecuted = '-'
              return '-';
            }
            row.actualFloorStackExecuted = ((parseFloat(row.actualFloorStackArea) >= parseFloat(row.plannedFloorStackArea)) && (parseInt(row.actualFloorStackQty) >= parseInt(row.plannedFloorStackQty))) ? '执行' : '未执行';
            return row.actualFloorStackExecuted;
          },
          formulaStr: '公式：（实际地堆平米数 >= 计划地堆平米数）并且（实际地堆数量 >= 计划地堆数量）',
          fill: true,
          width: 130
        },
        {
          label: "多点陈列数量形式",
          subLabel: '计划',
          prop: "plannedMultiDisplay",
          visible: true,
          type: 'string',
          fill: true,
          width: 130
        },
        {
          label: "多点陈列总费用计划",
          prop: "plannedMultiDisplayTotalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "多点陈列数量形式",
          subLabel: '实际',
          prop: "actualMultiDisplay",
          visible: true,
          type: 'select',
          options: [
            { label: '执行与计划一致', value: '执行与计划一致' },
            { label: '执行与计划不一致', value: '执行与计划不一致' }
          ],
          referenceKey: "plannedMultiDisplay",
          fill: true,
          width: 130,
          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: ["actualMultiDisplayExecuted"]
        },
        {
          label: "多点陈列是否",
          subLabel: '按计划执行',
          prop: "actualMultiDisplayExecuted",
          referenceKey: 'actualMultiDisplay',
          visible: true,
          type: 'formula',
          func: (row) => {
            // 如果参考值是空则返回 '-'
            if (!row.plannedMultiDisplay) {
              row.actualMultiDisplayExecuted = '-'
              return '-';
            }
            row.actualMultiDisplayExecuted = row.actualMultiDisplay === '执行与计划一致' ? '执行' : '未执行';
            return row.actualMultiDisplayExecuted;
          },
          formulaStr: '公式：实际与计划是否一致',
          fill: true,
          width: 140,
        },
        {
          label: "挂条数量形式",
          subLabel: '计划',
          prop: "plannedHangingStripQuantityForm",
          visible: true,
          type: 'string',
          fill: true,
          width: 130
        },
        {
          label: "挂条数量形式",
          subLabel: '实际',
          prop: "actualHangingStripQuantityForm",
          visible: true,
          type: 'select',
          options: [
            { label: '执行与计划一致', value: '执行与计划一致' },
            { label: '执行与计划不一致', value: '执行与计划不一致' }
          ],
          referenceKey: "plannedHangingStripQuantityForm",
          fill: true,
          width: 130,
          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: ["actualMultiDisplayExecuted"]
        },
        {
          label: "挂条是否",
          subLabel: '按计划执行',
          prop: "hangingStripExecuted",
          referenceKey: 'actualHangingStripQuantityForm',
          visible: true,
          type: 'formula',
          func: (row) => {
            // 如果参考值是空则返回 '-'
            if (!row.plannedHangingStripQuantityForm) {
              row.hangingStripExecuted = '-'
              return '-';
            }
            row.hangingStripExecuted = (row.actualHangingStripQuantityForm === '执行与计划一致') ? '执行' : '未执行';
            return row.hangingStripExecuted;
          },
          formulaStr: '公式：实际与计划是否一致',
          fill: true,
          width: 130,
        },
        {
          label: "合计费用-费用",
          prop: "totalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "合计费用-费率",
          prop: "totalCostRate",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        // {
        //   label: "常规陈列是否执行",
        //   prop: "regularDisplayExecuted",
        //   visible: true,
        //   type: 'formula',
        //   func: (row) => {
        //     // 实际主货架-执行 && 实际端架-执行 && 实际地堆-执行 && 实际多点陈列-执行
        //     // 过滤掉值为"-"的项，只对有实际值的项进行判断
        //     const executionStatuses = [
        //       row.actualMainShelfExecuted,
        //       row.actualEndCapExecuted,
        //       row.actualFloorStackExecuted,
        //       row.actualMultiDisplayExecuted
        //     ].filter(status => status !== '-');

        //     // 如果所有过滤后的状态都是'是'，则返回'执行'，否则返回'未执行'
        //     row.regularDisplayExecuted = executionStatuses.every(status => status === '是') ? '执行' : '未执行';
        //     return row.regularDisplayExecuted;
        //   },
        //   formulaStr: '公式：实际主货架执行，并且实际端架执行，并且实际地堆执行，并且实际多点陈列执行（某项无计划时，忽略该项）',
        //   fill: true,
        //   width: 150
        // },
        // {
        //   label: "综合标签-拜访辅助列",
        //   prop: "visitAssistTag",
        //   visible: true,
        //   type: 'string',
        //   fill: false,
        //   width: 160
        // },
        {
          label: "付费陈列-是否",
          prop: "paidDisplay",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "当月拜访目标计划",
          prop: "monthlyVisitTarget",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "当月是否拜访实际",
          prop: "monthlyVisited",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: '修改人',
          prop: 'updateBy',
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        },
        {
          label: '修改时间',
          prop: 'updateTime',
          visible: true,
          type: 'string',
          fill: false,
          width: 100
        }
      ],
      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) => {
    // 需要特殊处理的
    // 实际主货架-形式，为空时，置空实际主货架-数量
    if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
      row.actualMainShelfQty = 0
    }

    let requestObj = {}
    if (col.requestKey) {
      // 关联的公式计算列，需要特殊处理
      for (const str of col.requestKey) {
        const obj = tableColumns.value.find(item => item.prop === str)
        if (obj && obj.type === 'formula') {
          obj.func(row)
        }
      }
      requestObj = col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {})
    }

    await submitDisplayPlan({
      id: row.sadId,
      [col.prop]: row[col.prop], // 当前修改列的值
      ...requestObj
    })

  }

  // 表格数据
  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 getDisplayList({
      ...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.updateTime = parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}:{s}')

      // 动态新增列：门店名称+门店编码+经销山名称（填报模式下，合并到一起）
      item.storeNameCodeDealerName = item.storeName + '\n(' + item.storeCode + ')' + '\n(' + item.dealerName + ')'
    })
    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;

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

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

    }
  }
</style>

<style lang="scss">
// 动态列内容的 render 内样式
// 操作提示列
.operation_tip_cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  p {
    width: 100%;
    margin: 0;
  }

  p:first-child {
    background-color: #e1e2e6;
    border-bottom: 1px solid #ebeef5;
  }

  p:last-child {
    padding: 15px 0;
  }
}

// 只在填报模式出现的门店名称+门店编码+经销山名称（合并到一起）
.store-name-render-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  p {
    width: 100%;
    margin: 0;
  }
}
</style>