<script lang="ts" setup>
  import { ref } from 'vue';
  import {
    Card,
    Descriptions,
    DescriptionsItem,
    Table,
    Image,
    Row,
    Col,
    Timeline,
    TimelineItem,
    Button,
    message,
  } from 'ant-design-vue';

  const columns = [
    { title: '商品', slots: { customRender: 'shop' }, key: 'shop' },
    { title: '单价', dataIndex: 'dj', key: 'dj' },
    { title: '数量', dataIndex: 'sl', key: 'sl' },
    { title: '优惠金额', dataIndex: 'yhje', key: 'yhje' },
    { title: '合计金额（元）', dataIndex: 'hjje', key: 'hjje' },
    { title: '采购要求', dataIndex: 'cgyq', key: 'cgyq' },
    { title: '提交人信息', dataIndex: 'tjrxx', key: 'tjrxx' },
    { title: '订单状态', dataIndex: 'ddzt', key: 'ddzt' },
  ];

  const dataSource = ref([
    {
      shop: {
        name: '商品名称',
        brand: '测试品牌',
        gg: '50ml',
        hh: '202-10A',
        class: '化学试剂',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
      dj: '100',
      sl: '1',
      yhje: '0',
      hjje: '100',
      cgyq: '无',
      tjrxx: '张三',
      ddzt: '待审核',
      id: 1,
    },
  ]);

  const timelineData = ref([
    { time: '08-23', status: 1, content: '提交订单', name: '赵小刚', date: '2023-03-15 21:32:25' },
    { time: '08-23', status: 2, content: '提交订单', name: '赵小刚', date: '2023-03-15 17:11:38' },
    {
      time: '08-23',
      status: 0,
      content: '课题组长审批',
      name: '李四',
      date: '2023-03-15 11:24:52',
    },
  ]);

  const journalData = ref([
    { date: '2024-01-10 10:59:34', content: '供货商取消配送' },
    { date: '2024-01-10 10:59:20', content: '供货商生成配送单' },
    { date: '2024-01-10 10:59:19', content: '提交购物车' },
  ]);

  const copyBtn = async (text) => {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(text);
      return message.success('复制成功');
    } else {
      // 不存在使用 老版本API execCommand
      try {
        const t = document.createElement('textarea');
        t.nodeValue = text;
        t.value = text;
        document.body.appendChild(t);
        t.select();
        document.execCommand('copy');
        document.body.removeChild(t);
        message.success('复制成功');
      } catch (e) {
        console.log(e);
        message.error('复制失败');
      }
    }
  };
</script>

<template>
  <div>
    <Card class="card">
      <descriptions title="订单信息" bordered>
        <descriptions-item label="订单编号">
          PO9532145684115
          <Button type="link" @click="copyBtn('PO9532145684115')">复制</Button>
        </descriptions-item>
        <descriptions-item label="订单提交时间">2024-01-23 11:11:11</descriptions-item>
        <descriptions-item label="供货商名称">背景金诚唯可科技有限公司</descriptions-item>
        <descriptions-item label="课题组">RG00262-李四</descriptions-item>
        <descriptions-item label="提交人姓名">李四</descriptions-item>
        <descriptions-item label="供货商联系人">王五</descriptions-item>
        <descriptions-item label="课题负责人">张三</descriptions-item>
        <descriptions-item label="收货地址">门诊综合楼7层</descriptions-item>
        <descriptions-item label="供货商电话">17555555555</descriptions-item>
        <descriptions-item label="课题卡号">232323251222</descriptions-item>
        <descriptions-item label="经费账号">23232515151545</descriptions-item>
        <descriptions-item label="供货商邮箱">17555555555@163.com</descriptions-item>
      </descriptions>
    </Card>

    <Card class="card">
      <div class="ant-descriptions-title">商品信息</div>
      <Table :columns="columns" :dataSource="dataSource" :pagination="false" rowKey="id">
        <template #shop="{ record }">
          <div style="display: flex; align-items: center">
            <Image :width="100" :src="record.shop.url" />
            <div style="flex: 1; margin-left: 10px">
              <div>品名：{{ record.shop.name }}</div>
              <div>品牌：{{ record.shop.brand }}</div>
              <div>规格：{{ record.shop.gg }}</div>
              <div>货号：{{ record.shop.hh }}</div>
              <div>分类：{{ record.shop.class }}</div>
            </div>
          </div>
        </template>
      </Table>
    </Card>

    <Row :gutter="20">
      <Col :span="8">
        <Card class="card">
          <descriptions title="签收信息" :column="1">
            <descriptions-item label="签收人">张三</descriptions-item>
            <descriptions-item label="签收时间">2022-03-04 17:03:26</descriptions-item>
            <descriptions-item label="签名图">
              <Image
                :width="100"
                src="https://img0.baidu.com/it/u=3225876745,1673834470&fm=253&fmt=auto&app=138&f=GIF?w=500&h=200"
              />
            </descriptions-item>
          </descriptions>
        </Card>
      </Col>
      <Col :span="8">
        <Card class="card">
          <descriptions title="配送信息" :column="1">
            <descriptions-item label="配送单号">TM230156-0032</descriptions-item>
            <descriptions-item label="配送码">
              <Image
                :width="100"
                src="https://img1.baidu.com/it/u=2023762443,3075309141&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200"
              />
            </descriptions-item>
          </descriptions>
        </Card>
      </Col>
      <Col :span="8">
        <Card class="card">
          <descriptions title="配送信息" :column="1">
            <descriptions-item label="结算单">2897521463</descriptions-item>
            <descriptions-item label="结算发起时间">2023-03-11 16:08:38</descriptions-item>
          </descriptions>
        </Card>
      </Col>
    </Row>
    <Row style="margin-top: 20px" :gutter="20">
      <Col :span="12">
        <Card class="card">
          <div class="ant-descriptions-title" style="margin-bottom: 20px">订单审批流程</div>
          <Timeline>
            <TimelineItem
              v-for="(item, index) in timelineData"
              :key="index"
              :color="item.status === 1 ? 'green' : item.status === 2 ? 'red' : 'gray'"
            >
              <p>{{ item.time }}</p>
              <div style="font-size: 14px">
                <span style="color: #000000">{{ item.name }}</span>
                <span>
                  <span v-if="item.status === 1" style="color: green; margin-left: 10px"
                    >审批通过</span
                  >
                  <span v-else-if="item.status === 2" style="color: red; margin-left: 10px"
                    >审批拒绝，拒绝意愿：提交的资料数据不完整，请补全之后再提交</span
                  >
                </span>
              </div>
              <div style="font-size: 13px; margin: 5px 0">{{ item.content }}</div>
              <div style="font-size: 12px; color: #cccccc">{{ item.date }}</div>
            </TimelineItem>
          </Timeline>
        </Card>
      </Col>
      <Col :span="12">
        <Card class="card">
          <div class="ant-descriptions-title" style="margin-bottom: 20px">订单操作日志</div>
          <div>
            <div v-for="(item, index) in journalData" :key="index">
              <span class="label">{{ item.date }}</span>
              <span class="value">{{ item.content }}</span>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
    <Card class="card" style="margin-top: 20px">
      <descriptions title="订单售后/退货" bordered>
        <descriptions-item label="订单取消发起时间">2023-12-23 15:56:24</descriptions-item>
        <descriptions-item label="订单取消发起人员">王五</descriptions-item>
        <descriptions-item label="订单取消原因">***********</descriptions-item>
        <descriptions-item label="订单取消处理时间">2023-12-23 15:56:24</descriptions-item>
        <descriptions-item label="订单取消处理人员">王五</descriptions-item>
        <descriptions-item label="订单取消操作">拒绝/拒绝原因***********</descriptions-item>
        <descriptions-item label="订单仲裁处理时间">2023-12-23 15:56:24</descriptions-item>
        <descriptions-item label="订单仲裁处理人员">客服001</descriptions-item>
        <descriptions-item label="订单仲裁操作">订单取消</descriptions-item>
      </descriptions>
    </Card>
  </div>
</template>

<style lang="less" scoped>
  .card {
    border-radius: 10px;
    margin-bottom: 20px;
    height: 100%;

    .label,
    .value {
      //font-size: 16px;
    }
    .value {
      margin-left: 20px;
    }
  }
</style>
