<template>
  <CommonPlan :tableData="tableData"
    :isLoading="isLoading"
    :total="total"
    :tableColumns="tableColumns"
    :chooseColumns="chooseColumns"
    :visibleProps="visibleProps"
    :params="params"
    @updateColumns="updateColumns"
    @getTableList="getTableList" />
</template>

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

  /*************** 操作类型 ***************/

  // 全部列
  const baseColumns = ref([
    // 一级类
    {
      label: "基础信息", // 类型标题
      children: [
        {
          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: 105
        },
        {
          label: "经销商-城市",
          prop: "dealerCity",
          visible: true,
          type: 'string',
          fill: false,
          width: 105
        },
        {
          label: "经销商-代码",
          prop: "dealerCode",
          visible: true,
          type: 'string',
          fill: false,
          width: 105
        },
        {
          label: "经销商-类型",
          prop: "dealerType",
          visible: true,
          type: 'string',
          fill: false,
          width: 145
        },
        {
          label: "开户日期",
          prop: "openingDate",
          visible: true,
          type: 'string',
          fill: false,
          width: 105
        },
        {
          label: "闭户日期",
          prop: "closingDate",
          visible: true,
          type: 'string',
          fill: false,
          width: 105
        },
        {
          label: "大区总监",
          prop: "regionManager",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "战区经理",
          prop: "districtManager",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "城市经理",
          prop: "cityManager",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "门店名称",
          prop: "storeNameCodeDealerName", // 新增动态列（只在填报列显示）
          visible: true,
          type: 'string',
          fill: true,
          onlyFill: true,// 仅仅在填报模式下生效
          fixed: 'left',
          width: 215,
          render: (h, row) => {
            return h('div', {
              class: 'render-cell',
              style: {
                alignItems: 'center',
                whiteSpace: 'pre-line'
              }
            }, [
              h('p', row.storeName),
              h('p', row.storeCode),
              h('p', {
                style: {
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  maxWidth: '100%'
                }
              }, row.dealerName)
            ])
          }
        },
        {
          label: "门店名称",
          prop: "storeName",
          visible: true,
          type: 'string',
          fill: false,
          fixed: 'left',
          width: 175
        },
        {
          label: "门店编码",
          prop: "storeCode",
          visible: true,
          type: 'string',
          fill: false,
          fixed: 'left',
          width: 105
        },
        {
          label: "经销商名称",
          prop: "dealerName",
          visible: true,
          type: 'string',
          fill: false,
          fixed: 'left',
          width: 215
        },
        {
          label: "系统类型",
          prop: "lineType",
          visible: true,
          type: 'string',
          fill: false,
          fixed: 'left',
          width: 90
        },
        {
          label: "门店-省份",
          prop: "storeProvince",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "门店-城市",
          prop: "storeCity",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "系统名称",
          prop: "lineName",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "渠道大类",
          prop: "channelDl",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "渠道小类",
          prop: "channelXl",
          visible: true,
          type: 'string',
          fill: false,
          width: 140
        },
        {
          label: "门店类型",
          prop: "storeType",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "系统业态",
          prop: "systemFormat",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "门店面积",
          prop: "storeArea",
          visible: true,
          type: 'string',
          fill: false,
          width: 90
        },
        {
          label: "门店分级（销量坎级）",
          prop: "storeLevel",
          visible: true,
          type: 'string',
          fill: false,
          width: 165
        },
        {
          label: "门店地址",
          prop: "storeAddress",
          visible: true,
          type: 'string',
          fill: false,
          width: 255
        },
        {
          label: "品项数",
          prop: "productCount",
          visible: true,
          type: 'string',
          fill: false,
          width: 80
        }
      ],
      prop: 'baseColumns',
      visible: true
    },
    {
      label: "大业态测试",
      children: [
        {
          label: "大业态测试-动销模型",
          prop: "lfSalesModel",
          visible: true,
          type: 'string',
          fill: false,
          width: 155
        },
        {
          label: "大业态测试-月均POS",
          prop: "lfMonthlyPos",
          visible: true,
          type: 'string',
          fill: false,
          width: 155
        }
      ],
      prop: 'lfColumns',
      visible: true
    },
    {
      label: "费用计划",
      prop: 'fpColumns',
      children: [
        {
          label: "计划主货架-形式",
          prop: "plannedMainShelfType",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "计划主货架-数量",
          prop: "plannedMainShelfQty",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "计划主货架-单个费用",
          prop: "plannedMainShelfUnitCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 155
        },
        {
          label: "计划主货架-总费用",
          prop: "plannedMainShelfTotalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 145
        },
        {
          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纵及以上' }
          ],
          referenceKey: "plannedMainShelfType",
          fill: true,
          width: 140,
          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=""
                  clearable>
                  {col.options.map(item => (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    />
                  ))}
                </el-select>
              </div>
            )
          },
          // 请求时需要额外携带影响的列字段值
          requestKey: ["actualMainShelfQty", "actualMainShelfExecuted", "regularDisplayExecuted"]
        },
        {
          label: "实际主货架-数量",
          prop: "actualMainShelfQty",
          visible: true,
          type: 'select',
          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-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: ["actualMainShelfExecuted", "regularDisplayExecuted"]
        },
        {
          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;
          },
          formulaStr: '公式：（实际主货架形式 >= 计划主货架形式）并且（实际主货架数量 >= 计划主货架数量）',
          fill: true,
          width: 170
        },
        {
          label: "计划端架-数量",
          prop: "plannedEndCapQty",
          visible: true,
          type: 'string',
          fill: false,
          width: 115
        },
        {
          label: "计划端架-总费用",
          prop: "plannedEndCapTotalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "计划端架-单个费用",
          prop: "plannedEndCapUnitCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 140
        },
        {
          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 }
          ],
          referenceKey: "plannedEndCapQty",
          fill: true,
          width: 115,
          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: ["actualEndCapExecuted", "regularDisplayExecuted"]
        },
        {
          label: "实际端架-是否执行",
          prop: "actualEndCapExecuted",
          visible: true,
          type: 'formula',
          func: (row) => {
            row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '是' : '否';
            return row.actualEndCapExecuted;
          },
          formulaStr: '公式：（实际端架数量 >= 计划端架数量）',
          fill: true,
          width: 155
        },
        {
          label: "计划地堆-平米数（㎡）",
          prop: "plannedFloorStackArea",
          visible: true,
          type: 'string',
          fill: false,
          width: 170
        },
        {
          label: "计划地堆-数量",
          prop: "plannedFloorStackQty",
          visible: true,
          type: 'string',
          fill: false,
          width: 115
        },
        {
          label: "计划主题地堆-是否",
          prop: "plannedThemedFloorStack",
          visible: false,
          type: 'string',
          fill: true,
          width: 140
        },
        {
          label: "计划地堆-总费用",
          prop: "plannedFloorStackTotalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 130
        },
        {
          label: "计划折算1㎡-单个费用",
          prop: "plannedFloorStackUnitCostPerSqm",
          visible: true,
          type: 'string',
          fill: false,
          width: 160
        },
        {
          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 }
          ],
          referenceKey: "plannedFloorStackArea",
          fill: true,
          width: 170,
          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", "regularDisplayExecuted"]
        },
        {
          label: "实际地堆-数量",
          prop: "actualFloorStackQty",
          visible: true,
          type: 'select',
          options: [
            { label: '0', value: 0 },
            { label: '1', value: 1 },
            { label: '2', value: 2 },
            { label: '3', value: 3 }
          ],
          referenceKey: "plannedFloorStackQty",
          fill: true,
          width: 115,
          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.actualFloorStackArea || !row[col.referenceKey]}
                  placeholder="">
                  {col.options.map(item => (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    />
                  ))}
                </el-select>
              </div>
            )
          },
          // 请求时需要额外携带影响的列字段值
          requestKey: ["actualFloorStackExecuted", "regularDisplayExecuted"]
        },
        {
          label: "实际主题地堆-是否",
          prop: "actualThemedFloorStack",
          visible: true,
          type: 'select',
          options: [
            { label: '是', value: '是' },
            { label: '否', value: '否' }
          ],
          fill: true,
          width: 140,
          render: (_, row, col) => {
            return (
              <div>
                <el-select modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    row[col.prop] = value;
                    submitChange(row, col);
                  }}
                  placeholder="">
                  {col.options.map(item => (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    />
                  ))}
                </el-select>
              </div>
            )
          }
        },
        {
          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;
          },
          formulaStr: '公式：（实际地堆平米数 >= 计划地堆平米数）并且（实际地堆数量 >= 计划地堆数量）',
          fill: true,
          width: 150
        },
        {
          label: "计划多点陈列-数量+形式",
          prop: "plannedMultiDisplay",
          visible: true,
          type: 'string',
          fill: false,
          width: 175
        },
        {
          label: "计划多点陈列-总费用",
          prop: "plannedMultiDisplayTotalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 155
        },
        {
          label: "实际多点陈列-数量+形式",
          prop: "actualMultiDisplay",
          visible: true,
          type: 'input',
          func: (row) => {
            // 没有输入内容时，则是否执行设置为否
            row.actualMultiDisplayExecuted = !row.actualMultiDisplay ? '否' : '是'
          },
          referenceKey: "plannedMultiDisplay",
          fill: true,
          width: 175,
          render: (_, row, col) => {
            return (
              <div>
                <span>{row[col.referenceKey] || '-'}</span>
                <el-input modelValue={row[col.prop]}
                  onUpdate:modelValue={(value) => {
                    row[col.prop] = value;
                    submitChange(row, col);
                  }}
                  disabled={!row[col.referenceKey]}
                  placeholder="">
                </el-input>
              </div>
            )
          },
          // 请求时需要额外携带影响的列字段值
          requestKey: ["actualMultiDisplayExecuted"]
        },
        {
          label: "实际多点陈列-是否执行",
          prop: "actualMultiDisplayExecuted",
          visible: true,
          type: 'select',
          options: [
            { label: '是', value: '是' },
            { label: '否', value: '否' }
          ],
          fill: true,
          width: 170,
          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: ["actualMultiDisplayExecuted"]
        },
        {
          label: "合计费用-费用",
          prop: "totalCost",
          visible: true,
          type: 'string',
          fill: false,
          width: 115
        },
        {
          label: "合计费用-费率",
          prop: "totalCostRate",
          visible: true,
          type: 'string',
          fill: false,
          width: 115
        },
        {
          label: "常规陈列是否执行",
          prop: "regularDisplayExecuted",
          visible: true,
          type: 'formula',
          func: (row) => {
            // 实际主货架-是否执行 && 实际端架-是否执行 && 实际地堆-是否执行 && 实际多点陈列-是否执行
            row.regularDisplayExecuted = (row.actualMainShelfExecuted === '是' && row.actualEndCapExecuted === '是' && row.actualFloorStackExecuted === '是' && row.actualMultiDisplayExecuted === '是') ? '是' : '否';
            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: 120
        },
        {
          label: "计划-当月拜访目标",
          prop: "monthlyVisitTarget",
          visible: true,
          type: 'string',
          fill: false,
          width: 135
        },
        {
          label: "实际-当月是否拜访",
          prop: "monthlyVisited",
          visible: true,
          type: 'string',
          fill: false,
          width: 135
        },
        {
          label: '修改人',
          prop: 'updateBy',
          visible: true,
          type: 'string',
          fill: false,
          width: 120
        },
        {
          label: '修改时间',
          prop: 'updateTime',
          visible: true,
          type: 'string',
          fill: false,
          width: 140
        }
      ],
      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
    }

    let requestObj = {}
    if (col.requestKey) {
      // 关联的公式计算列，需要特殊处理
      for (const str of col.requestKey) {
        const obj = tableColumns.value.find(item => item.prop === str)
        if (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
    })
    // // 这些提交变化的，同时会影响公式计算的，需要把公式计算的字段列结果，一起发给后台
    // // 注意：实际主货架形式改变并为空时，要置空实际主货架数量
    // if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
    //   row.actualMainShelfQty = ''
    //   // 并提交保存一次
    //   await submitDisplayPlan({
    //     id: row.sadId,
    //     actualMainShelfQty: row.actualMainShelfQty,
    //   })
    // }

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

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

  // 筛选工具
  const getTableList = async () => {
    isLoading.value = true
    const res = await 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.storeNameCodeDealerName = item.storeName + '\n(' + item.storeCode + ')' + '\n(' + item.dealerName + ')'
    })
    tableData.value = res.data.rows
    total.value = res.data.total
    isLoading.value = false
  }
  getTableList()
</script>

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

    }
  }
</style>