<template>
  <div :class="$style.fullHeight">
    <a-row :gutter="24" :class="$style.fullHeight">
      <a-col :md="5" :sm="24" :class="$style.fullHeight">
        <a-card :class="$style.fullHeight">
          <sd-sysparams-tree
            ref="tree"
            classify
            @selected="selected"
            @hierarchyChange="getHierarchy"
          />
        </a-card>
      </a-col>
      <a-col :class="$style.fullHeight" :md="19" :sm="24">
        <a-card :class="$style.fullHeight">
          <sd-data-table
            v-if="selectedKey"
            ref="table"
            data-url="api/framework/v1/dict-manager/getkeys"
            :columns="columns"
            :actions="actions"
            :filter-expressions="expressions"
            show-selection
            :search-fields="['name']"
            @rowClick="rowClick"
          >
            <span slot="id" slot-scope="text">{{ text.slice(1) }}</span>
          </sd-data-table>
        </a-card>
      </a-col>
    </a-row>
    <div>
      <a-modal
        :visible="visible"
        title="分类管理"
        :width="800"
        destroy-on-close
        @cancel="visible = false"
        @ok="handleOk"
      >
        <sd-sysparams-form ref="form" classify />
      </a-modal>
    </div>
  </div>
</template>

<script>
import { Modal, Message } from 'ant-design-vue'
import TableActionTypes from '@/common/services/table-action-types'
import SysparamsService from './sysparams-service'
import components from './_import-components/sd-sysparams-classify-manage-import'
export default {
  name: 'SdSysparamsClassifyManage',
  metaInfo: {
    title: '分类管理',
  },
  components,
  data() {
    return {
      columns: [
        {
          dataIndex: 'id',
          title: 'ID',
          defaultSortOrder: 'asc',
          scopedSlots: { customRender: 'id' },
        },
        {
          dataIndex: 'index',
          title: '序号',
          defaultSortOrder: 'asc',
        },
        {
          dataIndex: 'name',
          title: '名称',
          sdClickable: true,
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          permission: 'dictKeyPerms-create',
          type: TableActionTypes.primary,
          callback: () => {
            this.visible = true
            this.$nextTick(() => {
              this.$refs.form.setFieldsValue({
                keyId: this.selectedNodes,
                props: { create: 1 },
              })
            })
          },
        },
        {
          label: '删除',
          id: 'delete',
          permission: 'dictKeyPerms-delete',
          type: TableActionTypes.batch,
          callback: (keys) => {
            Modal.confirm({
              title: '确认删除这个项和其所有子项吗？',
              okText: '删除',
              okType: 'danger',
              onOk: () => {
                const params = {
                  ids: this.$refs.table
                    .getSelectedRows()
                    .map((item) => item.privateCode || item.id),
                }
                SysparamsService.delSysclassify(params)
                  .then(() => {
                    this.$refs.table.refresh()
                    this.$refs.tree.refresh()
                  })
                  .catch((e) => {
                    Message.error({ content: '删除失败' })
                  })
              },
            })
          },
        },
      ],
      belongOrgId: '',
      selectedKey: '',
      selectedNodes: [
        {
          title: '参数管理',
          id: 'CXXX',
        },
      ],
      visible: false,
    }
  },
  computed: {
    expressions() {
      const params = [
        {
          dataType: 'long',
          name: 'belongOrgId',
          op: 'eq',
          longValue: this.belongOrgId,
        },
      ]
      return params.concat(
        this.selectedKey === 'CXXX'
          ? []
          : [
              {
                dataType: 'str',
                name: 'parent.id',
                op: 'eq',
                stringValue: this.selectedKey,
              },
            ]
      )
    },
  },
  methods: {
    getHierarchy(hierarchy) {
      if (hierarchy.length) {
        this.belongOrgId = hierarchy[0].id
      }
    },
    selected(key, selectedNodes) {
      this.selectedNodes = [selectedNodes]
      this.selectedKey = key
    },

    rowClick(record) {
      this.visible = true
      this.$nextTick(() => {
        record.keyId = this.selectedNodes
        this.$refs.form.setFieldsValue(record)
      })
    },
    handleOk() {
      this.$refs.form.validateFields().then(() => {
        const params = { ...this.$refs.form.getFieldsValue() }
        params.keyId = params.keyId[0].id
        params.belongOrgId = this.belongOrgId
        SysparamsService.saveSysclassify(params).then(() => {
          this.visible = false
          this.$refs.table.refresh()
          this.$refs.tree.refresh()
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.full-height {
  height: 100%;
  :global .ant-card-body {
    height: 100%;
    overflow: auto;
  }
}
</style>
