<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <km-favorites-tree
        ref="tree"
        :class="$style.lefttree"
        @treeSelectd="treeSelectd"
      ></km-favorites-tree>
      <div :class="$style.rightcard">
        <a-card>
          <sd-oa-table
            v-if="expressions.length > 0"
            ref="favoritiesTable"
            form-id="kmBookmarkFolder"
            page-id="comp/bookmark/kmBookmarkFolder"
            :columns="columns"
            show-selection
            :actions="actions"
            :search-fields="['folderName']"
            :filter-expressions="expressions"
            :modal-props="{ width: 500 }"
            @recordSaved="onRecordSaved"
            @recordsDeleted="onRecordsDeleted"
          >
            <a slot="name" slot-scope="text, record" @click="rowClick(record)">
              {{ text }}
            </a>
            <!-- 新建/编辑弹窗 -->
            <template v-slot:form="{ model }">
              <sd-form-item name="folderName"></sd-form-item>
              <sd-form-item name="sortNumber"></sd-form-item>
              <sd-form-item name="parentId" :input-props="{ defaultValue: selectdParentId }">
                <a-tree-select
                  v-model="model.parentId"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="modelTreeData"
                  :replace-fields="replacefields"
                  :default-value="selectdParentId"
                  placeholder="请选择上级分类"
                  tree-default-expand-all
                  @select="modelSelected"
                >
                </a-tree-select>
              </sd-form-item>
              <sd-form-item name="belongedOrgId" :hidden="true"></sd-form-item>
              <sd-form-item name="id" :hidden="true"></sd-form-item>
            </template>
          </sd-oa-table>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import TableActionTypes from '@/common/services/table-action-types'
import KmKnowledageService from '../km-knowledage-service'
import components from './_import-components/km-favorites-maintain-import'
const columns = [
  {
    title: '名称',
    dataIndex: 'folderName',
    scopedSlots: { customRender: 'name' },
    sdClickable: true,
  },
  {
    title: '排序号',
    dataIndex: 'sortNumber',
    defaultSortOrder: 'asc', // 默认按排序号正序排列
  },
  {
    title: '创建时间',
    dataIndex: 'creationTime',
    sdRender: TableColumnTypes.dateTime,
    sorter: true,
    defaultSortOrder: 'asc',
  },
]
export default {
  name: 'KmFavoritesMaintain',
  metaInfo: {
    title: '收藏夹维护',
  },
  components,
  data() {
    return {
      columns,
      modelTreeData: [], // 弹窗下拉框树
      replacefields: {
        // 转换弹出框中选择树的默认字段
        title: 'text',
        key: 'id',
        value: 'id',
      },
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.oa.create,
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.oa.delete, // 删除按钮，不需要回调，会自动处理（对sd-data-table无效）
        },
      ],
      selectdParentId: null,
      expressions: [],
      currentId: null,
      leftTreeId: null,
    }
  },
  watch: {
    leftTreeId(val) {
      if (val) {
        this.selectdParentId = parseInt(val)
      }
    },
  },
  created() {
    this.getModalData()
  },
  methods: {
    // 递归处理treeData的id
    handleData(data) {
      data.map((k) => {
        k.id = parseInt(k.id)
        if (this.currentId === k.id) {
          k.disabled = true
          k.isLeaf = true
          delete k.children
        }
        if (k.children) {
          this.handleData(k.children)
        }
        return k
      })
    },
    // 左侧树选择节点后获取列表数据
    treeSelectd(id) {
      if (id.length < 1) return
      this.leftTreeId = parseInt(id)
      const filter = [
        {
          dataType: 'str',
          name: 'creatorAccount',
          op: 'eq',
          stringValue: '@@{currentUser}@@',
        },
        {
          dataType: 'long',
          name: 'parentId',
          op: 'eq',
          longValue: parseInt(id),
        },
      ]
      this.expressions = filter
    },
    // 弹窗下拉框选择
    modelSelected(value, node, extra) {
      this.selectdParentId = parseInt(value)
    },
    // 保存成功后刷新树
    onRecordSaved() {
      this.$refs.tree.refresh(this.selectdParentId)
      this.getModalData()
    },
    // 删除成功后刷新树
    onRecordsDeleted() {
      this.$refs.tree.refresh(this.selectdParentId)
      this.getModalData()
    },
    rowClick(record) {
      this.currentId = record.id
      this.getModalData()
    },
    getModalData() {
      KmKnowledageService.getFavoritesTree(0).then((res) => {
        if (res.data) {
          const data = res.data
          this.handleData(data)
          this.modelTreeData = data
        }
      })
    },
  },
}
</script>

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