<template>
    <view style="padding: 20rpx 40rpx; margin-top: 100rpx;" v-if="isLogin">
        <view style="width: 100%;text-align: center;font-weight: bold;font-size: 40rpx;">修改密码</view>
        <view class="pwd-from-root" style="">
            <jx-input>
            <template #left>
                <jx-icon icon="shoujihao" color="#aaa" :size="36"></jx-icon>
            </template>
            <template #middle>
                <uni-easyinput
                    style="background-color:#efefef ;"
                    primaryColor="#aaa"
                    :inputBorder="false"
                    class="input"
                    type="text"
                    v-model="userName"
                    placeholder="请输入用户名"
                />
            </template>
            </jx-input>
        </view>
        <view class="pwd-from-root" style="">
            <jx-input>
            <template #left>
                <jx-icon icon="mima" color="#aaa" :size="36"></jx-icon>
            </template>
            <template #middle>
                <uni-easyinput
                    style="background-color:#efefef ;"
                    primaryColor="#aaa"
                    :inputBorder="false"
                    class="input"
                    type="password"
                    v-model="password1"
                    placeholder="请输入原密码（首次可不填）"
                />
            </template>
            </jx-input>
        </view>

        <view class="pwd-from-root">
            <jx-input>
            <template #left>
                <jx-icon icon="mima" color="#aaa"></jx-icon>
            </template>
            <template #middle>
                <uni-easyinput
                primaryColor="#aaa"
                :inputBorder="false"
                class="input"
                type="password"
                v-model="passwordNew"
                placeholder="请输入新密码"
                />
            </template>
            </jx-input>
        </view>

        <view class="pwd-from-root">
            <jx-input>
            <template #left>
                <jx-icon icon="mima" color="#aaa"></jx-icon>
            </template>
            <template #middle>
                <uni-easyinput
                primaryColor="#aaa"
                :inputBorder="false"
                class="input"
                type="password"
                v-model="passwordNew2"
                placeholder="请再输入一遍新密码"
                />
            </template>
            </jx-input>
        </view>

        <button class="pwd-login-btn" @tap="changePass">修改密码</button>
    </view>
    <jx-empty v-else title="您还未登录"></jx-empty>
</template>

<script lang="ts" setup>
import login from '@/api/https/login';
import { computed, ref } from 'vue';
import { md5 } from 'js-md5'
import toast from '@/utils/toast';
import { onLoad } from '@dcloudio/uni-app';
import { store } from '@/store';
import JxEmpty from '@/components/jx-empty/jx-empty.vue';

const userName = ref<string>('') // 用户名
const password1 = ref<string>('') // 原密码
const passwordNew = ref<string>('')
const passwordNew2 = ref<string>('')
const mobile = computed(() => {
    return '' + uni.getStorageSync('mobile')
})

const userInfo:AnyObject = computed(() => {
    return uni.getStorageSync('userInfo')
})

/**
 * 登录状态
 */
const isLogin = computed(() => {
  return store.getters['serveInfo/isLogin']
})

onLoad(() => {
    console.log('userInfo',userInfo)
    userName.value = userInfo.value.userId2 ? userInfo.value.userId2 : '' + uni.getStorageSync('mobile')
})
/**
 * 确认修改密码
 */
async function changePass(){
    try {
        // console.log(mobile.value,'userName.value',userName.value,'判断')
        if(passwordNew.value && passwordNew.value !== passwordNew2.value) return toast('新密码不一致')
        let data:AnyObject = {}
        if(passwordNew.value){
            data.password = md5(passwordNew.value)
            data.oldPassword = password1.value ?  md5(password1.value) :  md5(passwordNew.value) // 首次和新密码保持一致
        }
        if(userInfo.value.userId2 ? userName.value !== userInfo.value.userId2 : userName.value !== mobile.value) data.userName = userName.value
        if(JSON.stringify(data) === '{}') return toast('没有要修改的信息')
        // console.log('修改密码的参数信息',data)
        let res = await login.changePassword(data)
        // console.log('设置密码,成功了没',res)
        if(res.code == 0){
            toast('修改成功')
            let userInfoNew = JSON.parse(JSON.stringify(userInfo.value))
            // console.log(userInfoNew,'用户信息',userInfoNew)
            userInfoNew.userId2 = userName.value
       
            // if(userInfo.value.userId2 ? userName.value !== userInfo.value.userId2 : userName.value !== mobile.value)  
           uni.setStorageSync('userInfo',userInfoNew)
           uni.navigateTo({url:'/pages/index/index'})
            // await store.dispatch('serveInfo/wxLogin',{authType:'wx',isJudg:false}) // 查看当前用户是否为新用户
        }else toast('修改失败')
    } catch (error) {
        throw error
    }
   

}
</script>

<style lang="scss" scoped>

.pwd-from-root {
  border-bottom: 2rpx solid rgb(234, 234, 234);
  line-height: 70rpx;
  margin-bottom: 30rpx;
  margin-top: 40rpx;

  input {
    width: 100%;
  }
}

.pwd-login-btn {
  border-radius: 100rpx;
  margin-top: 60rpx;
  color: rgb(255, 255, 255);
  background-color: $jx-login;
}

::v-deep .uni-easyinput__content-input {
    background-color: #efefef !important;
    // font-size: 44rpx;
}

::v-deep .uni-easyinput__content,.uni-easyinput__content > .content-clear-icon{
    background-color: #efefef !important;

    // .content-clear-icon{
    //     background-color: #efefef;
    // }
}
</style>