<script setup>
import {onMounted, reactive} from "vue";
import Api from "../../../api/index.js";
import {copy, toPage} from "../../../utils/uils.js";

const detail = reactive({});

onMounted(() => {
    Api.system.getMyTop().then(({data}) => {
        Object.assign(detail, data);
    });
});
</script>

<template>
    <view class="p-[20rpx] bg-[#F2F3F5] rounded-[16rpx] !mt-[40rpx] !flex items-center" v-if="detail.id">
        <image class="!size-[64rpx]" mode="aspectFill" :src="detail.avatar"></image>
        <view class="test-24r !ml-[24rpx]">{{ detail.nickname }}</view>

        <view
            @click="copy(detail.wechat)"
            class="px-[20rpx] py-[7rpx] test-22r text-[#fff] rounded-full bg-[var(--primary-color)] !flex items-center justify-center !ml-auto">
            联系TA
        </view>
        <view
            @click="toPage('/pages/complaint/index')"
            class="px-[20rpx] py-[7rpx] test-22r text-[#fff] rounded-full bg-[#C9CDD4] !flex items-center justify-center !ml-[20rpx]">
            投诉
        </view>
    </view>
</template>

<style scoped lang="scss">

</style>
