<template>
  <PageWrapper title="表单详情" content="表单除了提交数据，有时也用于显示只读信息。">
    <el-card shadow="never" class="mt-3 proCard">
      <el-descriptions label-placement="left" class="py-2" title="基本信息">
        <el-descriptions-item>
          <template #label>收款人姓名</template>
          啊俊
        </el-descriptions-item>
        <el-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</el-descriptions-item>
        <el-descriptions-item label="付款类型">支付宝</el-descriptions-item>
        <el-descriptions-item label="付款账户">NaiveUiAdmin@163.com</el-descriptions-item>
        <el-descriptions-item label="转账金额">￥1980.00</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag type="success"> 已到账</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card shadow="never" class="mt-3 proCard">
      <el-descriptions label-placement="left" class="py-2" title="其它信息">
        <el-descriptions-item>
          <template #label>城市</template>
          深圳
        </el-descriptions-item>
        <el-descriptions-item label="性别">男</el-descriptions-item>
        <el-descriptions-item label="邮箱">NaiveUiAdmin@qq.com</el-descriptions-item>
        <el-descriptions-item label="地址">广东省深圳市南山区</el-descriptions-item>
        <el-descriptions-item label="生日">1991-06-04</el-descriptions-item>
        <el-descriptions-item label="认证">
          <el-tag type="success"> 已认证</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card
      shadow="never"
      title="表格信息"
      class="mt-3 proCard"
      size="small"
      :segmented="{ content: 'hard' }"
    >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="birthday" label="生日" />
        <el-table-column fixed="right" label="操作" width="140">
          <template #default>
            <el-button type="danger" size="small">删除</el-button>
            <el-button type="primary" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  const tableData = [
    {
      name: 'Ah jung',
      gender: '男',
      address: '深圳',
      birthday: '2000-12-09',
    },
    {
      name: '西门飞雪',
      gender: '男',
      address: '广州',
      birthday: '1991-09-11',
    },
    {
      name: '泰坦巨人',
      gender: '男',
      address: '北京',
      birthday: '1990-11-03',
    },
    {
      name: '猎魔人',
      gender: '女',
      address: '上海',
      birthday: '1992-03-11',
    },
  ];
</script>
