<script setup lang="ts">
    // import * as API from '/@/api/model/userInfo'
    import { useUserStore } from '@/store/modules/user'

    const model = reactive({
        userId: '',
        show: false,
        descr: '',
        state: '',
        version: '',
        loading: false,
        msg: {
            avatar: '/static/logo.png',
            realname: '',
            orgCodeTxt: '',
            phone: '15688642241',
            postText: '',
            email: '',
            sex: 1, // 1 男 2 女
        },
    })

    const userStore = useUserStore()
    onLoad(() => {
        const { userId, realname, orgCodeTxt, postText, avatar, phone, sex, email } = userStore.getUserInfo
        model.userId = userId
        model.msg.realname = realname
        model.msg.orgCodeTxt = orgCodeTxt
        model.msg.postText = postText
        model.msg.phone = phone
        model.msg.email = email
        model.msg.sex = sex
        if (avatar) {
            model.msg.avatar = avatar
        }
    })

    onShow(async () => {
        // await API.getUserInfo().then((res) => {
        //     model.msg = res
        // })
        // if (!model.msg.avatar) {
        //     if (uni.getStorageSync('AvatarUrl')) {
        //         model.msg.avatar = uni.getStorageSync('AvatarUrl')
        //     } else {
        //         model.msg.avatar = '/static/logo.png'
        //     }
        // }
    })
    function previewImg() {
        console.log(11)

        const imgsArray = []
        imgsArray[0] = model.msg.avatar
        uni.previewImage({
            current: 0,
            urls: imgsArray,
        })
    }
</script>

<template>
    <view class="pb-3 flex flex-col">
        <view class="bg-#fff w-700/750 m-auto h-160 headBox">
            <view class="h-full flex justify-between items-center avtar">
                <text class="text-#999999">头像</text>
                <image
                    :src="model.msg.avatar"
                    class="avtarImg"
                    background="transparent"
                    style="box-shadow: 0 0 20rpx #656565"
                    @click="previewImg"
                />
            </view>
        </view>
        <view class="bg-#fff w-700/750 m-auto bodyBox">
            <view class="msgBox flex justify-between items-center text-30">
                <view class="text-#999999"> 姓名 </view>
                <view class="text-#333333">
                    {{ model.msg.realname }}
                </view>
            </view>
            <view class="msgBox flex justify-between items-center text-30">
                <view class="text-#999999"> 性别 </view>
                <view class="text-#333333">
                    {{ model.msg.sex === 1 ? '男' : model.msg.sex === 2 ? ' 女' : '- -' }}
                </view>
            </view>
            <view class="msgBox flex justify-between items-center text-30">
                <view class="text-#999999"> 手机号码 </view>
                <view class="text-#333333">
                    {{ model.msg.phone }}
                </view>
            </view>
            <!-- <view class="msgBox flex justify-between items-center text-30">
                <view class="text-#999999"> 邮箱 </view>
                <view class="text-#333333">
                    {{ model.msg.email }}
                </view>
            </view>
            <view class="msgBox flex justify-between items-center text-30">
                <view class="text-#999999"> 部门 </view>
                <view class="text-#333333 w-8/10">
                    <fui-overflow-hidden
                        size="30"
                        align="right"
                        :text="model.msg.orgCodeTxt ? `${model.msg.orgCodeTxt}` : '- -'"
                    />
                </view>
            </view>
            <view class="msgBox lastBox flex justify-between items-center text-30">
                <view class="text-#999999"> 岗位 </view>
                <view class="text-#333333">
                    {{ model.msg.postText ? model.msg.postText : '- -' }}
                </view>
            </view> -->
        </view>
    </view>
</template>

<style lang="scss" scoped>
    .headBox {
        margin-top: 24rpx;
        border-radius: 16rpx;
        .avtar {
            padding: 0 24rpx;
        }
        .avtarImg {
            width: 112rpx;
            height: 112rpx;
            border-radius: 50%;
        }
    }
    .bodyBox {
        margin-top: 20rpx;
        border-radius: 16rpx;
        // height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .msgBox {
            width: 92.3%;
            min-height: 100rpx;
            // padding: 0 24rpx;
            border-bottom: 1rpx solid #eeeeee;
            // border: 1px solid #000;
        }
        .lastBox {
            border: none;
        }
    }
</style>
