<template>
  <div class="detail-container">
    <div class="common-back-box" @click="handleBack">
      <i class="common-back" />
      返回上一级
    </div>
    <div class="common-info-box">
      <div class="common-info-header">
        <i class="line-icon" />
        <div class="common-info-title">基础信息</div>
      </div>
      <div class="common-info-content">
        <div class="common-info-item">用户ID：{{ userInfo.id }}</div>
        <div class="common-info-item">用户昵称：{{ userInfo.nickname }}</div>
        <div class="common-info-item">性别：{{ userInfo.sex }}</div>
        <div class="common-info-item">注册时间：{{ userInfo.registerTime }}</div>
      </div>
    </div>
    <div class="common-info-box">
      <div class="common-info-header">
        <i class="line-icon" />
        <div class="common-info-title">统计信息</div>
      </div>
      <el-table :data="[statisticsInfo]" border style="margin-top: 10px">
        <el-table-column prop="viewNum" label="浏览量" align="center" />
        <el-table-column prop="searchNum" label="查询量" align="center" />
        <el-table-column prop="payNum" label="支付数" align="center" />
        <el-table-column prop="consumptionAmount" label="消费金额" align="center">
          <template #default="scope"> ￥{{ scope.row.refundAmount }} </template>
        </el-table-column>
        <el-table-column prop="refundNum" label="退款数" align="center" />
        <el-table-column prop="refundAmount" label="退款金额" align="center">
          <template #default="scope"> ￥{{ scope.row.refundAmount }} </template>
        </el-table-column>
      </el-table>
    </div>
    <UserOrderList :id="id" />
  </div>
</template>

<script setup name="UserDetails">
import UserOrderList from '@/views/userManage/UserOrderList.vue';

const props = defineProps({
  id: String
});
const emits = defineEmits(['back']);
const userInfo = ref({
  id: '',
  nickname: '',
  sex: '',
  registerTime: ''
});
// 统计信息
const statisticsInfo = ref({
  viewNum: 50,
  searchNum: 12,
  payNum: 5,
  consumptionAmount: 99,
  refundNum: 1,
  refundAmount: 19.9
});
onMounted(() => {
  userInfo.value = {
    id: '1',
    nickname: '用户昵称12',
    sex: '男',
    registerTime: '2022-11-23 11:10:34'
  };
});

const handleBack = () => {
  emits('back');
};
</script>

<style lang="scss" scoped>

</style>
