<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="detail-dialog" fullscreen hide-footer>
    <div class="flex-col h-100" v-loading="tableLoading">
      <template v-if="columns.length">
        <app-table
          :column="columns"
          :pagination="pageOption"
          :table-data="tableData"
          :table-loading="tableLoading"
          :total="total"
          @pagination-change="onPaginationChange"
        >
        </app-table>
      </template>
      <template v-else>
        <div class="flex-row-c h-100 w-100">
          <el-empty></el-empty>
        </div>
      </template>
    </div>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import tableMixin from '@/mixins/table.js';
import API from '@/api/business/dataDWCatalog.js';
export default {
  name: 'viewDataDialog',
  mixins: [dialogMixin, tableMixin],
  props: {},
  data() {
    return {
      loading: false,
      columns: [],
      filters: {
        order: '',
        param: {},
      },
      pageOption: {
        // 分页初始化数据
        pageNo: 1,
        pageSize: 20,
      },
      origintTableData: {},
    };
  },
  computed: {
    initRefresh: () => false,
  },
  mounted() {},
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      if (data?.id) {
        this.origintTableData = data;
        this.filters.tableId = data.id;
        this.filters.tableName = data.name;
        this.getData();
      }
    },
    async getData() {
      try {
        this.tableLoading = true;
        const params = {
          ...this.filters,
          ...this.pageOption,
        };

        let QueryAPI;
        if (this.origintTableData.tableClass === '1') {
          // 物理表
          QueryAPI = API.queryWLTableData;
        } else if (this.origintTableData.tableClass === '2') {
          // 动态表
          QueryAPI = API.queryDTTableData;
        }

        const { data = [], field = [], total = 0 } = await QueryAPI(params);

        this.tableData = data || [];
        this.total = total || 0;
        const keys = Object.keys(field);
        this.columns = [];
        if (keys.length) {
          keys.forEach((key) => {
            this.columns.push({
              label: field[key],
              prop: key,
              minWidth: '120',
            });
          });
        }
      } catch (e) {
        console.log(e);
      } finally {
        this.tableLoading = false;
      }
    },
    // 分页触发
    onPaginationChange(page) {
      this['filter'] = {
        ...this['filter'],
        ...page,
      };
      this.pageOption = page;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped></style>
