<template>
  <div class="page-view flex-row-sb">
    <app-sync-tree
      ref="appAsyncTree"
      :actions="treeActions"
      :default-data="{ customConfigField: 'custom config field' }"
      :default-expanded-keys="defaultExpandedKeys"
      :expand-all="expandAll"
      :props="treeProps"
      :request-method="getTreeNodes"
      highlight-first
      title="DW数据资源目录"
      @select="onTreeNodeClick"
    />

    <div class="page-view flex-1 ml-15 h-100">
      <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" label-width="90px"
                  @query="onQuery" @reset="onReset"
      >
        <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="6" el-type="input" label="表资源名称">
          <el-input v-model="filters.name" clearable placeholder="请输入"
                    @keyup.enter.native="$refs['app-filter'].query"
          />
        </app-filter-item>
        <app-filter-item :span="6" label="数据库表名">
          <el-input v-model="filters.tableNameEn" 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">
        <app-table
          ref="table"
          :column="columns"
          :pagination="pagination"
          :table-data="tableData"
          :table-loading="tableLoading"
          :total="total"
          row-key="id"
          @pagination-change="onPaginationChange"
          @row-dblclick="editTable"
        >
          <template #level="scope">
            <template v-for="item in getDictionaryByCode('zymj')">
              <el-tag v-if="item.value === scope.row['level']" :key="item.value" :label="item.value"
                      :type="scope.row['level'] === '4' ? 'danger' : ''"
              >{{ item.name }}
              </el-tag>
            </template>
          </template>
          <template #deployed="scope">
            <el-tag :type="scope.row['deployed'] === '1' ? '' : 'danger'">
              {{ scope.row['deployed'] === '1' ? '已发布' : '未发布' }}
            </el-tag>
          </template>
        </app-table>
      </div>
    </div>
    <source-dialog v-model="dialogVisible" :data="dialogdData" :title="dialogTitle" @confirm="onConfirm" />
  </div>
</template>

<script>
import { getDictionaryByCode } from '@/utils/dictionary.js';
import tableMixin from '@/mixins/table.js'; // 列表mixins
import API from '@/api/business/dataDWCatalog';
import sourceDialog from './sourceDialog.vue';

export default {
  name: 'TaskActuators',
  components: { sourceDialog },
  mixins: [tableMixin],
  data() {
    const TREE_CONFIG = {
      treeProps: {
        value: 'id',
        label: 'name',
      },
      expandAll: false,
      defaultExpandedKeys: ['1'],
      treeActions(data) {
        return [];
      },
      curNode: {}, // 当前选择节点
    };
    const TABLE_CONFIG = {
      // 列表表头
      columns: [
        { label: '表资源名称', prop: 'name' },
        { label: '表资源编码', prop: 'code' },
        { label: '数据库表名', prop: 'tableNameEn' },
        { label: '发布状态', prop: 'deployed', dataType: 'slot', slot: 'deployed', width: '120', align: 'center' },
        {
          dataType: 'option',
          label: '操作',
          width: '120px',
          fixed: 'right',
          operation: [
            {
              name: '数据管理',
              type: 'text',
              icon: 'el-icon-s-order',
              size: 'mini',
              color: '#409eff',
              plain: true,
              clickFun: (row) => {
                this.viewDataPage(row);
              },
            },
          ],
        },
      ],
      defaultFilter: [
        {
          operation: 'EQUAL',
          property: 'dwCatalogsId',
          relation: 'AND',
          value: '',
        },
        {
          operation: 'EQUAL',
          property: 'deployed',
          relation: 'AND',
          value: '1',
        },
      ],
      rowData: {},
    };
    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
      dialogdData: {},
    };

    return {
      treeData: [],
      ...TREE_CONFIG,
      ...TABLE_CONFIG,
      ...DIALOG_CONFIG,
    };
  },
  computed: {
    // 配置列表接口方法：只有配置了该计算属性 才会执行 table mixins中的getData方法
    dataMethod() {
      return API.queryDWTable;
    },
  },

  methods: {
    getDictionaryByCode,
    // 树 -----------------
    async getTreeNodes() {
      const { value = [] } = await API.getDWTree();
      this.defaultExpandedKeys = [value?.[0].id || ''];
      return { data: value || [] };
    },

    onTreeNodeClick(node) {
      if (node.id === this.curNode?.id) return;
      this.curNode = { ...node };
      this.getData();
    },

    // 列表 ------------
    editTable(row) {
      this.dialogTitle = '详情';
      this.dialogdData = row;
      this.dialogVisible = true;
    },
    onBeforeGetData(queryParams, formData) {
      this.setFilterValue(this.queryParams, this.defaultFilter, 'dwCatalogsId', this.curNode.id);
      this.setFilterValue(this.queryParams, this.defaultFilter, 'deployed', '1');
    },
    onConfirm(data, pData) {
      this.getData();
    },
    async viewDataPage(data) {
      const { id = '', name = '', tableClass = '' } = data;
      // 打开新的页面 到 href 这个页面
      const href = this.$router.resolve({
        path: '/dataResource/dataManage/DetaileDataQuery',
        query: { id, name, tableClass },
      }).href;
      window.open(href, '_blank');
    },
  },
};
</script>

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