<template>
  <div>
    <a-card :class="{ [$style.tree]: 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: 'name', key: 'code' }"
        @update:selectedKeys="setSelectedKeys"
      >
        <a-icon slot="G" type="apartment" />
      </a-tree>
      <a-empty v-else />
    </a-card>
    <sd-picker-source-list
      v-if="keys[0]"
      :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 { Modal, Message } from 'ant-design-vue'
import components from './_import-components/sd-picker-users-by-usergroup-import'
export default {
  name: 'SdPickerUsersByUsergroup',
  metaInfo: {},
  components,
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    secretLevel: {
      type: String,
      default: '',
    },
    single: {
      type: Boolean,
      default: undefined,
    },
  },
  data() {
    return {
      keys: [],
      prevKeys: [], // 树组件上一次选中节点
      treeData: [],
    }
  },

  created() {
    this.updateTree()
  },
  methods: {
    loadListData() {
      return AddressBook.getUserGroupsMembers(this.keys[0], { secretLevel: this.secretLevel })
    },
    // 树组件节点，二次选择节点不取消节点选中，重置为上一次选中节点
    setSelectedKeys(val) {
      if (val.length === 0) {
        this.keys = this.prevKeys
      } else {
        this.prevKeys = val
      }
    },
    // 删除个人群组
    userGroupDel(code) {
      Modal.confirm({
        content: '本操作将删除所选个人群组，请确认？',
        okText: '删除',
        okType: 'danger',
        onOk: () => {
          // 调用删除接口
          AddressBook.delGroupById({ ids: code.replace('Ugrz', '') })
            .then((res) => {
              // 更新个人群组信息
              this.updateTree()
            })
            .catch((error) => {
              Message.error({ content: '个人群组删除失败：' + error })
            })
        },
      })
    },
    updateTree() {
      AddressBook.getUserGroups().then((data) => {
        if (data.length) {
          this.keys = [data[0].code]
          this.prevKeys = [data[0].code]
          data.forEach((item) => {
            item.name = [
              <span class={this.$style.title} title={item.name}>
                {item.name}
              </span>,
              <a-button
                type='link'
                icon='sd-trash2'
                size='small'
                vOn:click_stop_prevent={() => this.userGroupDel(item.code)}
              ></a-button>,
            ]
          })
        }
        this.treeData = data
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.tree {
  position: absolute;
  top: -41px;
  left: -285px;
  width: 275px;
  height: calc(100% + 42px);
  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;
  }
  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;
    }
  }
}
.tree.single {
  top: 0;
  height: 100%;
}
</style>
