<template>
  <div class="flex-container">
    <!-- 操作类型 -->
    <el-row>
      <el-form-item>
        <el-radio-group v-model="operation">
          <el-radio-button label="大区战区-分析"
            value="大区战区-分析"
            v-hasPermi="['promotion:dashboard:list-show']" />
          <el-radio-button label="城市经理-分析"
            value="城市经理-分析" />
        </el-radio-group>
      </el-form-item>
    </el-row>
    <el-table :data="tableData"
      border
      ref="tableRef"
      v-loading="isLoading"
      show-overflow-tooltip>
      <template v-for="col in chooseColumns"
        :key="col.prop">
        <!-- 有子列的情况 -->
        <el-table-column v-if="col.childColumns && col.childColumns.length > 0"
          :label="col.label"
          align="center"
          :width="col.width">
          <el-table-column v-for="childCol in col.childColumns"
            :key="childCol.prop"
            :label="childCol.label"
            :prop="childCol.prop"
            align="center"
            :width="childCol.width">
          </el-table-column>
        </el-table-column>
        <!-- 没有子列的独立列情况 -->
        <el-table-column v-else
          :label="col.label"
          :prop="col.prop"
          align="center"
          :width="col.width">
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup>
import userStore from '@/store/modules/user'
const props = defineProps({
  tableData: { // 数据源
    type: Array,
    default: () => []
  },
  baseColumns: { // 表格列
    type: Array,
    default: () => []
  },
  total: { // 总条数
    type: Number,
    default: 0
  },
  isLoading: { // 表格加载状态
    type: Boolean,
    default: false
  },
  formatter: { // 格式化函数
    type: Function,
    default: (row, col, cellValue) => cellValue
  }
})
const emit = defineEmits(['getTableList', 'updateShowSearch'])

/*************** 工具栏 ***************/
const showFill = userStore().hasQcMarketEmpInfo // 是否启用填报模式
const operation = ref('大区战区-分析'); // 切换平铺/填报模式
const tableRef = ref(null)
const chooseColumns = ref([]) // 使用的列

watch(operation, (newVal) => {
  // 如果是大区战区-分析，则隐藏城市经理列
  if (newVal === '大区战区-分析') {
    chooseColumns.value = props.baseColumns.filter(item => item.prop !== 'cityManager')
  } else {
    chooseColumns.value = props.baseColumns
  }
}, {
  immediate: true
})

const getTableList = () => {
  emit('getTableList')
}
</script>

<style scoped
  lang="scss">

  /* 根容器设置为flex布局，占据整个可用空间 */
  .flex-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* 表格样式 */
    .table-container {
      flex: 1;
      /* 这是关键，让表格容器自动占据剩余空间 */
      display: flex;
      flex-direction: column;
      min-height: 0;

      /* 解决flex子项内容溢出问题 */
      .auto-fit-header-table {
        flex: 1;

        /* 列样式 */
        .column-style {

          /* 列头样式 */
          .formula-column {
            display: flex;
            justify-content: center;
            align-items: center;

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

              p {
                margin: 0;
                font-size: 12px;
                color: #606266;
              }
            }

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

          /* 单元格样式 */
          /* 展示模式单元格（仅展示模式生效） */
          .show-cell-style {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          /* 自定义单元格样式（仅填充模式生效） */
          .cell-style {
            >div {
              display: flex;
              flex-direction: column;
              align-items: center;

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

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

              /* 非 disabled 状态下的背景颜色 */
              &.no-disabled ::v-deep(.el-select__wrapper) {
                border: 4px solid var(--el-background-editor-cell) !important;
              }
            }

            .el-input {
              height: 32px !important;
              /* box-sizing: content-box; */
              padding: 0 10px;
              width: 100%;


              /* 非 disabled 状态下的背景颜色 */
              &.no-disabled ::v-deep(.el-input__wrapper) {
                border: 4px solid var(--el-background-editor-cell) !important;
              }

            }

            .date-picker {
              width: 100%;
              padding: 10px;

              /* 非 disabled 状态下的背景颜色 */
              &.no-disabled ::v-deep(.el-input__wrapper) {
                border: 4px solid var(--el-background-editor-cell) !important;
              }

              ::v-deep(.el-input) {
                width: 100%;
                padding: 0;
              }
            }
          }

          /* 普通文字单元格（仅填充模式生效） */
          .fill-span-wrap {
            /* 超出省略号 */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 10px;
          }

        }

        /* 填报模式-单元格 */
        &.cell-no-padding {

          /* 无上下内边距 */
          ::v-deep(.el-table__row) {
            .el-table__cell {
              padding-top: 0;
              padding-bottom: 0;

              .cell {
                padding: 0 !important;
              }
            }
          }
        }
      }

      /* 分页器 */
      .pagination-container {
        margin: 10px;
      }
    }
  }


  /* 加深表头背景颜色 */
  ::v-deep(.el-table__header-wrapper) {
    .el-table__header {
      th {
        background-color: #dcdfe6 !important;
        color: #303133 !important;
        font-weight: bold;
      }
    }
  }

</style>
