<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>
    <Form ref="form" :model="userDetail" :label-width="formOptions.labelWidth" :label-position="formOptions.position">
      <FormItem label="用户姓名" required>
        <Input v-model.trim="userDetail.userName" :maxlength="20" placeholder="请输入用户姓名" :size="formOptions.size" clearable />
      </FormItem>
      <FormItem label="手机号" required>
        <Input v-model.trim="userDetail.phone" :maxlength="11" placeholder="请输入手机号" :size="formOptions.size" clearable />
      </FormItem>
      <FormItem label="用户邮箱" required>
        <Input v-model.trim="userDetail.email" placeholder="邀请邮件将发送至此邮箱" :size="formOptions.size" clearable />
      </FormItem>
    </Form>
    <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>
    <v-title title="机构分配" :fold="foldArr[4]" @click-title="toggle(4)"></v-title>
    <group-tree ref="group-tree" class="content-box" :class="{ fold: foldArr[4] }" :org-id="userDetail.orgId"
      @check-change="selectOrg"></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 './group-tree'
import vTitle from '../v-title'
import whiteList from '../../apis/whiteList'
import validate from '../../utils/validate'

export default {
  data () {
    return {
      userDetail: {
        userName: '',
        phone: '',
        email: '',
        businessRoles: [],
        orgId: ''
      },
      formOptions: {
        labelWidth: 90,
        size: 'large',
        position: 'right'
      },
      foldArr: [false, false, false, false, false],
      visible: false,
      btnLoading: false,
      loading: false
    }
  },
  created () { },
  methods: {
    openModal () {
      this.visible = true
      this.btnLoading = false
      this.getUserDetail()
    },
    async getUserDetail () {
      try {
        this.loading = true
        let res = await whiteList.whiteListDetail()
        this.userDetail = res.data
        this.$refs['group-tree'].getTreeData()
        this.loading = false
      } catch (e) {
        this.loading = false
      }
    },
    selectOrg (orgId) {
      this.userDetail.orgId = orgId
    },
    toggle (index) {
      this.foldArr.splice(index, 1, !this.foldArr[index])
    },
    async confirm () {
      if (!this.checkInfo()) return
      try {
        this.btnLoading = true
        await whiteList.invite(this.userDetail)
        this.$Message.success('邀请成功')
        this.$emit('success')
        this.esc()
      } catch (e) {
        this.btnLoading = false
      }
    },
    esc () {
      this.visible = false
    },
    checkInfo () {
      let { userName, phone, orgId, email, businessRoles = [] } = this.userDetail
      if (!userName) {
        this.$Message.error('请填写用户姓名')
        return false
      }
      if (!validate.isPhone(phone)) {
        this.$Message.error('请填写正确的手机号')
        return false
      }
      if (!validate.isEmail(email)) {
        this.$Message.error('请填写正确的邮箱')
        return false
      }
      if (businessRoles[0].sysRoles.every(item => !item.checked)) {
        this.$Message.error('请为用户分配一个角色')
        return false
      }
      if (!orgId) {
        this.$Message.error('请为用户分配一个机构')
        return false
      }
      return true
    }
  },
  components: {
    groupTree,
    vTitle
  }
}
</script>