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

// 
const store = useStore()
// 表单
const form = reactive({
    id: '',
    account: ''
})
// 用户信息
const userinfo = computed(() => {
    let result = store.state.userinfo
    return result
})

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

    // 验证
    if (!data.account) {
        util.alert('请输入账号')
        return
    }
    data.id = userinfo.value.id

    api.mine.updateAccount({ 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 class="input" type="text" v-model="form.account" placeholder="请输入账号" />
            </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>