<template>
  <div id="role-select-tree">
    <!--<a-button type="primary" @click="showUserSelectModal">选择用户</a-button>-->
    <div @click="showRoleSelectModal" style="padding: 5px 8px;width: 100%;min-height: 30px;border: 1px #cccccc solid;">
      <template v-for="role of selectedRoleObjList">
        <a-tag :key="role.key">{{ role.title }}</a-tag>
      </template>
    </div>
    <a-modal
      v-model="roleSelectVisible"
      :width="700"
      style="top: 20px;"
      :destroyOnClose="true"
      @ok="handleRoleSelectOk"
      @cancel="handleRoleSelectCancel"
    >
      <div class="title" slot="title">
        <span>选择角色</span>
      </div>
      <role-select-tree
        v-if="gData"
        ref="roleSelectTree"
        :gData="gData"
        v-model="selectedData"
      ></role-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 roleSelectTree from '@/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree';
  import { roleTree } from '@/api/task';

  const dataList = [];
  const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const key = node.key;
      dataList.push({ key, title: node.title });
      if (node.children) {
        generateList(node.children, node.key);
      }
    }
  };
  /**
   * 格式化数据为  a-tree 可用的数据
   * @param list
   * @returns {*}
   */
  function t(list) {
    const 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: 'roleSelectTreeInput',
    components: {
      ARow,
      ACol,
      Ellipsis,
      roleSelectTree
    },
    model: {
      prop: 'selectedKeys',
      event: 'change'
    },
    props: {
      selectedKeys: {
        type: Array,
        default: function() {
          return [];
        }
      }
    },
    data() {
      return {
        roleSelectVisible: false,
        selectedData: [1042237480110104577, 1042237480391122946],
        selectedRoles: this.selectedKeys,
        selectedRoleObjList: [],
        selectedRoleObjListFromComponent: [],
        gData: []
      };
    },
    computed: {},
    methods: {
      /**
       * 展示角色选择弹出框
       */
      showRoleSelectModal() {
        this.selectedData = [...this.selectedRoles];
        this.roleSelectVisible = true;
      },
      handleRoleSelectOk(e) {
        this.selectedRoles = [...this.selectedData];
        this.selectedRoleObjList = this.selectedData.map(key => {
          return dataList.find(role => {
            return role.key === key;
          });
        });
        this.roleSelectVisible = false;
        this.$emit('change', this.selectedRoles);
      },
      handleRoleSelectCancel(e) {
        this.selectedData = [...this.selectedRoles];
      },
      getRoleTreeData() {
        return roleTree().then(res => {
          const list = res.data[0].roles || [];
          const treeData = list.map(role => {
            const obj = Object.assign({}, {
              key: role.id,
              title: role.name,
              children: role.roles ? (role.roles.map(cRole => {
                const cObj = Object.assign({}, {
                  key: cRole.id,
                  title: cRole.name
                });
                return cObj;
              })) : []
            });
            return obj;
          });
          this.gData = treeData;
        });
      }
    },
    async mounted() {
      await this.getRoleTreeData();
      generateList(this.gData);
      // this.selectedUserObjList = this.selectedKeys.map(id => {
      //   return userDataList.find(user => {
      //     return user.id === id
      //   })
      // })
      this.selectedRoleObjList = this.selectedKeys.map(key => {
        return dataList.find(role => {
          return role.key === key;
        });
      });
    },
    watch: {
      /* 为了实时响应加上的 */
      selectedKeys: {
        handler: async function(val, oldVal) {
          await this.getRoleTreeData();
          generateList(this.gData);
          this.selectedRoleObjList = this.selectedKeys.map(key => {
            return dataList.find(role => {
              return role.key === key;
            });
          });
        },
        deep: true
      }
    }
  };
</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>
