<template>
  <view>
    <view class="avatar">
      <image
        @tap="previewImage('https://image.jxc4.com/image/70143fcf48aefe74537533f35a0a8153.jpg')"
        src="https://image.jxc4.com/image/70143fcf48aefe74537533f35a0a8153.jpg"
        mode="scaleToFill"
      />
    </view>

    <!-- 用户名 -->
    <view class="item">
      <text>用 户&nbsp;&nbsp;名：</text>
      <text class="number" @tap="copyInfo(getStorage('userID2'))">{{
        getStorage('userID2')
      }}</text>
    </view>

    <!-- 手机号 -->
    <view class="item">
      <text>手 机&nbsp;&nbsp;号：</text>
      <text class="number" @tap="copyInfo(getStorage('mobile'))">{{
        getStorage('mobile')
      }}</text>
    </view>

    <!-- 原来密码 -->
    <view class="item">
      <text>原 密&nbsp;&nbsp;码：</text>
      <uni-easyinput
        primaryColor="#aaa"
        class="input"
        :inputBorder="false"
        type="password"
        v-model="oldPwd"
        placeholder="输入原密码(首次设置密码无需输入)"
      />
    </view>

    <!-- 新密码 -->
    <view class="item">
      <text>新 密&nbsp;&nbsp;码：</text>
      <uni-easyinput
        primaryColor="#aaa"
        class="input"
        type="password"
        :inputBorder="false"
        v-model="newPwd1"
        placeholder="输入新密码"
      />
    </view>

    <!-- 确认新密码 -->
    <view class="item">
      <text>确认密码：</text>
      <uni-easyinput
        primaryColor="#aaa"
        class="input"
        type="password"
        :inputBorder="false"
        v-model="newPwd2"
        placeholder="确认密码"
      />
    </view>

    <view class="btn" @tap="submist(newPwd2)">确认修改</view>
  </view>
</template>

<script lang="ts" setup >
import login from '@/api/https/login'
import useGlobalFunc from '@/composables/useGlobalFunc'
import { getStorage } from '@/utils/storage'
import toast from '@/utils/toast'
import md5 from 'js-md5'
import { ref } from 'vue'
const { copyInfo, logOutFn, previewImage } = useGlobalFunc()

// 原密码
const oldPwd = ref<string>('')
// 新密码
const newPwd1 = ref<string>('')
const newPwd2 = ref<string>('')

/*************************************************
 * 确认修改密码
 */
async function submist(pwd: string) {
  if (newPwd1.value != newPwd2.value) return toast('两次密码不一致')
  let data = {
    oldPwd: md5(oldPwd.value),
    newPwd: md5(pwd),
  }
  let res = await login.change_password(data)
  if (res.code == 0) {
    uni.jxAlert({
      title: '提示',
      content: '密码修改成功',
      success: () => {
        logOutFn()
        uni.reLaunch({ url: '/subPages/login/wxLogin/wxLogin' })
      },
    })
  } else {
    toast(res.desc, 2)
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  width: 100%;
  text-align: center;
  border-bottom: 1rpx solid rgb(208, 208, 208);

  image {
    box-sizing: border-box;
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    margin: 20rpx 0;
  }
}

.item {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  border-bottom: 1rpx solid rgb(208, 208, 208);
  line-height: 70rpx;

  .number {
    color: #aaa;
  }

  .input {
    width: 100%;
  }
}

.btn {
  border-radius: 8rpx;
  padding: 20rpx 0;
  background-color: $jx-primary;
  color: #fff;
  box-sizing: border-box;
  margin: 50rpx 20rpx 0 20rpx;
  text-align: center;
}
</style>