<template>
    <!-- 我的--个人资料-->
    <view class="h5-container my-setting">
        <view style="padding: 15px">
            <van-icon name="arrow-left" @click="onClickLeft" />
            <text style="color: #000"> 个人资料 </text>
        </view>

        <van-cell-group inset style="flex: 1">
            <van-cell title="头像">
                <template #right-icon>
                    <van-image
                        round
                        fit="cover"
                        width="20px"
                        height="20px"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                    />
                </template>
            </van-cell>
            <van-cell title="用户名" :value="userName" />
            <van-cell title="登录账户" :value="userAccount" />
            <van-cell title="关联企业" :value="userCompany" />
            <van-cell title="联系电话" :value="userPhone" />
        </van-cell-group>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores/index.js'
import { onLoad } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const userName = ref('')
const userAccount = ref('')
const userCompany = ref('')
const userPhone = ref('')
const onClickLeft = () => {
    uni.navigateBack()
}
onLoad(() => {
    userName.value = memberStore.userInfo.nickName
    userAccount.value = memberStore.userInfo.userName
    userCompany.value = memberStore?.userCompanyName
    userPhone.value = memberStore.userInfo.phonenumber
})
</script>

<style lang="scss" scoped>
.my-setting {
    padding: 10px 0;
    color: #333;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
}

:deep(.van-cell-group--inset) {
    padding: 15px 0;
}
</style>
