<template>
    <div class="default-main ba-table-box">
        <div
            style="padding-left: 10px;padding-bottom: 10px;width: 100%;background-color: #f5f5f5;margin-left: 10px;">
            <el-page-header @back="backFn">
                <template #content>
                    <span class="text-large font-600 mr-3">用户详情</span>
                </template>
            </el-page-header>
        </div>
        <el-card style="margin-top: 10px">
            <div style="width: 100%;display: flex;align-items: center">
                <el-image  alt="#" style="height: 60px;width: 60px;border-radius: 30px" v-if="userInfo.headPortrait==='/'" :src="defaultAvatar"></el-image>
                <el-image  alt="#" style="height: 60px;width: 60px;border-radius: 30px" v-else :src="userInfo.headPortrait"></el-image>
                <h4 style="margin-left: 30px;color: #409eff">{{ userInfo.nickName }}</h4>
                <h4 style="margin-left: 40px">联系电话</h4>
                <h4 style="margin-left: 20px;color: #409eff">{{ userInfo.mobileNumber }}</h4>
            </div>


        </el-card>
        <el-card style="margin-top: 20px">
            <h3>购买记录</h3>
            <el-table :data="userData.equipmentList" border class="mt-20">
                <el-table-column prop="orderNumber" label="订单编号"></el-table-column>
                <el-table-column prop="productName" label="产品名称"></el-table-column>
                <el-table-column prop="serialNumber" label="产品序列号"></el-table-column>
                <el-table-column prop="equipmentAreaName" label="所在区域" width="120"></el-table-column>
                <el-table-column prop="isOnline" label="是否在线" width="120"></el-table-column>
                <el-table-column prop="purchaseDate" label="购买日期" width="120"></el-table-column>
                <el-table-column prop="expirationDate" label="保修日期" width="120"></el-table-column>
                <el-table-column prop="equipmentStatusName" label="状态" width="80"></el-table-column>
                <el-table-column prop="" label="操作" width="120">
                    <template #default="{row}">
                        <el-button type="primary" plain size="small" @click="dialogRef.openDialog(row)">售后记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card style="margin-top: 20px">
            <h3>优惠券</h3>
            <el-table :data="userData.memberCouponList" border class="mt-20">
                <el-table-column prop="couponName" label="标题"></el-table-column>
                <el-table-column prop="couponSourceName" label="获取场景"></el-table-column>
                <el-table-column prop="discountAmount" label="优惠金额"></el-table-column>
                <el-table-column prop="couponStatusName" label="状态"></el-table-column>
            </el-table>
        </el-card>
        <el-card style="margin-top: 20px">
            <h3>好友邀请</h3>
            <el-table :data="userData.inviteMemberList" border class="mt-20">
                <el-table-column  label="头像" width="80" align="center">
                    <template #default="{row}">
                        <el-image :src="defaultAvatar" v-if="row.headPortrait==='/'" alt="" style="width:30px"></el-image>
                        <el-image :src="row.headPortrait" v-else alt=""></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="用户名"></el-table-column>
                <el-table-column prop="mobileNumber" label="手机号码"></el-table-column>
                <el-table-column prop="createTime" label="注册日期"></el-table-column>
            </el-table>
        </el-card>

        <afterDialog ref="dialogRef" ></afterDialog>
    </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {useRoute, useRouter} from 'vue-router'
import request from "/@/api/request";
import {member} from "/@/api/controllerUrls";
import afterDialog from './afterDialog.vue'
import defaultAvatar from '/@/assets/defaultAvatar.svg'
const route = useRoute()
const router = useRouter()

let dialogRef = ref()

let userInfo = ref({})
onMounted(() => {
    userInfo.value = route.params
    getUserData()
})

let userData = ref({})

function getUserData(){
    request.index(member,{id:userInfo.value.id},'detail').then(res=>{
        userData.value = res.data
    })
}




function backFn() {
    router.go(-1)
}
</script>

<style scoped>

</style>
