<template>
  <div class="change-pass-box">
    <div @click="backCenter" class="back">
      <span class="span-back">
        <ChevronLeftIcon />{{ $t('login.backBtn') }}
      </span>
    </div>
    <span class="span-title">{{ $t('login.ChangeYourPassword') }}</span>
    <t-form
      @submit="onSubmit"
      :rules="FORM_RULES"
      :data="formData"
      label-align="top"
      :label-width="60"
    >
      <t-form-item :label="$t('login.OldPassword')" name="oldPassword">
        <t-input
          v-model="formData.old_password"
          type="password"
          :placeholder="$t('login.PleaseEnter')"
        ></t-input>
      </t-form-item>
      <t-form-item :label="$t('login.NewPassword')" name="password">
        <t-input
          v-model="formData.password"
          type="password"
          :placeholder="$t('login.PleaseEnter')"
        ></t-input>
      </t-form-item>
      <t-form-item
        :label="$t('login.ConfirmPassword')"
        name="password_confirmation"
      >
        <t-input
          v-model="formData.password_confirmation"
          type="password"
          :placeholder="$t('login.PleaseEnter')"
        ></t-input>
      </t-form-item>
      <t-form-item style="padding-top: 8px">
        <t-button theme="primary" type="submit">提交 </t-button>
      </t-form-item>
    </t-form>
  </div>
</template>

<script lang="ts" setup>
import { ChevronLeftIcon } from 'tdesign-icons-vue-next';
import request from '@/utils/request';
import { MessagePlugin } from 'tdesign-vue-next';
import md5 from 'md5';

const emit = defineEmits(['backPersonal']);
// 用户token
const userToken = useUserToken();
//
const formData = reactive({
  old_password: '',
  password: '',
  password_confirmation: '',
});
const backCenter = () => {
  emit('backPersonal', true);
};
// 数据校验
const repasswordValidator = (value) => {
  if (formData.password === value) {
    return { result: true };
  } else {
    return { result: false, message: '两次密码输入不一致', type: 'error' };
  }
};
const FORM_RULES = {
  password: [
    { required: true, message: '密码必填', type: 'error' },
    { min: 6, message: '至少需要6位', type: 'error' },
  ],
  password_confirmation: [
    { required: true, message: '确认密码必填', type: 'error' },
    { validator: repasswordValidator },
  ],
};
// 提交
const onSubmit = async ({ validateResult }) => {
  if (validateResult === true) {
    const res: any = await request.post(
      '/api/user/edit/password',
      {
        old_password: md5(formData.old_password),
        password: md5(formData.password),
        password_confirmation: md5(formData.password_confirmation),
      },
      {
        headers: {
          authorization: `Bearer ${userToken.value}`,
        },
      }
    );
    if (res.code === 200) {
      MessagePlugin.success('修改成功');
      emit('backPersonal', true);
    } else {
      MessagePlugin.warning(res.msg);
    }
  }
};
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.change-pass-box {
  padding: 30px 0 0 50px;
  height: calc(100vh - 288px);
  position: relative;
  .back {
    font-size: @font-size-l;
    height: 40px;
    .span-back {
      display: inline-flex;
      align-items: center;
    }
    .span-back:hover {
      color: var(--td--main-btn-color-1);
      cursor: pointer;
      transition: all 0.2s;
    }
  }
  .span-title {
    font-size: @font-size-xl;
    color: var(--td--main-btn-color-1);
    font-weight: bold;
  }
  .t-form {
    margin-top: 20px;
    .t-form__item {
      :deep(.t-form__controls) {
        width: 40%;
        min-width: 300px;
        max-width: 500px;
      }
    }
  }
}
</style>
