<template>
  <div>
    <mt-show-input v-model="mtShowInputText"></mt-show-input>
    <!--<role-select-tree :gData="roleTree"></role-select-tree>-->
    <!--<user-select-tree :gData="userTree" v-if="userTree.length>0"></user-select-tree>-->
    <div id="role-select-tree">
      <a-button type="primary" @click="showRoleModal">角色选择框</a-button>
      <a-modal
        v-model="roleModalVisible"
        :width="700"
        style="top: 20px;"
        @ok="handleRoleModalOk"
      >
        <div class="title" slot="title">
          <span>添加角色</span>
        </div>
        <role-select-tree v-model="selectedRoleKeys"></role-select-tree>
      </a-modal>
    </div>
    <div id="user-select-tree">
      <a-button type="primary" @click="showUserModal">用户选择框</a-button>
      <div>
      </div>
      <a-modal
        v-model="userModalVisible"
        :width="700"
        style="top: 20px;"
        @ok="handleUserModalOk"
      >
        <div class="title" slot="title">
          <span>选择人员<span style="color: #00000073">(可多选)</span></span>
        </div>
        <user-select-tree v-model="selectedUserKeys"></user-select-tree>
      </a-modal>
    </div>
    <user-select-tree-input v-model="selectedUserKeys"></user-select-tree-input>
    <role-select-tree-input v-model="selectedRoleKeys"></role-select-tree-input>
  </div>

</template>

<script>
  import mtShowInput from '@comp/mt-show-input';
  import roleSelectTree from '@/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree';
  import userSelectTree from '@/views/taskTemplate/taskDesign/taskFlow/component/user-select-tree';
  import userSelectTreeInput from '@/views/taskTemplate/taskDesign/taskFlow/component/user-select-tree-input';
  import roleSelectTreeInput from '@/views/taskTemplate/taskDesign/taskFlow/component/role-select-tree-input';

  import { roleTree, userTree } from '@/api/task';

  export default {
    name: 'test',
    data() {
      return {
        userModalVisible: false,
        roleModalVisible: false,
        mtShowInputText: '王旭',
        roleTree: [],
        selectedUserKeys: [1042237480110104577, 1042237480391122946],
        selectedRoleKeys: ['1129624598993682434', '1133554212900167681'],
      }
    },
    components: {
      mtShowInput,
      roleSelectTree,
      userSelectTree,
      userSelectTreeInput,
      roleSelectTreeInput
    },
    methods: {
      showUserModal() {
        this.userModalVisible = true
      },
      handleUserModalOk(e) {
        console.log(e);
        this.userModalVisible = false
      },
      showRoleModal() {
        this.roleModalVisible = true
      },
      handleRoleModalOk(e) {
        console.log(e);
        this.roleModalVisible = false
      },
    },
    mounted() {
    }
  }
</script>

<style scoped>

</style>
