<template>
  <app-dialog v-model="visible" :loading="loading" append-to-body class="detail-dialog" title="多维字典" width="66%"
              @cancel="onCancel" @confirm="onConfirm">
    <div class="page-view flex-row-sb h-100">
      <app-sync-tree
        ref="appAsyncTree"
        :default-checked-keys="defaultCheckedKeys"
        :default-data="{ customConfigField: 'custom config field' }"
        :default-expanded-keys="defaultExpandedKeys"
        :expand-all="expandAll"
        :props="treeProps"
        :request-method="getTreeNodes"
        highlight-first
        title="接口共享目录"
        @select="onTreeNodeClick"
      />

      <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 :filter-config="{ operation: 'LIKE' }" :span="10" el-type="input" label="资源项名称">
            <el-input v-model="filters.name" clearable placeholder="请输入" @keyup.enter.native="onQuery(filters)" />
          </app-filter-item>
          <app-filter-item :filter-config="{ operation: 'LIKE' }" :span="10" el-type="input" label="资源项编码">
            <el-input v-model="filters.code" clearable placeholder="请输入" @keyup.enter.native="onQuery(filters)" />
          </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"
          />
        </div>
      </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/shareDataCatalog.js'

export default {
  name: 'tableSeclectDialog',
  components: {},
  mixins: [dialogMixin, tableMixin],
  props: {},
  data() {
    const TREE_CONFIG = {
      treeProps: {
        value: 'id',
        label: 'name'
      },
      expandAll: false,
      defaultExpandedKeys: ['0'],
      defaultCheckedKeys: ['1'],

      curNode: {} // 当前选择节点
    }
    const TABLE_CONFIG = {
      // 列表表头
      columns: [
        {label: '资源项名称', prop: 'name'},
        {label: '资源项编码', prop: 'code'}
      ],
      defaultFilter: [
        {
          operation: 'EQUAL',
          property: 'catalogId',
          relation: 'AND',
          value: ''
        },
        {
          operation: 'EQUAL',
          property: 'deployedStatus',
          relation: 'AND',
          value: '1'
        }
      ],
      rowData: {}
    }
    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
      fieldDialogVisible: false,
      dialogdData: {}
    }

    return {
      loading: false,
      treeData: [],
      ...TREE_CONFIG,
      ...TABLE_CONFIG,
      ...DIALOG_CONFIG
    }
  },
  computed: {
    // 配置列表接口方法：只有配置了该计算属性 才会执行 table mixins中的getData方法
    dataMethod() {
      return API.shareCatalogsTable
    }
  },
  mounted() {
  },
  methods: {
    onCompanyConfirm() {
    },
    getDictionaryByCode,
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    // 树 -----------------
    async getTreeNodes() {
      const {value} = await API.getShareTree()
      return {data: value || []}
    },
    initData(data) {
      this.currentRow = null
    },
    onTreeNodeClick(node) {
      if (node.id === this.curNode?.id) return
      this.curNode = {...node}
      this.filters['catalogId'] = node.id
      this.getData()
    },
    onBeforeGetData(queryParams, formData) {
      this.setFilterValue(this.queryParams, this.defaultFilter, 'catalogId', this.curNode.id)
      this.setFilterValue(this.queryParams, this.defaultFilter, 'deployedStatus', '1')
    },
    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>
::v-deep .gz-dialog .app-dialog-content {
  background: transparent !important;
  padding: 0 !important;
}

::v-deep .el-form-item {
  margin: 0 !important;
}

::v-deep .el-table td.el-table__cell {
  padding: 12px 0 !important;
}

.table-wrapper {
  height: calc(100% - 68px);
}
</style>
