<script setup lang="ts">
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { updatePasswordApi } from '@/api/changePassword'
import { showFailToast, showSuccessToast, showToast } from 'vant'
import icon1 from '@/static/1.png'
import icon2 from '@/static/2.png'
const form = reactive({
  old_password: '',
  new_Password: '',
  repeat_new_password: ''
})
const formList = reactive([
  {
    label: 'transactionPassions.jiumima',
    dataName: 'old_password',
    msgName: 'checkMsg.shurujiumima',
    isShow: false
  },
  {
    label: 'transactionPassions.xingmima',
    dataName: 'new_Password',
    msgName: 'checkMsg.shuruxingmima',
    isShow: false
  },
  {
    label: 'transactionPassions.xingmima2',
    dataName: 'repeat_new_password',
    msgName: 'checkMsg.shuruxingmima',
    isShow: false
  }
])
const { t } = useI18n()

const submit = async () => {
  if (form.old_password === '') {
    return showToast(t('changePassword.tip1'))
  }
  if (form.new_Password === '') {
    return showToast(t('changePassword.tip2'))
  }
  if (form.repeat_new_password === '') {
    return showToast(t('changePassword.tip2'))
  }
  if (form.new_Password.length < 6 || form.new_Password.length > 10) {
    return showToast(t('changePassword.tip3'))
  }
  if (form.new_Password !== form.repeat_new_password) {
    return showToast(t('changePassword.tip4'))
  }

  const res = await updatePasswordApi(form)
  if (res.code === 1) {
    showSuccessToast(res.msg)

    // 清除token 以及用户信息
    uni.setStorageSync('token', null)
    uni.setStorageSync('userId', null)
    uni.setStorageSync('userInfo', null)
    setTimeout(() => {
      // 提示用户
      showFailToast(t('login.user_info_null'))
      setTimeout(() => {
        // 跳转登录
        uni.navigateTo({
          url: '/subPackages/login/login'
        })
      }, 1500)
    }, 1500)
  }
}

const showPass = (i: number) => {
  formList[i].isShow = !formList[i].isShow
}
</script>

<template>
  <Navigater :title="t('user.rizhisuoyin')"></Navigater>

  <view class="Box">
    <!-- <view class="box-top"> </view> -->

    <view class="box-form-card">
      <!-- <view class="title">{{ t('changePassword.xiugaidenglumima') }}</view> -->
      <view v-for="(item, i) in formList" :key="i" class="box-form-item">
        <view class="box-form-item-label"> &nbsp;&nbsp;{{ t(item.label) }}</view>
        <van-field v-model="form[item.dataName]" :right-icon="item.isShow ? icon1 : icon2" :type="item.isShow ? 'text' : 'password'" :placeholder="t(item.msgName)" @click-right-icon="showPass(i)" />
        <!-- <img src="@/static/1.png" class="input-img" /> -->
      </view>
      <van-button class="btn" type="primary" @click="submit">{{ t('transactionPassions.queren') }}</van-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
::v-deep .van-field__control {
  // width: 19.7813rem;
  height: 2rem;
  // padding-left: 1rem;

  // border: 0.0313rem solid #50b0f2;
  border: none;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #fff;
}
// ::v-deep uni-page {
//   background: #fff;
// }
::v-deep .van-field {
  width: 20rem;
  height: 3.375rem;
  background: rgb(10, 30, 54, 0.5);
  border-radius: 0.625rem;
}
::v-deep .van-field__body {
  width: 20rem;
  height: 3.375rem;
  background: rgb(10, 30, 54, 0.5);
  color: #fff;
  border-radius: 0.9688rem;
  padding: 1.0938rem 0.9375rem 0.9688rem 1.25rem;
  .van-field__right-icon {
    padding: 0;
    margin-right: 0.625rem;
    .van-icon__image {
      width: 1.2813rem;
      height: 1.375rem;
    }
  }
}

::v-deep .van-button {
  margin-top: 2.6875rem;
  width: 20.9375rem;
  height: 2.75rem;
  border-radius: 1.5625rem;
  background: #6a69e9;
}

::v-deep .van-button__text {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
}

::v-deep .van-field {
  padding: 0;
}

.Box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // padding-top: 1.75rem;

  .box-form-card {
    width: 23.4375rem;
    height: 31.9688rem;
    // margin-top: 2.375rem;
    // background: #fdfefe;
    // border-radius: 2.0938rem 2.0938rem 0 0;
    // padding: 3.6563rem 0 0 2.25rem;
    display: flex;
    // justify-content: center;
    flex-direction: column;
    align-items: center;
    .title {
      font-weight: 500;
      font-size: 1.1563rem;
      color: #040404;
      line-height: 1.1563rem;
      margin-bottom: 1.875rem;
    }

    .btn {
      margin-top: 2.6875rem;
      width: 20.9375rem;
      height: 2.75rem;
      border-radius: 1.5625rem;
      color: #fff;
      font-size: 0.875rem;
      font-weight: 500;
    }

    .box-form-item {
      display: flex;
      flex-direction: column;
      margin-top: 0.9375rem;
      position: relative;

      .box-form-item-label {
        height: 2.75rem;
        display: flex;
        align-items: center;
        // margin-bottom: 0.5938rem;
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 0.75rem;
        color: #fff;
      }
    }
  }

  .box-top {
    width: 11.4688rem;
    height: 11.4688rem;
    background: transparent;
    border-radius: 50%;

    font-weight: 300;
    font-size: 2.75rem;
    color: #cbcccd;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
