<template>
  <Modal class-name="v-modal v-user-modal center" v-model="visible" title="编辑用户" :mask-closable="false" width="750px"
    :fullscreen="true" :footer-hide="true">
    <v-title title="基本信息" :fold="foldArr[0]" @click-title="toggle(0)"></v-title>
    <div class="user-status" :class="useStatusClass">{{userDetail.useStatusDesc}}</div>
    <div class="content-box basic-info" :class="{ fold: foldArr[0] }">
      <div class="info-item tel">用户姓名：{{userDetail.userName}}</div>
      <div class="info-item tel" v-if="platId === 'general'">用户昵称：{{userDetail.nickname}}</div>
      <div class="info-item tel">手机号：{{userDetail.phone}}</div>
      <div class="info-item tel" v-if="platId !== 'general'">邮箱：{{userDetail.email}}</div>
    </div>
    <!-- 综合管理台 -->
    <template v-if="platId === 'general'">
      <v-title title="系统权限分配" :fold="foldArr[1]" @click-title="toggle(1)"></v-title>
      <div class="permission-list no-p content-box" :class="{ fold: foldArr[1] }">
        <Checkbox v-model="item.checked" v-for="(item, index) in userDetail.sysPermissions" :key="index" size="large">{{item.sysPermissionName}}</Checkbox>
      </div>
      <v-title title="业务系统分配" v-if="userDetail.businessRoles.length" :fold="foldArr[2]" @click-title="toggle(2)"></v-title>
      <system-list :list="userDetail.businessRoles" :class="{ fold: foldArr[2] }"></system-list>
    </template>
    <!-- 非综合管理台 -->
    <template v-else>
      <v-title title="角色分配" :fold="foldArr[3]" @click-title="toggle(3)"></v-title>
      <div class="permission-list no-p content-box" :class="{ fold: foldArr[3] }" v-if="userDetail.businessRoles.length">
        <Checkbox v-model="item.checked" v-for="(item, index) in userDetail.businessRoles[0].sysRoles" :key="index"
          size="large">{{item.name}}</Checkbox>
      </div>
    </template>
    <v-title title="机构分配" :fold="foldArr[4]" @click-title="toggle(4)"></v-title>
    <group-tree ref="group-tree" class="content-box" :class="{ fold: foldArr[4] }" v-model="userDetail.orgIds"></group-tree>
    <div class='action-wrap'>
      <Button @click="esc">取消</Button>
      <Button type="primary" @click="confirm" :loading="btnLoading" :disabled="btnLoading">确定</Button>
    </div>
    <Spin size="large" fix v-if="loading"></Spin>
  </Modal>
</template>
<script>
import groupTree from '../whitelist-manage/group-tree'
import systemList from '../whitelist-manage/system-list'
import vTitle from '../v-title'
import user from '../../apis/user'

export default {
  props: {
    userId: {
      type: String
    }
  },
  data () {
    return {
      platId: window.$CONFIG.platId,
      userDetail: {
        userName: '',
        nickname: '',
        phone: '',
        email: '',
        sysPermissions: [],
        businessRoles: [],
        orgIds: []
      },
      foldArr: [false, false, false, false, false],
      visible: false,
      loading: false,
      btnLoading: false
    }
  },
  computed: {
    useStatusClass () {
      let className = ''
      let useStatus = this.userDetail.useStatus
      switch (useStatus) {
        case 0:
          className = 'success'
          break
        case 1:
          className = 'error'
          break
        case 2:
          className = 'warning'
          break
        default:
          className = ''
      }
      return className
    }
  },
  methods: {
    openModal () {
      this.visible = true
      this.btnLoading = false
      this.getUserDetail()
    },
    async getUserDetail () {
      try {
        this.loading = true
        let res = await user.userDetail(this.userId)
        this.userDetail = res.data
        if (!this.userDetail.orgIds) {
          this.userDetail.orgIds = []
        }
        this.$refs['group-tree'].getTreeData()
        this.loading = false
      } catch (e) {
        this.loading = false
      }
    },
    toggle (index) {
      this.foldArr.splice(index, 1, !this.foldArr[index])
    },
    async confirm () {
      if (!this.userDetail.orgIds.length) {
        this.$Message.error('请为用户至少分配一个机构')
        return false
      }
      try {
        this.btnLoading = true
        await user.changeSysRoles(this.userDetail)
        this.$Message.success('提交成功')
        this.$emit('success')
        this.esc()
      } catch (e) {
        this.btnLoading = false
      }
    },
    esc () {
      this.visible = false
    }
  },
  components: {
    groupTree,
    systemList,
    vTitle
  }
}
</script>
