<template>
  <div id="user-select-tree">
    <!--<a-button type="primary" @click="showUserSelectModal">选择用户</a-button>-->
    <div @click="showUserSelectModal" style="padding: 5px 8px;width: 100%;min-height: 30px;border: 1px #cccccc solid;">
      <template v-for="user of selectedUserObjList">
        <a-tag :key="user.id">{{user.name}}</a-tag>
      </template>
    </div>
    <a-modal
      v-model="userSelectVisible"
      :width="700"
      style="top: 20px;"
      :destroyOnClose="true"
      @ok="handleUserSelectOk"
      @cancel="handleUserSelectCancel"
    >
      <div class="title" slot="title">
        <span>选择人员<span style="color: #00000073">(可多选)</span></span>
      </div>
      <user-select-tree
        v-if="gData"
        ref="userSelectTree"
        :gData="gData"
        v-model="approverSelectData"
      ></user-select-tree>
    </a-modal>
  </div>
</template>

<script>
  import { Ellipsis } from '@/components'
  import ACol from 'ant-design-vue/es/grid/Col';
  import ARow from 'ant-design-vue/es/grid/Row';
  import userSelectTree from '@/views/taskTemplate/taskDesign/taskFlow/component/user-select-tree';
  import { userTree } from '@/api/task';

  /**
   * 将用户数据转换为list
   * @param data
   */
  let userDataList = []
  const generateUserList = (data) => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i]
      const userList = node.userList
      userDataList = [...userDataList, ...userList]
      if (node.children) {
        generateUserList(node.children, node.key)
      }
    }
  }
  /**
   * 格式化数据为  a-tree 可用的数据
   * @param list
   * @returns {*}
   */
  function t(list) {
    let arr = list
    for (var i = 0; i < arr.length; i++) {
      const obj = {
        slots: {
          icon: 'folder'
        }
      }
      if (arr[i].childDeptTreeResDTOS) {
        obj.children = t(arr[i].childDeptTreeResDTOS);
      }
      arr[i].deptName && (obj.userList = arr[i].userInfoList)
      arr[i].deptName && (obj.title = arr[i].deptName);
      arr[i].deptId && (obj.key = arr[i].deptId);
      arr[i] = obj;
    }
    return arr;
  }

  export default {
    name: 'UserSelectTreeInput',
    components: {
      ARow,
      ACol,
      Ellipsis,
      userSelectTree
    },
    model: {
      prop: 'selectedKeys',
      event: 'change'
    },
    props: {
      selectedKeys: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        userSelectVisible: false,
        approverSelectData: [1042237480110104577, 1042237480391122946],
        approver: this.selectedKeys,
        selectedUserObjList: [],
        selectedUserObjListFromComponent: [],
        gData: []
      }
    },
    computed: {},
    methods: {
      /**
       * 展示用户选择弹出框
       */
      showUserSelectModal() {
        this.approverSelectData = [...this.approver]
        this.userSelectVisible = true
      },
      handleUserSelectOk(e) {
        this.approver = [...this.approverSelectData]
        console.log('approver', this.approver)
        this.selectedUserObjList = this.approverSelectData.map(id => {
          return userDataList.find(user => {
            return user.id === id
          })
        })
        this.userSelectVisible = false
        this.$emit('change', this.approver)
      },
      handleUserSelectCancel(e) {
        this.approverSelectData = [...this.approver]
      },
      getUserTreeData() {
        return userTree().then(res => {
          const list = [res.data]
          const treeData = list
          this.gData = t(treeData)
        })
      },
    },
    async mounted() {
      await this.getUserTreeData()
      generateUserList(this.gData)
      this.selectedUserObjList = this.selectedKeys.map(id => {
        return userDataList.find(user => {
          return user.id === id
        })
      })
    }
  }
</script>

<style lang="less" scoped>
  .wrap {
    height: 453px;
  }

  .tree {
    overflow: hidden;
  }

  .left .usertree {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .left .userlist, .right .userlist {
    max-height: 390px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .wrap > .content {
    /*flex: 1;*/
    /*padding: 20px;*/
    display: flex;
  }

  .wrap > .content > div {
    /*flex: 1;*/
    padding: 20px;
    width: 100%;
  }

  .wrap .right .user {
    display: block;
    position: relative;
    margin-bottom: 5px;
  }

  .wrap .right .user /deep/ .anticon-close {
    position: absolute;
    right: 3px;
    line-height: 22px;
  }

  .userlist .list .user {
    padding: 4px 15px;
    cursor: pointer;
  }

  .userlist .list .user .username {
    cursor: pointer;
    transition: color .3s linear 0s;
  }

  .userlist .list .username:hover {
    cursor: pointer;
    font-weight: bold;
    color: #2eabff;
  }
</style>
