<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="detail-dialog" fullscreen @cancel="onCancel" @confirm="onConfirm">
    <div class="page-view border-radius-5 h-100">
      <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" @query="onQuery" @reset="onReset">
        <app-filter-item :filter-config="{ operation: 'EQUAL' }" el-type="input" label="资源名称" prop="name">
          <el-input v-model="filters.name" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
        </app-filter-item>
        <app-filter-item label="资源编码" prop="code">
          <el-input v-model="filters.code" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
        </app-filter-item>
      </app-filter>

      <div class="flex-1 bg-white flex-col mt-11 pa-11 border-radius-5">
        <app-table
          ref="appTable"
          :checkbox="true"
          :column="columns"
          :pagination="pagination"
          :table-data="tableData"
          :table-loading="tableLoading"
          :total="total"
          highlight-current-row
          @pagination-change="onPaginationChange"
          @selection-change="handleSelectionChange"
        >
          <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';
import API from '@/api/business/dataODSCatalog';

export default {
  name: 'SourceSelector',
  mixins: [dialogMixin, tableMixin],
  props: {
    catalogId: {
      type: String,
      default: '',
    },
  },
  data() {
    const TABLE_CONFIG = {
      columns: [
        { label: '汇聚方', prop: 'clusterName', minWidth: '150' },
        { label: '资源名称', prop: 'name', minWidth: '150' },
        { label: '资源编码', prop: 'code', minWidth: '150' },
        // {
        //   label: '资源密级',
        //   prop: 'level',
        //   width: '100',
        //   align: 'center',
        //   formatData: val => {
        //     return this.filterDict('SECRET_LEVEL', val).label;
        //   },
        // },
        // {
        //   label: '资源格式',
        //   prop: 'sourceType',
        //   width: '100',
        //   align: 'center',
        //   formatData: val => {
        //     return this.filterDict('SOURCE_FILE_TYPE', val).label;
        //   },
        // },
        // {
        //   label: '提供方式',
        //   prop: 'source',
        //   width: '100',
        //   align: 'center',
        //   formatData: val => {
        //     return this.filterDict('SOURCE_PROVIDED_TYPE', val).label;
        //   },
        // },
        // {
        //   label: '是否发布',
        //   prop: 'deployed',
        //   width: '100',
        //   align: 'center',
        //   dataType: 'slot', // 使用插槽
        //   slot: 'deployed', // 插槽名，搭配 dataType: 'slot' 使用
        // },
        // {
        //   label: '提供方表前缀命名',
        //   width: '150',
        //   prop: 'tablePrefixCode',
        // },
        {
          label: '数据库表名',
          width: '150',
          prop: 'tableNameEn',
        },
        {
          label: '物理实体表中文名',
          width: '150',
          prop: 'tableNameCh',
        },
        // {
        //   label: '物理实体表英文名',
        //   width: '150',
        //   prop: 'tableNameEn',
        // },
      ],
    };

    return {
      ...TABLE_CONFIG,
      loading: false,
      selections: [],
    };
  },
  computed: {
    dataMethod() {
      return API.getCompanySourceList;
    },
  },
  created() {
    this.onConfirm();
  },
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      this.getData();
    },
    onCancel() {
      this.visible = false;
    },
    onConfirm() {
      if (this.selections.length <= 0) return;
      const data = this.selections.map((item) => {
        return {
          catalogId: this.catalogId,
          tableId: item.id,
        };
      });
      API.bulkIImport(data, false)
        .then((res) => {
          if (res.state) {
            this.visible = false;
            this.$message.success('导入成功');
            this.$emit('confirm');
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    handleSelectionChange(selections) {
      this.selections = selections;
    },
  },
};
</script>

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