<template>
  <div class="container">
    <el-row :gutter="40">
      <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" disabled></el-input>
          </el-form-item>
          <el-form-item label="员工性别" prop="userSex">
            <el-select v-model="staffData.userSex" placeholder="请选择"  disabled>
              <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" disabled></el-input>
          </el-form-item>
          <el-form-item label="员工手机号" prop="userPhone">
            <el-input v-model="staffData.userPhone"  disabled></el-input>
          </el-form-item>
          <el-form-item label="员工身份证" prop="userIdentification">
            <el-input v-model="staffData.userIdentification"  disabled></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>
            <el-button type="success" icon="el-icon-upload2" @click="update()">提交</el-button>
            <el-button type="info" icon="el-icon-refresh-left" @click="cancel()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <div class="password">
          <p class="title">强制修改密码:</p>
          <el-input v-model="password"></el-input>
          <el-button style="margin-top:10px" type="primary" @click="updatePassword()">确认修改</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {chinaIdentityValid,bankAccountValid,checkPhone} from '@/utils/myValidate'
import { getRoles} from '@/api/role'
import {getOneself,update,staffpassword} from '@/api/user'
export default {
  data(){
    return{
      password:'',
      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: {
        userBankNumber: [
          { required:true, validator:bankAccountValid, trigger:'blur'},
        ],
        userBankAddress: [
          { required: true, message: "请输入员工开户行", trigger: "blur" },
        ],
        roles:[
          { type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' }
        ]
      },
    }
  },
  computed:{
    userId(){
      return this.$route.query.id
    }
  },
  created(){

    this.getStaff()
  },
  methods:{

    getStaff(){
      getOneself({userId:this.userId}).then((res)=>{
        if(res.status == "success"){
          this.staffData = res.data
        }else{
          this.$message.error(res.data)
        }
      }).catch((error)=>{
        this.$message.error("查询员工信息失败")
      })
    },
    cancel(){
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push("/staffList")
      
    },
    update(){
      this.$refs.form.validate((valida)=>{
        if(valida){
          update(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("修改失败")
          })
        }
      })
    },
    updatePassword(){
      this.$confirm('确认要修改此员工的密码吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {
            staffPassword:this.password,
            userId:this.staffData.userId
          }
          staffpassword(param).then((res)=>{
            if(res.status == "success"){
              this.$message.success("修改成功")
              this.password=''
            }else{
              this.$message.error(res.data)
            }
          }).catch(()=>{
            this.$message.error("修改失败")
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
    }
  }
}
</script>

<style scoped>
.container{
  padding: 10px;    
}
.password{
  border: 1px solid black;
  padding: 20px;
  border-radius: 10px;
}
.password>.title{
  margin: 0px 0px 10px 0px;
  font-weight: 600;
}
</style>