<template>
  <app-dialog v-model="visible" :loading="loading" append-to-body class="detail-dialog" title="资源列表" width="60%"
              @cancel="onCancel" @confirm="onConfirm"
  >
    <div class="page-view flex-1 ml-15 h-100 overflow-h">
      <app-filter ref="app-filter" :model="filters" class="bg-white pa-15 border-radius-5" label-width="90px"
                  @query="onQuery"
                  @reset="onReset"
      >
        <app-filter-item label="资源名称" prop="pointName">
          <el-input v-model="filters.name" clearable placeholder="请输入"
                    @keyup.enter.native="$refs['app-filter'].query"
          />
        </app-filter-item>
        <app-filter-item label="资源编码" prop="pointCode">
          <el-input v-model="filters.code" clearable placeholder="请输入"
                    @keyup.enter.native="$refs['app-filter'].query"
          />
        </app-filter-item>
      </app-filter>

      <div class="pa-15 bg-white flex-1 flex-col mt-15 border-radius-5 overflow-h">
        <app-table
          ref="table"
          :column="columns"
          :pagination="pagination"
          :table-data="tableData"
          :table-loading="tableLoading"
          :total="total"
          class="h-100"
          highlight-current-row
          row-key="id"
          @current-change="handleCurrentChange"
          @pagination-change="onPaginationChange"
        >
          <template #deployed="scope">
            <el-tag :type="scope.row['deployed'] === 1 ? '' : 'danger'">
              {{ scope.row['deployed'] === 1 ? '已发布' : '未发布'
              }}
            </el-tag>
          </template>
        </app-table>
      </div>
    </div>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import tableMixin from '@/mixins/table.js'; // 列表mixins
import { getDictionaryByCode } from '@/utils/dictionary.js';
import API from '@/api/business/dataCollectCompany';
import DICT from '@/utils/dict';

export default {
  name: 'CopyResourceDialog',
  components: {},
  mixins: [dialogMixin, tableMixin],
  props: {
    clusterId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      columns: [
        { label: '资源名称', prop: 'name' },
        { label: '资源编码', prop: 'code' },
        {
          label: '物理实体表中文名',
          prop: 'tableNameCh',
        },
        {
          label: '物理实体表英文名',
          prop: 'tableNameEn',
        },
        { label: '数据库表名', prop: 'tableCode' },
        {
          label: '提供方式',
          prop: 'source',
          align: 'center',
          formatData: (val) => {
            return this.filterDict('SOURCE_PROVIDED_TYPE', val).label;
          },
        },
        {
          label: '是否发布',
          prop: 'deployed',
          align: 'center',
          dataType: 'slot', // 使用插槽
          slot: 'deployed', // 插槽名，搭配 dataType: 'slot' 使用
        },
      ],
      defaultFilter: [
        {
          operation: 'EQUAL',
          property: 'clusterId',
          relation: 'OR',
          value: '',
        },
      ],
    };
  },
  computed: {
    dataMethod() {
      return API.getDataSourceList;
    },
  },
  methods: {
    getDictionaryByCode,
    initData() {
      this.getData();
    },
    filterDict(dictKey, val) {
      const def = { label: '', value: val };
      if ([null, undefined, ''].includes(val)) {
        return def;
      }
      return DICT[dictKey].find((item) => item.value === val) || def;
    },
    onBeforeGetData(queryParams, formData) {
      this.setFilterValue(this.queryParams, this.defaultFilter, 'clusterId', this.$route.query.id);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    onCancel() {
      this.visible = false;
      this.loading = false;
      this.currentRow = null;
    },
    onConfirm() {
      this.loading = false;
      this.visible = false;
      this.$emit('change', this.currentRow);
    },
  },
};
</script>

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