
<template>
  <div class="user-operation">
    <el-dialog
      :visible="visible"
      :title="`${type === 'add' ? '新增' : '修改'}账户`"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="rnr-dialog"
      width="960px"
      @close="$emit('update:visible', false)"
    >
      <el-form ref="formRef" :model="data" label-position="top">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item :rules="IS_NOT_EMPTY('请输入姓名')" prop="userName" label="姓名">
              <el-input v-model="data.userName" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="IS_NOT_EMPTY('请输入昵称')" prop="nickName" label="昵称">
              <el-input v-model="data.nickName" placeholder="请输入昵称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item :rules="[IS_NOT_EMPTY('请输入手机号'), IS_PHONE()]" prop="phone" label="手机号">
              <el-input v-model="data.phone" type="number" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="IS_NOT_EMPTY('请输入用户名')" prop="account" label="用户名">
              <el-input v-model="data.account" placeholder="请输入用户名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="type === 'add'">
          <el-col :span="12">
            <el-form-item :rules="[IS_NOT_EMPTY('请输入密码'), IS_RIGHT_PASSWORD()]" prop="password" label="密码">
              <el-input v-model="data.password" :placeholder="type === 'add' ? '请确认输入的密码' : '******'" type="password" />
              <div class="el-form-item__field-tip">密码长度必须为8～20位字符，由大写字母、小写字母、数字、特殊符号中的3种及以上类型组成</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[IS_NOT_EMPTY('请输入确认密码'), CONFIRM_PASSWORD]" prop="confirmPassword" label="确认密码">
              <el-input v-model="data.confirmPassword" :placeholder="type === 'add' ? '请确认输入的密码' : '******'" type="password"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item :rules="IS_NOT_EMPTY('请选择角色', 'change')" prop="roleCode" label="角色">
              <el-select v-model="data.roleCode" placeholder="请选择角色">
                <el-option v-for="role in roleList" :key="role.value" v-bind="role" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button :loading="isLoading" type="primary" @click="handleSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { queryRoListByOrganId, addUserEnterpriseAccount, updateUserEnterpriseAccount } from '@/api/management'
import { IS_NOT_EMPTY, IS_PHONE, CONFIRM_PASSWORD, IS_RIGHT_PASSWORD } from '../../rules'
import '../../dealer/dialog.scss'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      IS_NOT_EMPTY,
      IS_PHONE,
      IS_RIGHT_PASSWORD,
      isLoading: false,
      roleList: []
    }
  },
  computed: {
    /**
     * 确认密码
     */
    CONFIRM_PASSWORD() {
      return CONFIRM_PASSWORD(this.data.password)
    }
  },
  watch: {
    // 如果处于可见状态
    visible() {
      if (this.visible) {
        // 角色名称
        const { roleName } = this.data || {}
        // 处理数据
        this.roleList.forEach(role => {
          // 如果当前角色名称能匹配上
          if (roleName === role.label) {
            this.data.roleCode = role.value
          }
        })
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate()
        })
      }
    }
  },
  mounted() {
    this.queryRoListByOrganId()
  },
  methods: {
    /**
     * 通过组织id查询角色列表
     */
    async queryRoListByOrganId() {
      // 组织id
      const { organId } = this.$store.getters
      // 开始获取组织列表
      const list = await queryRoListByOrganId({
        organId: this.$route.query.organId || organId
      })
      this.roleList = list.map(role => {
        return {
          label: role.roleName,
          value: role.roleCode
        }
      })
    },

    /**
     * 点击关闭方法
     */
    handleClose() {
      this.$emit('update:visible', false)
    },

    /**
     * 点击提交方法
     */
    handleSubmit() {
      // 开始校验用户输入
      this.$refs.formRef.validate(async valid => {
        // 如果校验不成功
        if (!valid) {
          return
        }
        // 按钮出现loading状态
        this.isLoading = true
        try {
          // 如果当前需要新增
          if (this.type === 'add') {
            await addUserEnterpriseAccount(this.data)
          }
          // 如果当前需要修改
          if (this.type === 'edit') {
            await updateUserEnterpriseAccount(this.data)
          }
          // 关闭弹框
          this.handleClose()
          // 开始刷新页面
          this.$emit('refresh')
        } catch (error) {
          console.error(error)
        }
        // 关闭loading状态
        this.isLoading = false
      })
    }
  }
}
</script>
