<script setup>
/**
 * 修改账号
 */
import {
    ref,
    reactive,
    computed,
} from 'vue'
import {
    useStore
} from 'vuex'
// 工具库
import util from '@/common/js/util.js'
// api
import api from '@/api/index.js'
// 加密
import CryptoJS from 'crypto-js';

// 显示密码
const showPwd = ref(false)
const showPwds = ref(false)
// 
const store = useStore()
// 表单
const form = reactive({ 
    oldPassword: '',
    password: ''
})
// 用户信息
const userinfo = computed(() => {
    let result = store.state.userinfo
    return result
})

// 实名认证
function handleSubmit() {
    const data = {
        ...form
    }

    // 验证
    if (!data.oldPassword) {
        util.alert('请输入旧密码')
        return
    }
    if (!data.password) {
        util.alert('请输入新密码')
        return
    } 
    data.oldPassword = CryptoJS.MD5(data.oldPassword).toString();
    data.password = CryptoJS.MD5(data.password).toString();

    api.mine.updatePassword({ data }).then(rs => {
        if (rs.code == 200) {
            util.alert('修改成功')
            util.getUserinfo()
            setTimeout(() => {
                uni.navigateBack()
            }, 500)
            return
        }
        util.alert({
            content: rs.msg,
            showCancel: false,
        })
    })
}
</script>

<template>
    <view class="container">
        <view class="line df aic">
            <view class="key">旧密码</view>
            <view class="value">
                <input :password="showPwd ? false : true" v-model="form.oldPassword" placeholder="请输入旧密码" />
            </view>
            <view class="btn sm ml20 plr20">
                <uni-icons :type="showPwd ? 'eye' : 'eye-slash'" color="#999" size="40rpx"
                    @click="showPwd = !showPwd" />
            </view>
        </view>
        <view class="line df aic">
            <view class="key">新密码</view>
            <view class="value">
                <input :password="showPwds ? false : true" v-model="form.password" placeholder="请输入新密码" />
            </view>
            <view class="btn sm ml20 plr20">
                <uni-icons :type="showPwds ? 'eye' : 'eye-slash'" color="#999" size="40rpx"
                    @click="showPwds = !showPwds" />
            </view>
        </view>

        <view class="btn bar lg black mtb60 mlr60" @click="handleSubmit">提交</view>
    </view>
</template>

<style scoped lang="scss">
// 容器
.container {
    padding: 50rpx 30rpx;
    color: #333333;
    font-size: 34rpx;

    .line {
        padding: 35rpx 10rpx;
    }

    .key {
        width: 200rpx;
    }

    .value {
        flex: 1;
        font-size: 28rpx;
    }
}
</style>