<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">
      <FormItem label="手机号" required>
        <Input v-model.trim="userDetail.phone" :maxlength="11" placeholder="请输入手机号" clearable />
      </FormItem>
    </Form>
    <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>
    <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 './group-tree'
import systemList from './system-list'
import vTitle from '../v-title'
import whiteList from '../../apis/whiteList'
import validate from '../../utils/validate'

export default {
  data () {
    return {
      userDetail: {
        phone: '',
        sysPermissions: [],
        businessRoles: [],
        orgIds: []
      },
      formOptions: {
        labelWidth: 70,
        size: 'large'
      },
      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
        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.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 { phone, orgIds = [] } = this.userDetail
      if (!validate.isPhone(phone)) {
        this.$Message.error('请填写正确的手机号')
        return false
      }
      if (!orgIds.length) {
        this.$Message.error('请为用户至少分配一个机构')
        return false
      }
      return true
    }
  },
  components: {
    groupTree,
    systemList,
    vTitle
  }
}
</script>