<template>
  <div>
    <a-card :class="{ [$style.tree]: true, [$style.single]: single }" bordered size="small">
      <span slot="extra" size="small">部门</span>
      <sd-group-tree
        :default-selected-keys="['SD-CUR-GROUP']"
        :root-node="rootNode"
        :hierarchical="hierarchical"
        @update:selectedKeys="handleTreeSelect"
      />
    </a-card>
    <a-card :class="{ [$style.group]: true, [$style.single]: single }" bordered size="small">
      <span slot="extra" size="small">群组</span>
      <a-tree
        v-if="treeData.length > 0"
        :selectable="true"
        :selected-keys.sync="keys"
        :tree-data="treeData"
        :replace-fields="{ title: 'text', key: 'id' }"
        @update:selectedKeys="setSelectedKeys"
      >
        <a-icon slot="G" type="apartment" />
      </a-tree>
      <a-empty v-else />
    </a-card>
    <sd-picker-source-list
      :key="keys[0]"
      :single="single"
      v-bind="$attrs"
      :load-list-data="() => loadListData()"
      :show-search="false"
      v-on="$listeners"
    />
  </div>
</template>

<script>
import AddressBook from '@/addressbook/group-user-service'
import axios from '@/common/services/axios-instance'
import components from './_import-components/sd-picker-users-by-depgroup-import'
export default {
  name: 'SdPickerUsersByDepgroup',
  metaInfo: {},
  components,
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    rootNode: {
      type: [Object, Array],
      default: () => ({}),
    },
    hierarchical: {
      type: Boolean,
      default: undefined,
    },
    secretLevel: {
      type: String,
      default: '',
    },
    single: {
      type: Boolean,
      default: undefined,
    },
  },
  data() {
    return {
      keys: [],
      prevKeys: [], // 树组件上一次选中节点
      treeData: [],
    }
  },

  created() {},
  methods: {
    handleTreeSelect(keys) {
      axios
        .get(`api/framework/v1/group-manager/groups/${keys[0]}/usergroups?orderBy=weight asc`)
        .then((res) => {
          const data = res.data || []
          if (data.length) {
            data.forEach((item) => {
              item.name = [
                <span class={this.$style.title} title={item.name}>
                  {item.name}
                </span>,
              ]
            })
          }
          this.treeData = data
          this.keys = data[0] ? [data[0].id] : []
          this.prevKeys = data[0] ? [data[0].id] : []
        })
    },
    loadListData() {
      if (this.keys.length === 0) return []
      return AddressBook.getDepUserGroupsMembers(this.keys[0], { secretLevel: this.secretLevel })
    },
    // 树组件节点，二次选择节点不取消节点选中，重置为上一次选中节点
    setSelectedKeys(val) {
      if (val.length === 0) {
        this.keys = this.prevKeys
      } else {
        this.prevKeys = val
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.group {
  position: absolute;
  top: -290px;
  width: 100%;
  height: 240px;
  overflow: hidden;
  div:global(.ant-card-body) {
    height: 199px;
    padding: 0;
    overflow: auto;
  }
  ul li {
    &:hover {
      background-color: $primary-1;
      button {
        display: inline;
      }
    }
    &:global(.ant-tree-treenode-selected) {
      background-color: $primary-2;
    }
    span {
      display: inline-block;
      width: 100%;
    }
    span .title {
      width: calc(100% - 24px);
      overflow: hidden;
    }
    button {
      display: none;
      float: right;
    }
    :global(.ant-tree-switcher) {
      display: none;
    }
    :global(.ant-tree-node-content-wrapper) {
      transition: none;
    }
  }
}
.single.group {
  top: -250px;
}
.tree {
  position: absolute;
  top: -291px;
  left: -285px;
  width: 275px;
  height: 500px;
  div:global(.ant-card-body) {
    height: calc(100% - 42px);
    padding: 0;
    > div {
      height: 100%;
      overflow: auto;
    }
  }
  :global(.ant-card-head > .ant-card-head-wrapper > .ant-card-head-title) {
    padding: 0;
    margin-right: 4px;
  }
}
.tree.single {
  top: -251px;
}
</style>
