<template>
  <!-- 操作类型 -->
  <el-row>
    <el-form-item>
      <el-radio-group v-model="operation"
        @change="checkTableColumns">
        <el-radio-button label="展示模式"
          value="展示模式" />
        <el-radio-button label="填报模式"
          value="填报模式"
          v-if="showFill" />
      </el-radio-group>
      <!-- 提示文字 -->
      <span class="tip-title">请真实，及时，准确填写！</span>
    </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
    ref="tableRef"
    class="auto-fit-header-table"
    :class="{ 'cell-no-padding': operation === '填报模式' }"
    v-loading="isLoading">
    <template v-for="col in tableColumns">
      <el-table-column v-if="col.visible"
        :label="col.label"
        :key="col.prop"
        align="center"
        :show-overflow-tooltip="col.showOverflowTooltip"
        class-name="column-style"
        :width="col.width"
        :fixed="operation === '填报模式' && col.fixed">
        <template #header="{ column }">
          <!-- 只为特定公式列添加问号图标 -->
          <span class="formula-column">
            {{ column.label }}
            <el-tooltip v-if="col.type === 'formula'"
              :content="col.formulaStr"
              placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </span>
        </template>
        <template #default="{ row }">
          <!-- 填报模式 -->
          <div v-if="operation === '填报模式'"
            style="overflow: visible !important;">
            <!-- 自定义渲染内容单元格 -->
            <div v-if="col.render"
              class="cell-style">
              <component :is="col.render(h, row, col)" />
            </div>
            <!-- 公式计算 -->
            <div v-else-if="col.type === 'formula'">
              {{ col.func(row) }}
            </div>
            <!-- 其他类型内容 -->
            <div v-else>
              <!-- 正常显示 -->
              <span>{{ row[col.prop] || '-' }}</span>
            </div>
          </div>
          <!-- 展示模式 -->
          <div v-else>{{ formatter(row, col, row[col.prop] || '-') }}</div>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <!-- 分页 -->
  <pagination :total="total"
    v-model:page="params.pageNum"
    v-model:limit="params.pageSize"
    @pagination="getTableList" />
</template>

<script setup>
import { h } from 'vue'
const props = defineProps({
  tableColumns: { // 表格列
    type: Array,
    default: () => []
  },
  chooseColumns: { // 显隐列数据结构
    type: Array,
    default: () => []
  },
  visibleProps: { // 显隐列数据，默认勾选的列
    type: Array,
    default: () => []
  },
  tableData: { // 数据源
    type: Array,
    default: () => []
  },
  isLoading: { // 表格加载状态
    type: Boolean,
    default: false
  },
  total: { // 总条数
    type: Number,
    default: 0
  },
  params: { // 分页参数
    type: Object,
    default: () => ({
      pageNum: 1,
      pageSize: 10,
    })
  },
  showFill: { // 是否显示填报模式
    type: Boolean,
    default: false
  },
  formatter: { // 格式化函数
    type: Function,
    default: (row, col, cellValue) => cellValue
  }
})
const emit = defineEmits(['updateColumns', 'getTableList', 'updateShowSearch'])

/*************** 工具栏 ***************/
// 切换平铺/填报模式
const operation = ref('展示模式');
const tableRef = ref(null)
const checkTableColumns = async () => {
  // 通知外面传入 tableColumns / chooseColumns 数据源
  await emit('updateColumns', operation.value)

  // 强制表格立即应用所有宽度设置，避免先自适应再调整
  nextTick(() => {
    if (tableRef.value) {
      tableRef.value.doLayout()
    }
  })
}
onMounted(() => {
  checkTableColumns()
})

// 控制搜索框显隐
const showSearch = ref(true)
watch(showSearch, (newVal) => {
  emit('updateShowSearch', newVal)
})
// 刷新数据
const getTableList = () => {
  emit('getTableList')
}
</script>

<style scoped
  lang="scss">

  /* 工具栏 */
  .el-row {
    .el-form-item {
      .tip-title {
        font-size: 32px;
        color: red;
        margin-left: 50px;
        font-weight: 900;
        margin-top: -5px;
      }
    }
  }

  /* 表格样式 */
  .auto-fit-header-table {
    height: 100%;

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

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

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

      /* 单元格样式 */
      /* 自定义渲染内容 */
      .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;
          background-color: var(--el-background-editor-cell);
        }

        .el-input {
          padding: 10px;
          background-color: var(--el-background-editor-cell);
        }

        .date-picker {
          width: 100%;
          padding: 10px;
          background-color: var(--el-background-editor-cell);

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

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

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

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