//点击用户头像那里的修改密码选项，依赖登录后，有登录态的情形下
<template>
  <div class="login flex justify-center items-center h-full">
    <img class="logo" src="../../assets/imgs/login_logo.png" />
    <div class="login-bg flex justify-center items-center">
      <div class="login-bg-inner-box text-center">
        <img src="../../assets/imgs/login_bg_inner.png" />
        <div class="title1">欢 迎 使 用</div>
        <div class="title2">项目质量控制管理平台</div>
      </div>
    </div>
    <div class="login-box">
      <div class="title1 flex justify-between items-center">
        <span>修改密码</span>
      </div>
      <div class="title2">{{ `请输入旧密码和新密码` }}</div>
      <t-form
        v-show="!forgetStatus"
        ref="form"
        :data="formData"
        :label-width="0"
        class="login-form"
        :rules="rules"
      >
        <t-form-item name="password">
          <t-input
            v-model="formData.password"
            type="password"
            clearable
            placeholder="请输入旧密码"
            size="medium"
          >
          </t-input>
        </t-form-item>

        <t-form-item name="newPassword">
          <t-input
            v-model="formData.newPassword"
            type="password"
            clearable
            placeholder="请输入新密码"
            size="medium"
          >
          </t-input>
        </t-form-item>
        <t-form-item name="repeatNewPassword">
          <t-input
            v-model="formData.repeatNewPassword"
            type="password"
            clearable
            placeholder="请再次输入新密码"
            size="medium"
          >
          </t-input>
        </t-form-item>
        <div class="flex items-center justify-between">
          <t-button theme="default" @click="router.back()">返回</t-button>
          <t-button theme="primary" @click="submitHandler">确定</t-button>
        </div>
      </t-form>
    </div>
  </div>
</template>

<script setup name="PasswordModify">
import { ref, reactive, computed, watch } from 'vue';
import { DesktopIcon, LockOnIcon, RollbackIcon } from 'tdesign-icons-vue-next';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store';
import { MessagePlugin } from 'tdesign-vue-next';
import { getBase64 } from '@/utils/crypto';
import { updateMyPassword } from '@/api/user';
import { clear } from '@/utils/tool';

const form = ref(null);

const route = useRoute();
const router = useRouter();

const formData = reactive({
  password: '',
  newPassword: '',
  repeatNewPassword: '',
});
const rules = {
  password: [
    {
      required: true,
      message: '请输入旧密码',
      type: 'error',
      trigger: 'change',
    },
  ],
  newPassword: [
    {
      required: true,
      message: '请输入新密码',
      type: 'error',
      trigger: 'change',
    },
  ],
  repeatNewPassword: [
    {
      required: true,
      message: '请输入新密码',
      type: 'error',
      trigger: 'change',
    },
    {
      validator: (val) => {
        if (val !== formData.newPassword) {
          return {
            result: false,
            message: '两次输入的新密码不一致',
          };
        }
        return {
          result: true,
          type: 'success',
        };
      },
    },
  ],
};

const userStore = useUserStore();

const submitHandler = () => {
  form.value.validate().then(async (result) => {
    if (result === true) {
      updateMyPassword({
        id: userStore.user.id,
        password: getBase64(formData.password),
        newPassword: getBase64(formData.newPassword),
      }).then(() => {
        MessagePlugin.success('密码修改成功，请重新登录');
        clear();
        window.location.href = '/';
      });
    }
  });
};
</script>
<style lang="less" scoped>
.login {
  background: linear-gradient(180deg, #f4f9ff 0%, #d7eaff 100%);
  position: relative;
  min-height: 550px;

  .logo {
    width: 180px;
    z-index: 100;
    top: 48px;
    left: 48px;
    position: absolute;
  }
  .login-bg {
    // position: absolute;
    // top: 80px;
    // bottom: 80px;
    // left: 0;
    // width: 70%;
    // z-index: 99;
    width: 488px;
    height: 586px;
    background: url(../../assets/imgs/login_bg_grid.png) center center no-repeat;
    // background-size: contain;
    background-size: 100% 100%;
    .login-bg-inner-box {
      img {
        height: 260px;
        margin-bottom: 20px;
      }
      .title1 {
        font-size: 32px;
        color: #262626;
        margin-bottom: 15px;
        font-weight: bold;
        line-height: 40px;
      }
      .title2 {
        font-size: 20px;
        color: #8c8c8c;
        line-height: 28px;
      }
    }
  }
  .login-box {
    width: 344px;
    background: #fff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    border: 1px solid #e5e6eb;
    padding: 32px;
    position: relative;
    .title1 {
      span {
        font-size: 24px;
        font-weight: 700;
        color: #262626;
        line-height: 32px;
      }
    }
    .title2 {
      font-size: 16px;
      color: #8c8c8c;
      line-height: 24px;
      margin-top: 4px;
      margin-bottom: 28px;
      font-weight: 400;
    }
  }
}
</style>
