<template>
  <div class="app-container">
    <div class="container">
      <el-row>
        <el-form-item label="操作类型">
          <el-radio-group v-model="operation"
            @change="checkTableColumns">
            <el-radio-button label="全部列"
              value="全部列" />
            <el-radio-button label="填报列"
              value="填报列" />
          </el-radio-group>
        </el-form-item>
        <right-toolbar v-model:showSearch="showSearch"
          @queryTable="getTableList()"
          :columns="chooseColumns"
          :showColumnsType="operation === '全部列' ? 'tree' : 'checkbox'"
          :defaultCheckedKeys="visibleProps">
        </right-toolbar>
      </el-row>
      <!-- 筛选列组的按钮 -->
      <el-table :data="tableData"
        border
        :scroll-x="'max-content'"
        class="auto-fit-header-table"
        fit
        :loading="isLoading">
        <el-table-column v-for="col in tableColumns"
          :label="col.label"
          align="center"
          :min-width="getColumnMinWidth(col)"
          show-overflow-tooltip>
          <template #default="{ row }">
            <div v-if="col.type === 'select'">
              <!-- 实际主货架-数量（要根据实际主货架-形式不为空时才可以选择否则为 0） -->
              <div v-if="col.prop === 'actualMainShelfQty'">
                <el-select :disabled="!row.actualMainShelfType"
                  v-model="row[col.prop]"
                  placeholder="请选择"
                  clearable>
                  <el-option v-for="item in col.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" />
                </el-select>
              </div>
              <el-select v-else
                v-model="row[col.prop]"
                placeholder="请选择"
                clearable>
                <el-option v-for="item in col.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
            <!-- 公式计算 -->
            <div v-else-if="col.type === 'formula'">
              {{ col.func(row) }}
            </div>
            <!-- 输入框 -->
            <div v-else-if="col.type === 'input'">
              <el-input v-model="row[col.prop]"
                placeholder="请输入"
                @input="col.func(row)" />
            </div>
            <!-- 为其他类型或未定义类型提供默认显示 -->
            <div v-else>
              {{ row[col.prop] || '-' }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { getDisplayList } from '@/api'
/*************** 操作类型 ***************/
const operation = ref('全部列');

// 全部列
const baseColumns = ref([
  {
    label: "基础信息",
    children: [{ label: "销售大区", prop: "regionName", visible: true, type: 'string' },
    { label: "销售战区", prop: "districtName", visible: true, type: 'string' },
    { label: "经销商-省份", prop: "dealerProvince", visible: true, type: 'string' },
    { label: "经销商-城市", prop: "dealerCity", visible: true, type: 'string' },
    { label: "经销商-代码", prop: "dealerCode", visible: true, type: 'string' },
    { label: "经销商名称", prop: "dealerName", visible: true, type: 'string' },
    { label: "经销商-类型", prop: "dealerType", visible: true, type: 'string' },
    { label: "开户日期", prop: "openingDate", visible: true, type: 'string' },
    { label: "闭户日期", prop: "closingDate", visible: true, type: 'string' },
    { label: "大区总监", prop: "regionManager", visible: true, type: 'string' },
    { label: "战区经理", prop: "districtManager", visible: true, type: 'string' },
    { label: "城市经理", prop: "cityManager", visible: true, type: 'string' },
    { label: "门店编码", prop: "storeCode", visible: true, type: 'string' },
    { label: "门店名称", prop: "storeName", visible: true, type: 'string' },
    { label: "门店-省份", prop: "storeProvince", visible: true, type: 'string' },
    { label: "门店-城市", prop: "storeCity", visible: true, type: 'string' },
    { label: "系统名称", prop: "lineName", visible: true, type: 'string' },
    { label: "系统类型", prop: "lineType", visible: true, type: 'string' },
    { label: "渠道大类", prop: "channelDl", visible: true, type: 'string' },
    { label: "渠道小类", prop: "channelXl", visible: true, type: 'string' },
    { label: "门店类型", prop: "storeType", visible: true, type: 'string' },
    { label: "系统业态", prop: "systemFormat", visible: true, type: 'string' },
    { label: "门店面积", prop: "storeArea", visible: true, type: 'string' },
    { label: "门店分级（销量坎级）", prop: "storeLevel", visible: true, type: 'string' },
    { label: "门店地址", prop: "storeAddress", visible: true, type: 'string' },
    { label: "品项数", prop: "productCount", visible: true, type: 'string' }],
    prop: 'baseColumns',
    visible: true
  },
  {
    label: "大业态测试",
    children: [
      { label: "大业态测试-动销模型", prop: "lfSalesModel", visible: true, type: 'string' },
      { label: "大业态测试-月均POS", prop: "lfMonthlyPos", visible: true, type: 'string' },
    ],
    prop: 'lfColumns',
    visible: true
  },
  {
    label: "费用计划",
    prop: 'fpColumns',
    children: [
      { label: "计划主货架-形式", prop: "plannedMainShelfType", visible: true, type: 'string' },
      { label: "计划主货架-数量", prop: "plannedMainShelfQty", visible: true, type: 'string' },
      { label: "计划主货架-单个费用", prop: "plannedMainShelfUnitCost", visible: true, type: 'string' },
      { label: "计划主货架-总费用", prop: "plannedMainShelfTotalCost", visible: true, type: 'string' },
      {
        label: "实际主货架-形式",
        prop: "actualMainShelfType",
        visible: true,
        type: 'select',
        options: [
          { label: '4纵', value: '4纵' },
          { label: '5纵', value: '5纵' },
          { label: '6纵', value: '6纵' },
          { label: '7纵', value: '7纵' },
          { label: '8纵及以上', value: '8纵及以上' }
        ]
      },
      {
        label: "实际主货架-数量",
        prop: "actualMainShelfQty",
        visible: true,
        type: 'select',
        options: [
          { label: '1', value: 1 },
          { label: '2', value: 2 }
        ]
      },
      {
        label: "实际主货架-是否执行",
        prop: "actualMainShelfExecuted",
        visible: true,
        type: 'formula', // 公式
        func: (row) => {
          row.actualMainShelfExecuted = ((parseInt(row.actualMainShelfType) >= parseInt(row.plannedMainShelfType)) && (parseInt(row.actualMainShelfQty) >= parseInt(row.plannedMainShelfQty))) ? '是' : '否';
          return row.actualMainShelfExecuted;
        }
      },
      { label: "计划端架-数量", prop: "plannedEndCapQty", visible: true },
      { label: "计划端架-总费用", prop: "plannedEndCapTotalCost", visible: true },
      { label: "计划端架-单个费用", prop: "plannedEndCapUnitCost", visible: true },
      {
        label: "实际端架-数量",
        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 }
        ]
      },
      {
        label: "实际端架-是否执行",
        prop: "actualEndCapExecuted",
        visible: true,
        type: 'formula', // 公式
        func: (row) => {
          row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '是' : '否';
          return row.actualEndCapExecuted;
        }
      },
      {
        label: "计划地堆-平米数（㎡）",
        prop: "plannedFloorStackArea",
        visible: true
      },
      { label: "计划地堆-数量", prop: "plannedFloorStackQty", visible: true },
      { label: "计划主题地堆-是否", prop: "plannedThemedFloorStack", visible: true },
      { label: "计划地堆-总费用", prop: "plannedFloorStackTotalCost", visible: true },
      { label: "计划折算1㎡-单个费用", prop: "plannedFloorStackUnitCostPerSqm", visible: true },
      {
        label: "实际地堆-平米数（㎡）",
        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: "实际地堆-数量",
        prop: "actualFloorStackQty",
        visible: true,
        type: 'select',
        options: [
          { label: '0', value: 0 },
          { label: '1', value: 1 },
          { label: '2', value: 2 },
          { label: '3', value: 3 }
        ]
      },
      {
        label: "实际主题地堆-是否",
        prop: "actualThemedFloorStack",
        visible: true,
        type: 'select',
        options: [
          { label: '是', value: '是' },
          { label: '否', value: '否' },
        ]
      },
      {
        label: "实际地堆是否执行",
        prop: "actualFloorStackExecuted",
        visible: true,
        type: 'formula', // 公式
        func: (row) => {
          row.actualFloorStackExecuted = ((parseFloat(row.actualFloorStackArea) >= parseFloat(row.plannedFloorStackArea)) && (parseInt(row.actualFloorStackQty) >= parseInt(row.plannedFloorStackQty))) ? '是' : '否';
          return row.actualFloorStackExecuted;
        }
      },
      { label: "计划多点陈列-数量+形式", prop: "plannedMultiDisplay", visible: true },
      { label: "计划多点陈列-总费用", prop: "plannedMultiDisplayTotalCost", visible: true },
      {
        label: "实际多点陈列-数量+形式",
        prop: "actualMultiDisplay",
        visible: true,
        type: 'input',
        func: (row) => {
          // 没有输入内容时，则是否执行设置为否
          row.actualMultiDisplayExecuted = !row.actualMultiDisplay ? '否' : '是'
        }
      },
      {
        label: "实际多点陈列-是否执行",
        prop: "actualMultiDisplayExecuted",
        visible: true,
        type: 'select',
        options: [
          { label: '是', value: '是' },
          { label: '否', value: '否' },
        ]
      },
      { label: "合计费用-费用", prop: "totalCost", visible: true },
      { label: "合计费用-费率", prop: "totalCostRate", visible: true },
      {
        label: "常规陈列是否执行",
        prop: "regularDisplayExecuted",
        visible: true,
        type: 'formula', // 公式
        func: (row) => {
          // 实际主货架-是否执行 && 实际端架-是否执行 && 实际地堆-是否执行 && 实际多点陈列-是否执行
          row.regularDisplayExecuted = (row.actualMainShelfExecuted === '是' && row.actualEndCapExecuted === '是' && row.actualFloorStackExecuted === '是' && row.actualMultiDisplayExecuted === '是') ? '是' : '否';
          return row.regularDisplayExecuted;
        }
      },
      { label: "综合标签-拜访辅助列", prop: "visitAssistTag", visible: true },
      { label: "付费陈列- 是否", prop: "paidDisplay", visible: true },
      { label: "当月拜访目标", prop: "monthlyVisitTarget", visible: true },
      { label: "当月是否拜访", prop: "monthlyVisited", visible: true }
    ],
    visible: true
  }
  // ...baseColumns.value,
  // ...lfColumns.value,
  // ...fpColumns.value
]);
// 填报列
const fillColumns = ref([
  { label: "经销商名称", prop: "dealerName", visible: true },
  { label: "门店编码", prop: "storeCode", visible: true },
  { label: "门店名称", prop: "storeName", visible: true },
  // 从fpColumns中提取的匹配对象
  {
    label: "实际主货架-形式",
    prop: "actualMainShelfType",
    visible: true,
    type: 'select',
    options: [
      { label: '4纵', value: '4纵' },
      { label: '5纵', value: '5纵' },
      { label: '6纵', value: '6纵' },
      { label: '7纵', value: '7纵' },
      { label: '8纵及以上', value: '8纵及以上' }
    ]
  },
  {
    label: "实际主货架-数量",
    prop: "actualMainShelfQty",
    visible: true,
    type: 'select',
    options: [
      { label: '1', value: 1 },
      { label: '2', value: 2 }
    ]
  },
  {
    label: "实际主货架-是否执行",
    prop: "actualMainShelfExecuted",
    visible: true,
    type: 'formula', // 公式
    func: (row) => {
      row.actualMainShelfExecuted = ((parseInt(row.actualMainShelfType) >= parseInt(row.plannedMainShelfType)) && (parseInt(row.actualMainShelfQty) >= parseInt(row.plannedMainShelfQty))) ? '是' : '否';
      return row.actualMainShelfExecuted;
    }
  },
  {
    label: "实际端架-数量",
    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 }
    ]
  },
  {
    label: "实际端架-是否执行",
    prop: "actualEndCapExecuted",
    visible: true,
    type: 'formula', // 公式
    func: (row) => {
      row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '是' : '否';
      return row.actualEndCapExecuted;
    }
  },
  {
    label: "实际地堆-平米数（㎡）",
    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: "实际地堆-数量",
    prop: "actualFloorStackQty",
    visible: true,
    type: 'select',
    options: [
      { label: '0', value: 0 },
      { label: '1', value: 1 },
      { label: '2', value: 2 },
      { label: '3', value: 3 }
    ]
  },
  {
    label: "实际主题地堆-是否",
    prop: "actualThemedFloorStack",
    visible: true,
    type: 'select',
    options: [
      { label: '是', value: '是' },
      { label: '否', value: '否' },
    ]
  },
  {
    label: "实际地堆是否执行",
    prop: "actualFloorStackExecuted",
    visible: true,
    type: 'formula', // 公式
    func: (row) => {
      row.actualFloorStackExecuted = ((parseFloat(row.actualFloorStackArea) >= parseFloat(row.plannedFloorStackArea)) && (parseInt(row.actualFloorStackQty) >= parseInt(row.plannedFloorStackQty))) ? '是' : '否';
      return row.actualFloorStackExecuted;
    }
  },
  {
    label: "实际多点陈列-数量+形式",
    prop: "actualMultiDisplay",
    visible: true,
    type: 'input',
    func: (row) => {
      // 没有输入内容时，则是否执行设置为否
      row.actualMultiDisplayExecuted = !row.actualMultiDisplay ? '否' : '是'
    }
  },
  {
    label: "实际多点陈列-是否执行",
    prop: "actualMultiDisplayExecuted",
    visible: true,
    type: 'select',
    options: [
      { label: '是', value: '是' },
      { label: '否', value: '否' },
    ]
  },
  {
    label: "常规陈列是否执行",
    prop: "regularDisplayExecuted",
    visible: true,
    type: 'formula', // 公式
    func: (row) => {
      // 实际主货架-是否执行 && 实际端架-是否执行 && 实际地堆-是否执行 && 实际多点陈列-是否执行
      row.regularDisplayExecuted = (row.actualMainShelfExecuted === '是' && row.actualEndCapExecuted === '是' && row.actualFloorStackExecuted === '是' && row.actualMultiDisplayExecuted === '是') ? '是' : '否';
      return row.regularDisplayExecuted;
    }
  }
])

// 表格列数据
const tableColumns = ref([])
// 右上角工具选择列
const chooseColumns = ref([])
// 加载进度
const isLoading = ref(false)
// 计算列具体数据
const checkTableColumns = () => {
  if (operation.value === '全部列') {
    chooseColumns.value = baseColumns.value
    tableColumns.value = baseColumns.value.flatMap(item => {
      if (item.children) {
        // 在扁平化时就过滤掉 visible 为 false 的列
        return item.children.filter(child => child.visible);
      }
      // 如果是没有 children 的单元素，也检查其 visible 属性
      return item.visible ? item : [];
    }).filter(Boolean); // 过滤掉空数组项
  } else if (operation.value === '填报列') {
    chooseColumns.value = fillColumns.value
    console.log(fillColumns, 'fill')
    tableColumns.value = fillColumns.value.filter(item => item.visible);
  }
}
checkTableColumns()
// 选择列默认选中哪些
const visibleProps = computed(() => {
  // 分情况返回
  return tableColumns.value.flatMap(item => {
    if (item.children) {
      return item.children.map(child => child.prop);
    }
    return item.prop;
  });
});
// 监听chooseColumns变化，当列的visible属性改变时重新计算tableColumns
watch(
  () => chooseColumns.value,
  () => {
    // 不需要重新赋值，只需要重新计算tableColumns
    checkTableColumns();
  },
  { deep: true }
);


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

// 筛选工具
const showSearch = ref(true);
const getTableList = async () => {
  isLoading.value = true
  const res = await getDisplayList({
    ...params
  })
  tableData.value = res.data.rows
  total.value = res.data.total
  setTimeout(() => {
    isLoading.value = false
  }, 3000)

}
getTableList()

// 列宽度
const getColumnMinWidth = (column) => {
  // 根据列名或属性判断合适的最小宽度
  const widthMap = {
    // 短文本列
    'dealerProvince': 100,
    'dealerCity': 100,
    'storeProvince': 100,
    'storeCity': 100,
    'openingDate': 120,
    'closingDate': 120,
    'monthlyVisitTarget': 80,
    // 中等长度文本列
    'regionName': 120,
    'districtName': 120,
    'dealerType': 120,
    'lineName': 140,
    'lineType': 120,
    'channelDl': 120,
    'channelXl': 120,
    'storeType': 120,
    'systemFormat': 120,
    'monthlyVisitTarget': 120,

    // 长文本列
    'dealerName': 200,
    'storeName': 220,
    'storeAddress': 300,
    'visitAssistTag': 180,
    'storeLevel': 170,
    'plannedFloorStackArea': 170,
    'plannedFloorStackUnitCostPerSqm': 170,
    'actualFloorStackArea': 170,
    'actualMultiDisplay': 190,
    'plannedMultiDisplay': 190,
    'actualMultiDisplayExecuted': 170
  };

  return widthMap[column.prop] || 150; // 默认宽度
};

</script>

<style scoped
  lang="scss">
  .container {
    .el-form-item {
      align-items: center;
    }

    .auto-fit-header-table {
      width: 100%;
      --el-table-header-cell-text-color: #333;
      --el-table-header-cell-padding: 0 .4267rem;
      /* 列头内边距（可调整） */

      .el-table__header th.el-table__cell {
        white-space: nowrap;
        /* 禁止列头文本换行 */
        text-overflow: clip;
        /* 溢出不隐藏（若想隐藏用 ellipsis，但需配合 overflow: hidden） */
        overflow: visible;
        /* 允许内容撑满（避免文本被截断） */
      }

      /* 保持原有的单元格样式，但优化内容显示 */
      .el-table__body td.el-table__cell {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

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

      /* 表格内下拉框 */
      .el-select {
        width: 100% !important;
      }
    }
  }
</style>