<template>
  <div class="container">
    <el-tabs v-model="activeName"  @tab-click="handleClick()">

      <el-tab-pane label="个人信息" name="first">
        <el-row>
          <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="20">
            <el-form ref="userform" :model="userData" :rules="rules" label-width="120px">
              <el-form-item label="姓名" prop="userName">
                <el-input v-model="userData.userName" :disabled="userupdata"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="userSex">
                <el-select v-model="userData.userSex" placeholder="请选择" :disabled="userupdata">
                  <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="userData.userAdmin" :disabled="userupdata"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="userPhone">
                <el-input v-model="userData.userPhone" :disabled="userupdata"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="userIdentification">
                <el-input v-model="userData.userIdentification" :disabled="userupdata"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号">
                <el-input v-model="userData.userBankNumber" disabled></el-input>
              </el-form-item>
              <el-form-item label="开户银行">
                <el-input v-model="userData.userBankAddress" disabled></el-input>
              </el-form-item>
              <el-form-item label="现任角色">
                <template>
                  <el-tag v-for="item in userData.roleList" :key="item.rlId">{{item.rlName}}</el-tag>
                </template>
              </el-form-item>
              <el-form-item>
                <el-button type="info" v-if="userupdata" icon="el-icon-edit" @click="userupdata = false">修改</el-button>
                <el-button type="warning" v-if="!userupdata" @click="cancelUpdateUser">取消</el-button>
                <el-button type="success" v-if="!userupdata" icon="el-icon-upload2" @click="updateUser">提交</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="修改密码" name="second">
        <el-row>
          <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="20">
            <el-form ref="passwordform" :model="passwordData" label-width="120px" :rules="rules">
              <el-form-item label="原密码" prop="originalPassword">
                <el-input type="password" show-password v-model="passwordData.originalPassword"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" show-password v-model="passwordData.newPassword"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="password" show-password v-model="passwordData.confirmPassword"></el-input>
              </el-form-item>
              <el-form-item >
                <el-button type="primary" icon="el-icon-refresh-left" @click="passReset">重置信息</el-button>
                <el-button type="success" icon="el-icon-upload2" @click="changePassword">更换密码</el-button>
              </el-form-item>
            </el-form>
            
          </el-col>
        </el-row>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import {chinaIdentityValid,checkPhone, account_password_valid} from '@/utils/myValidate'
import {getOneself,update,passwordReset} from "@/api/user"

export default {
  name:"PersonalVue",
  data(){
    return{
      activeName:'first',
      userData:{
        userId:null,
        userName:null,
        userSex:null,
        userAdmin:null,
        userPhone:null,
        userIdentification:null,
        userBankNumber:null,
        userBankAddress:null,
        roleList:null,
      },
      backupsData:{},
      userupdata:true,
      passwordData:{
        originalPassword:null,
        newPassword:null,
        confirmPassword:null,
      },
      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' },
        ],
        userPhone:[
          {required:true, validator:checkPhone, trigger: ['blur', 'change']},
        ],
        userIdentification:[
          {required:true, validator:chinaIdentityValid, trigger:'blur'},
        ],
        originalPassword:[
          { required: true, message: '请输入原密码', trigger: 'blur' },
        ],
        newPassword:[
          { required: true, message: '请输入新密码', trigger: 'blur' },
        ],
        confirmPassword:[
          { required: true, message: '请输入确认密码', trigger: 'blur' },
        ]
      }
    }
  },
  created(){
    this.userData.userId = this.$store.getters.urId
    this.getUser()
  },
  methods:{
    //切换
    handleClick(tab, event){
      console.log(tab, event)
      this.userupdata = true
      this.userData = this.backupsData
      this.passReset()
    },
    //密码重置信息
    passReset(){
      this.passwordData={
        originalPassword:null,
        newPassword:null,
        confirmPassword:null,
      }
    },
    //获取个人信息
    getUser(){
      getOneself(this.userData).then((res)=>{
        if(res.status == "success"){
          this.userData = res.data
          this.backupsData = Object.assign({}, res.data)
        }else{
          this.$message.error(res.data)
        }
      }).catch((error)=>{
        this.$message.error("获取个人信息失败")
      })
    },
    //修改个人信息
    updateUser(){
      this.$refs.userform.validate((valida)=>{
        if(valida){
          update(this.userData).then((res)=>{
            if(res.status == "success"){
              this.$message.success("修改成功")
              this.getUser()
              this.userupdata = true
            }else{
              this.$message.error(res.data)
            }
          }).catch((error)=>{
            this.$message.error("修改失败")
          })
        }
      })
    },
    //取消修改个人信息
    cancelUpdateUser(){
      this.userupdata = true
      this.userData = Object.assign({}, this.backupsData)
    },
    //更换密码
    changePassword(){
      this.$refs.passwordform.validate((valida)=>{
        if(valida){
          //先判断确认密码是都等于新密码
          if(this.passwordData.newPassword == this.passwordData.confirmPassword){
            let param = {
              userId:this.userData.userId,
              originalPassword:this.passwordData.originalPassword,
              newPassword:this.passwordData.newPassword
            }
            passwordReset(param).then((res)=>{
              if(res.status == "success"){
                this.$message.success("修改成功")
                this.$store.dispatch('user/logout').then(res=>{
                  this.$router.push('/login')
                })
              }else{
                this.$message.error(res.data)
              }
            }).catch((error)=>{
              this.$message.error("修改失败")
            })
          }else{
            this.$message.error("新密码和确认密码不一样")
          }
        }
      })
    }
  }

}
</script>

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