<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">
      <app-table
        :column="columns"
        :pagination="pageOption"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        @pagination-change="onPaginationChange"
      >
        <template #deployed="scope">
          <el-tag :type="scope.row['deployed'] === 1 ? '' : 'danger'">{{ scope.row['deployed'] === 1 ? '已发布' : '未发布' }}</el-tag>
        </template>
      </app-table>
    </div>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import tableMixin from '@/mixins/table.js';
import API from '@/api/business/tyDataManageQuery';

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

        const { data, field, total } = await API.getTableData(params);
        this.tableData = data || [];
        this.total = total || 0;
        const keys = Object.keys(field);
        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>
