<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, account_password_valid } 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, validator:account_password_valid, trigger: "blur" }],
        userPassword: [
          { required: true,validator:account_password_valid, 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" },
        ],
        userAdmin: [{ required: true, validator: account_password_valid, trigger: "blur" }],
        userPassword: [{ required: true, validator: account_password_valid, 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>