<template>
  <!-- 添加员工 -->
  <div class="container">
    <el-row>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form
          :model="staffData"
          :rules="rules"
          ref="form"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="员工姓名" prop="userName">
            <el-input v-model="staffData.userName"></el-input>
          </el-form-item>
          <el-form-item label="员工性别" prop="userSex">
            <el-select v-model="staffData.userSex" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工账号" prop="userAdmin">
            <el-input v-model="staffData.userAdmin"></el-input>
          </el-form-item>
          <el-form-item label="员工密码" prop="userPassword">
            <el-input v-model="staffData.userPassword"></el-input>
          </el-form-item>
          <el-form-item label="员工手机号" prop="userPhone">
            <el-input v-model="staffData.userPhone"></el-input>
          </el-form-item>
          <el-form-item label="员工身份证" prop="userIdentification">
            <el-input v-model="staffData.userIdentification"></el-input>
          </el-form-item>
          <el-form-item label="员工银行卡号" prop="userBankNumber">
            <el-input v-model="staffData.userBankNumber"></el-input>
          </el-form-item>
          <el-form-item label="员工开户银行" prop="userBankAddress">
            <el-input v-model="staffData.userBankAddress"></el-input>
          </el-form-item>
          <el-form-item label="员工权限" prop="roles">
            <el-checkbox-group v-model="staffData.roles">
              <el-checkbox v-for="item in rolesList" :key="item.rlId" :label="item.rlId" name="type">{{item.rlName}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-upload2" @click="update()">提交</el-button>
            <el-button type="info" icon="el-icon-refresh-left" @click="reset">重置信息</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {chinaIdentityValid,bankAccountValid,checkPhone} from '@/utils/myValidate'
import { selectAllByCompanyId} from '@/api/role'
import {insertStaff} from '@/api/user'
export default {
  data() {
    return {
      staffData: {
        companyId:null,
        userName:null,
        userSex:null,
        userAdmin:null,
        userPassword:null,
        userPhone:null,
        userIdentification:null,
        userBankNumber:null,
        userBankAddress:null,
        roles:[],
      },
      rolesList:[],
      options: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 0,
          label: "女",
        },
      ],
      rules: {
        userName: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
        ],
        userSex: [{ required: true, message: "请选择员工性别", trigger: "change" }],
        userAdmin: [{ required: true, message: "请输入员工账号", trigger: "blur" }],
        userPassword: [
          { required: true, message: "请输入员工密码", trigger: "blur" },
        ],
        userPhone: [
          {required:true, validator:checkPhone, trigger: ['blur', 'change']},
        ],
        userIdentification: [
          {required:true, validator:chinaIdentityValid, trigger:'blur'},
        ],
        userBankNumber: [
          {required:true, validator:bankAccountValid, trigger:'blur'},
        ],
        userBankAddress: [
          { required: true, message: "请输入员工开户行", trigger: "blur" },
        ],
        roles:[
          { type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' }
        ]
      },
    }
  },
  created(){
    this.staffData.companyId=this.$store.getters.companyId;
    //获取权限
    this.getRoles();
  },
  methods:{
    getRoles() {
      selectAllByCompanyId({companyId:this.$store.getters.companyId}).then((res)=>{
        if(res.status == "success"){
          this.rolesList = res.data
        }else{
          this.$message.error(res.data)
        }
      }).catch((error)=>{
        this.$message.error("查询角色失败")
      })
    },
    //重置数据
    reset(){
      this.$refs.form.resetFields()
    },
    //提交数据
    update(){
      //先校验
      this.$refs.form.validate((valida)=>{
        if(valida){
          //提交
          insertStaff(this.staffData).then((res)=>{
            if(res.status == "success"){
              this.$message.success("添加成功")
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.push("/staffList")
            }else{
              this.$message.error(res.data)
            }
          }).catch((error)=>{
            this.$message.error("添加失败")
          })
        }
      })

    },
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
}
</style>