<template>
  <div>
    <div class="userInfoBox">
      <tableTitle :name="tableDivTitle"/>
      <div class="infoBox">
        <div class="infoTitle">当前头像：</div>
        <div>
          <img :src="user.avatar" class="avatar">
        </div>
      </div>
      <div class="infoBox">
        <div class="infoTitle">昵称：</div>
        <div class="infoInput"><el-input v-model="user.real_name" placeholder="" disabled/></div>
      </div> 
    </div>
    <div class="userInfoBox">
      <tableTitle :name="tableTitle"/>
      <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
        <!--现有密码 start------------------------------------------>
        <el-tooltip v-model="capsTooltip1" content="大小写已开启！" placement="right" manual>
          <div class="PasswordBox">
            <div class="PasswordTitle">现有密码：</div>
            <el-form-item prop="password">
              <div class="PasswordBody">
                <el-input
                  :key="passwordType1"
                  ref="password1"
                  v-model="form.password"
                  :type="passwordType1"
                  placeholder="请输入密码"
                  name="password"
                  tabindex="2"
                  autocomplete="off"
                  @blur="capsTooltip1 = false"
                />
                <span class="show-pwd" @click="showPwd(1)">
                  <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
                </span>
              </div>
            </el-form-item>
          </div>
        </el-tooltip>
        <!--现有密码 end------------------------------------------>
        <!--新密码 start------------------------------------------>
        <el-tooltip v-model="capsTooltip2" content="大小写已开启！" placement="right" manual>
          <div class="PasswordBox">
            <div class="PasswordTitle">新密码</div>
            <el-form-item prop="new_password">
              <div class="PasswordBody">
                <el-input
                  :key="passwordType2"
                  ref="password2"
                  v-model="form.new_password"
                  :type="passwordType2"
                  placeholder="请输入密码"
                  name="password"
                  tabindex="2"
                  autocomplete="off"
                  @blur="capsTooltip2 = false"
                />
                <span class="show-pwd" @click="showPwd(2)">
                  <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
                </span>
              </div>
            </el-form-item>
          </div>
        </el-tooltip>
        <!--新密码 end------------------------------------------>
        <!--新密码 start------------------------------------------>
        <el-tooltip v-model="capsTooltip3" content="大小写已开启！" placement="right" manual>
          <div class="PasswordBox">
            <div class="PasswordTitle">确认新密码：</div>
            <el-form-item prop="new_password1">
              <div class="PasswordBody">
                <el-input
                  :key="passwordType3"
                  ref="password3"
                  v-model="form.new_password1"
                  :type="passwordType3"
                  placeholder="请输入密码"
                  name="password"
                  tabindex="2"
                  autocomplete="off"
                  @blur="capsTooltip3 = false"
                />
                <span class="show-pwd" @click="showPwd(3)">
                  <svg-icon :icon-class="passwordType3 === 'password' ? 'eye' : 'eye-open'" />
                </span>
              </div>
            </el-form-item>
          </div>
        </el-tooltip>
        <!--新密码 end------------------------------------------>
      </el-form>
    </div>

    <div class="infoBtnBox">
      <el-button type="info" @click="clearInput">重置</el-button>
      <el-button type="primary" @click="changePassword">保存</el-button>
    </div>
  </div>  
</template>

<script>
//引入公用样式
import '@/styles/global.less';
//表格标题
import tableTitle from './components/tableTitle';

export default {
  components: {
    tableTitle,//表格标题
  },
  data() {
    // 配置验证规则：用于表单验证
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能低于6位！'))
      } else {
        callback()
      }
    }
    return {
      tableDivTitle:"用户信息",
      tableTitle:"修改密码",
      user: {
        avatar:"",
        real_name:""
      },
      form:{
        password:"",
        new_password:"",
        new_password1:""
      },
      capsTooltip1: false,//显示大小写提示
      capsTooltip2: false,
      capsTooltip3: false,
      passwordType1: 'password',//密码域默认type 当显示密码的时候改为text
      passwordType2: 'password',//密码域默认type 当显示密码的时候改为text
      passwordType3: 'password',//密码域默认type 当显示密码的时候改为text
      loginRules: { //配置from表单验证规则
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        new_password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        new_password1: [{ required: true, trigger: 'blur', validator: validatePassword }]
      }
    }
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    //获取用户身份信息
    getUserInfo(){
      this.$store.dispatch('public/getInfo').then(res=> {
        console.log(res)
        this.user.avatar = res.data.avatar;
        this.user.real_name = res.data.real_name;

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '网络错误，请重试！'
        });
      })
    },
    //修改用户密码
    changePassword(){
      this.$store.dispatch('public/changePassword',this.form).then(res=> {
        //console.log(res)
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: "密码修改成功！"
          });
          this.clearInput();
        }else{
          this.$message({
            type: 'warning',
            message: res.message
          });
        } 
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '网络错误，请重试！'
        });
      })
    },
    // 切换密码框的显示与隐藏
    showPwd(num) {
      const passwordTypeKey = 'passwordType' + num; // 动态生成 passwordType 的键
      const passwordRefKey = 'password' + num; // 动态生成 password 的引用

      // 切换密码类型
      if (this[passwordTypeKey] === 'password') {
        this[passwordTypeKey] = ''; // 显示密码
      } else {
        this[passwordTypeKey] = 'password'; // 隐藏密码
      }

      // 使用 $nextTick 聚焦到对应的密码输入框
      this.$nextTick(() => {
        this.$refs[passwordRefKey].focus(); // 聚焦到对应的密码输入框
      });
    },
    //清空输入列表
    clearInput(){
      this.form = {
        password:"",
        new_password:"",
        new_password1:""
      }
    }
  }
}
</script>

<style scoped lang="less">
  @avatarBorderColor:#E1E2E9;
  @spacingPx:30px;

  .userInfoBox {
    margin: @spacingPx;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #E9EDF7;
    padding: @spacingPx - 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: @spacingPx;
    .avatar {
      border-radius: 50%;
      width: 100px;
      height: 100px;
      border: 1px solid @avatarBorderColor;
      border-radius: 12px;
      padding:15px;
    }
    .show-pwd{
      margin-left: @spacingPx;
    }
    .infoBox {
      display: flex;
      align-items: center;
      margin-top: @spacingPx;
    }
    .infoTitle {
      width:120px;
      text-align: right;
      margin-right: 10px;
    }
    .infoInput {
      flex: 1;
    }
    .infoPassword {
      display: flex;
      align-items: center;
    }
  }

  .inputBox {
    margin-bottom: @spacingPx;
    .inputIcon {
      width: 24px;
      height: 24px;
      margin: 0 @spacingPx - 10px;
    }
    .inputIconSmall {
      width: 18px;
      height: 18px;
    }
  }
  .PasswordBox {
    display: flex;
    align-items: center;
    margin-top: @spacingPx;
    .el-form-item {
      flex: 1;
    }
    .PasswordTitle {
      width:120px;
      text-align: right;
      margin-right: 10px;
      margin-bottom:22px;
    }
    .PasswordBody {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
  .infoBtnBox {
    margin-top: @spacingPx;
    padding-bottom: @spacingPx;
    text-align: center;
  }
</style>