<template>
  <el-row>
    <el-form-item>
      <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
    ref="tableRef"
    class="auto-fit-header-table"
    v-loading="isLoading">
    <template v-for="col in tableColumns">
      <el-table-column v-if="col.visible"
        :label="col.label"
        :key="col.prop"
        align="center"
        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>
              {{ row[col.prop] || '-' }}
            </div>
          </div>
          <!-- 平铺模式 -->
          <div v-else>{{ 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 operation = ref('平铺模式');
// const operation = ref('填报模式');
const tableRef = ref(null)

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,
    })
  }
})
const emit = defineEmits(['updateColumns', 'getTableList'])

// 右上角工具
const showSearch = ref(true)

// 切换平铺/填报模式
const checkTableColumns = async () => {
  // 通知外面传入 tableColumns / chooseColumns 数据源
  await emit('updateColumns', operation.value)

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

onMounted(() => {
  checkTableColumns()
})

const getTableList = () => {
  emit('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; */
        >div {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

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


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

        .cell {
          /* overflow: visible; */

          >div {
            /* overflow: visible !important; */
          }

          .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;
            }

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

              .el-input {
                width: 100%;
                padding: 0;
              }
            }

          }
        }

      }

    }
  }

  /* 特殊动态渲染单元格样式 */
  .render-cell {
    p {
      margin: 0;
    }
  }

  /* 操作提示列 */
  .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;
    }
  }
</style>