<!--
 * @Author: Fly
 * @Date: 2025-12-10 16:44:11
 * @LastEditTime: 2025-12-20 14:15:12
 * @Description: 
-->
<template>
    <Drawer title="查看" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
        :wrapperClosable="true" :size="$drawerWidth(800)">
        <el-form ref="form" label-width="120px">
            <div class="form-headline">用户信息</div>
            <el-row class="form-content">
                <el-col :span="24">
                    <el-form-item label="头像：">
                        <el-image :src="UserVo.headPhoto" fit="fill" :preview-src-list="[UserVo.headPhoto]"
                            style="width: 60px; height: 60px;border-radius: 10px">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="会员昵称：">{{ UserVo.nickname | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号：">{{ UserVo.mobile | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别："><dict-tag :options="dict.type.sys_user_sex" :value="UserVo.gender" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生日：">{{ UserVo.birthday | TableItemEmpty }}</el-form-item>
                </el-col>
            </el-row>
            <div class="form-headline">其他信息</div>
            <el-row class="form-content">
                <el-col :span="24">
                    <el-form-item label="钱包余额：">{{ UserVo.balance | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商城消费金额：">{{ UserVo.shopConsume | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="累计扫码消费：">{{ UserVo.lineConsume | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="剩余排队金额：">{{ UserVo.surplusQueueMoney | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="累计补贴金额：">{{ UserVo.alreadySubsidyMoney | TableItemEmpty }}</el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template v-slot:footer>
            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
        </template>
    </Drawer>
</template>

<script>
import { userInfo } from "@/api/user.js";
export default {
    dicts: ['sys_user_sex'],
    name: '',
    data() {
        return {
            DrawerVisible: false,
            skeletonLoading: false,
            UserVo: {},
        };
    },
    created() {
        // setTimeout(() => {
        //     this.openHandle({ id: 15 })
        // }, 100);
    },

    methods: {
        async openHandle(row) {
            this.DrawerVisible = true;
            const { id } = row || {};
            this.skeletonLoading = true;
            let V_ = null;
            try {
                if (id) {
                    const { data } = await userInfo(id);
                    V_ = data;
                }
            } catch { }

            this.UserVo = V_ || row || {};
            this.skeletonLoading = false;
        },
    },
};
</script>