<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <km-tree
        ref="tree"
        data-url="api/xcoa-mobile/v1/km-kmap-category/kmap-category-tree?pageId=kmKmapCategory"
        @treeSelectd="treeSelectd"
      />
      <div :class="$style.rightcard">
        <a-card>
          <a-skeleton v-if="expressions.length === 0" active :paragraph="{ rows: 16 }" />
          <sd-oa-table
            v-else
            ref="oaTable"
            form-id="kmKmapCategory"
            page-id="km/admin/kmKmapCategory"
            :columns="columns"
            show-selection
            :actions="actions"
            :search-fields="['name']"
            :filter-expressions="expressions"
            @recordSaved="onRecordSaved"
            @recordsDeleted="onRecordsDeleted"
          >
            <template v-slot:form>
              <sd-form-item name="name"></sd-form-item>
              <sd-form-item
                name="parentName"
                :input-props="{ defaultValue: selectdParentName, disabled: true }"
              ></sd-form-item>
              <sd-form-item
                :hidden="true"
                name="parentId"
                :input-props="{ defaultValue: selectdParentId }"
              ></sd-form-item>

              <sd-form-item name="sortNumber"></sd-form-item>
              <sd-form-item name="adminMember"></sd-form-item>
              <a-form-model-item label="分类查看范围"> </a-form-model-item>
              <sd-form-item name="viewAuthSubIncluded"></sd-form-item>
              <sd-form-item name="viewDept"></sd-form-item>
              <sd-form-item name="viewMember"></sd-form-item>
              <sd-form-item name="creatorName"></sd-form-item>
            </template>
          </sd-oa-table>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import TableActionTypes from '@/common/services/table-action-types'
import components from './_import-components/km-kmap-category-import'

const columns = [
  {
    title: '序号',
    align: 'center',
    width: '100px',
    dataIndex: 'sortNumber',
    defaultSortOrder: 'ascend',
  },
  {
    title: '分类名称',
    dataIndex: 'name',
    sdClickable: true,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '发布者名称',
    dataIndex: 'creatorName',
  },
  {
    title: '分类管理员',
    dataIndex: 'adminMember',
  },
]

export default {
  name: 'KmKmapCategory',
  metaInfo: {
    title: '知识地图分类维护',
  },
  components,
  data() {
    return {
      columns,
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.oa.create,
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.oa.delete, // 删除按钮，不需要回调，会自动处理（对sd-data-table无效）
        },
        {
          label: '维护顶结点',
          permission: 'kmKmapCategory-topNodeUpdate', // 纯前端操作，不需要权限控制
          id: 'editRoot', // 没写type，一般按钮
          callback: () => {
            this.fnEditRoot()
          },
        },
      ],

      selectdParentId: null,
      selectdParentName: null,
      expressions: [],
    }
  },
  methods: {
    // 树选择节点后获取列表数据
    treeSelectd(item) {
      if (item) {
        let parentId = ''
        let parentName = ''
        if (item.id !== undefined) {
          parentId = item.id
          parentName = item.text
        } else {
          parentId = item.selectedNodes[0].data.props.id
          parentName = item.selectedNodes[0].data.props.text
        }
        this.selectdParentId = parseInt(parentId)
        this.selectdParentName = parentName

        const filter = {
          dataType: 'str',
          name: 'parentId',
          op: 'eq',
          stringValue: this.selectdParentId,
        }

        this.expressions = [filter]
      } else {
        // 没有上级分类时parentId传-1
        const filter = {
          dataType: 'str',
          name: 'parentId',
          op: 'eq',
          stringValue: -1,
        }

        this.expressions = [filter]
        this.selectdParentId = 0
      }
    },

    // 保存成功后刷新树
    onRecordSaved() {
      this.$refs.tree.refresh()
    },
    // 删除成功后刷新树
    onRecordsDeleted() {
      this.$refs.tree.refresh()
    },

    // 维护树的顶结点（维护的是当前选中的节点的顶结点）
    fnEditRoot() {
      // 先判断是否有树，没有的话新建顶结点
      if (this.$refs.tree.treeData.length === 0) {
        this.selectdParentId = 0
        this.$refs.oaTable.showDetailModal()
      } else {
        // 有的话查找选中节点的顶结点
        const parentId = this.$refs.tree.getRootKey(this.selectdParentId)
        if (parentId) {
          this.$refs.oaTable.showDetailModal(parentId)
        }
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
    }
  }
}
</style>
