<!--
  @description:切换角色部门弹框
  @Modifier: haofengxian/肖文龙
  @routerPath:
  @date: 2020-7-13-15:14
-->
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="title"
    top="calc((100vh - 400px) / 2)"
    width="400px"
  >
    <div class="mb16">
      <table class="from_table">
        <tr>
          <td>用户名</td>
          <td colspan="3">
            {{ userName }}
          </td>
        </tr>
        <tr v-if="departList.length>0">
          <td>部门</td>
          <td colspan="3">
            <el-select
              v-model="currentDepartId"
              filterable
              style="width:100%"
              placeholder="请选择"
              @change="departChange"
            >
              <el-option
                v-for="item in departList"
                :key="item.departId"
                :label="item.departName"
                :value="item.departId"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>角色</td>
          <td colspan="3">
            <el-select
              v-for="(item,index) in departList"
              v-if="currentDepartId===item.departId"
              :key="index"
              v-model="currentRoleId"
              filterable
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="(roleitem) in item.selectRoleListByUserIdVos"
                :key="roleitem.roleId"
                :label="roleitem.roleName"
                :value="roleitem.roleId"
              />
            </el-select>
          </td>
        </tr>
      </table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="departOk">确 定</el-button>
      <el-button @click="deselect">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { selectDepartListAndRoleListByUserId, switchRoleDepart } from '@api/common/user'
/* 常用方法 */
import { setToken } from '@/assets/js/utils/auth'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      loginForm: {
        userName: '', // 用户名
        accessToken: '' // 用户token
      }, // 登录时选择组织机构的信息
      title: '', // 弹框表头
      userName: '', // 当前用户名
      accessToken: '', // token
      dialogVisible: false, // 控制是否打开切换角色弹框
      currentDepartId: '', // 当前部门id
      currentRoleId: '', // 当前角色id
      departList: [] // 机构列表
    }
  },
  computed: {
    ...mapGetters(['info'])
  },
  watch: {
    // 控制是否打开切换角色弹框
    dialogVisible(val) {
      this.$emit('dialogChange', val)
    }
  },
  methods: {
    // 打开弹框操作切换用户角色
    openSwitchRoleDepartDialog(loginForm) {
      this.loginForm = loginForm
      if (loginForm) {
        // 登陆时的选择角色
        this.title = '请选择组织机构'// 弹框表头
        this.userName = loginForm && loginForm.userName// 用户名
        this.accessToken = loginForm.accessToken// token
      } else {
        // 登陆之后的切换角色
        this.title = '切换角色'// 弹框表头
        this.userName = this.info && this.info.userName// 用户名
        this.currentDepartId = this.info && this.info.currentDepart && this.info.currentDepart.id // 当前部门
        this.currentRoleId = this.info && this.info.currentRol && this.info.currentRol.id // 当前角色
      }
      this.dialogVisible = true // 打开弹框
      this.getSelectDepartListAndRoleList()
    },
    // 查询该用户已有的角色列表和用户列表
    getSelectDepartListAndRoleList() {
      selectDepartListAndRoleListByUserId(this.accessToken).then(res => {
        const { data: { selectDepartListByUserIdVos }} = res
        this.departList = selectDepartListByUserIdVos // 机构列表
        // 为空时-设置默认部门
        if (!this.currentDepartId) this.currentDepartId = this.departList[0] && this.departList[0].departId
        // 为空时-设置默认角色
        if (!this.currentRoleId) {
          // 第一个部门的第一个角色列表 设置一个为默认角色
          const roleList = this.departList[0] && this.departList[0].selectRoleListByUserIdVos
          this.currentRoleId = roleList[0] && roleList[0].roleId
        }
      })
    },
    // 确认切换角色部门
    departOk() {
      const params = {
        data: {
          orgId: this.currentDepartId, // 当前部门id
          roleId: this.currentRoleId // 当前角色id
        },
        accessToken: this.accessToken
      }
      switchRoleDepart(params).then(res => {
        this.accessToken && setToken(this.accessToken) // 存储用户Token
        // 重新获取用户信息
        this.$store.dispatch('setUserInfo').then(() => {
          // 关闭弹框
          this.dialogVisible = false
        })
      }).catch(() => {
      })
    },
    // 取消选择
    deselect() {
      this.currentDepartId = '' // 当前部门id
      this.currentRoleId = '' // 当前角色id
      this.dialogVisible = false
    },
    // 选择部门触发
    departChange(val) {
      // 当改变父级状态时将子级数据清空
      this.currentRoleId = ''
      if (this.departList.length > 0) {
        const departIdInfo = this.departList.filter(i => val === i.departId)
        const roleList = departIdInfo.length > 0 && departIdInfo[0].selectRoleListByUserIdVos
        this.currentRoleId = roleList[0] && roleList[0].roleId
      }
    }
  }
}
</script>

<style scoped>

</style>
