<template>
  <div class="org-person">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" label-position="top" class="rule-form-orange">
      <h2 style="font-weight: 400; width: 100%;">成员详情</h2>
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入姓名"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input
          v-model="ruleForm.idCard"
          placeholder="请输入身份证号"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          v-model="ruleForm.mobile"
          placeholder="请输入手机号"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="企业邮箱" prop="email">
        <el-input
          v-model="ruleForm.email"
          placeholder="请输入企业邮箱"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="登录名" prop="loginName">
        <el-input
          v-model="ruleForm.loginName"
          placeholder="请输入登录名"
          disabled
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="登录密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          placeholder="请输入登录密码"
          disabled
        ></el-input>
      </el-form-item> -->
      <el-form-item label="部门" prop="orgInfo" style="width: 100%;">
        <el-input
          v-model="ruleForm.orgInfo"
          placeholder="请选择部门"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="职级" prop="rank">
        <el-select v-model="ruleForm.rank" placeholder="请选择职级" disabled>
          <el-option
            v-for="item in pList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职位" prop="position">
        <el-input
          v-model="ruleForm.position"
          placeholder="请输入职位" disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="推荐码" prop="referenceNumber">
        <el-input
          v-model="ruleForm.referenceNumber"
          placeholder="请输入推荐码"
          disabled
        ></el-input>
      </el-form-item>
      <template v-if="ruleForm.orgIdList && ruleForm.orgIdList.length > 0">
        <el-form-item v-for="(item, index) in ruleForm.orgIdList" :key="item.id + '_' + index" 
          :label="`${item.name || item.label}身份`" style="width: 100%;">
          <el-radio-group v-model="item.userIdentity" disabled>
            <el-radio :label="false">普通员工</el-radio>
            <el-radio :label="true">负责人</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
    </el-form>
    <!-- <div class="submit-btn">
      <el-button type="normal" @click="$emit('close', 1)">取消</el-button>
    </div> -->
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    this.pList = []
    for(let i = 0; i < 15; i += 1) {
      this.pList.push(`P${i + 1}`)
    }
    const validateLoginName = (rule, value, callback) => {
      if(!value) {
        callback(new Error('请输入登录名'))
      } else {
        if(this.infoId) {
          callback()
        } else {
          request({
            url: '/user/validatorLoginName',
            method: 'get',
            params: {
              loginName: this.ruleForm.loginName
            }
          }).then(({ data }) => {
            if(data === false) {
              callback(new Error('登录名重复'))
            } else {
              callback()
            }
          }, err => {
            callback(new Error('登录名校验失败'))
          })
        }
      }
    }
    return {
      ruleForm: {
        name: '',
        mobile: '',
        email: '',
        loginName: '',
        password: '',
        position: '',
        rank: '',
        orgIdList: [],
        referenceNumber: '',
        idCard: '',
        orgInfo: ''
      },
      rules: {
        name: [{ required: false, message: '请请输入姓名', trigger: 'blur' }],
        mobile: [{ required: false, message: '请输入手机号', trigger: 'blur' }],
        idCard: [{ required: false, message: '请输入身份证号', trigger: 'blur' }],
        email: [{ required: false, message: '请输入企业邮箱', trigger: 'blur' }],
        loginName: [{ required: false, trigger: 'blur', validator: validateLoginName }],
        // password: [{ required: false, message: '请输入登录密码', trigger: 'blur' }],
        rank: [{ required: false, message: '请选择职级', trigger: 'change' }],
        orgIdList: [{ required: false, message: '请选择部门', trigger: 'change' }],
        orgInfo: [{ required: false, message: '请选择部门', trigger: 'change' }]
      },
      uploadParams: {},
      orgIds: [],
      orgListInfo: [],
      title: '添加成员',
      infoId: ''
    }
  },
  props: ["personInfo"],
  mounted() {},
  methods: {},
  watch: {
    'personInfo.id': {
      handler(val) {
        if(val) {
          Object.keys(this.ruleForm).forEach(key => {
            if(key !== 'orgIdList' && this.personInfo[key]) {
              this.ruleForm[key] = this.personInfo[key]
            }
          })
          this.ruleForm.orgInfo = this.personInfo.userOrgRelList.map(item => item.orgName).join(',')
          this.title = '成员详情'
          this.infoId = this.personInfo.id
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
.org-person {
  padding: 20px 0 20px 20px;
}
</style>