<template>
  <el-dialog :title="title" :visible.sync="visible" width="60%" append-to-body class="data-list-dialog">
    <el-table
      v-loading="loading"
      :data="tableData"
      fit highlight-current-row border stripe
      style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :formatter="column.formatter"
        align="center">
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>

<script>
/**
 * 通用数据列表展示组件
 * @component DataList
 */
export default {
  name: 'DataList',
  props: {
    /**
     * 对话框标题
     */
    title: {
      type: String,
      default: '数据列表'
    },
    /**
     * 表格列配置
     */
    columns: {
      type: Array,
      required: true
    },
    /**
     * 获取数据的方法
     */
    fetchData: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      // 表格数据
      tableData: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    /** 
     * 显示对话框
     */
    show() {
      this.visible = true
      this.getList()
    },
    /** 
     * 获取数据列表
     */
    async getList() {
      this.loading = true
      try {
        const res = await this.fetchData(this.queryParams)
        // 优先使用 data 字段的数据
        this.tableData = res.data || res.rows || []
        // 如果返回的 total 为 0，则使用 data 数组的长度作为 total
        this.total = res.total || (res.data ? res.data.length : 0)
      } catch (error) {
        console.error('获取数据失败:', error)
        this.tableData = []
        this.total = 0
      } finally {
        this.loading = false
      }
    }
  }
}
</script>