<template>
  <div>
    <PageWrapper :title="`订单号：${ids}`" contentBackground>
      <Description
        size="middle"
        title="商品详情"
        :bordered="false"
        :useCollapse="true"
        :column="3"
        :data="refundData"
        :schema="goodsSchema"
      />
      <div>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-card
              v-for="item in refundData.goodsList"
              :key="item.id"
              :hoverable="true"
              class="`list-card__card`"
            >
              <div class="`list-card__card-title`">
                <TableImg :size="50" :simpleShow="true" :imgList="[item.listPicUrl]" />
              </div>
              <div class="`list-card__card-detail`">
                <div>{{ item.goodsName }}</div>
                ￥{{ item.retailPrice }} X {{ item.number }}
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <a-divider />
      <Description
        size="middle"
        title="订单信息"
        :bordered="false"
        :column="3"
        :data="refundData"
        :schema="refundSchema"
      />
      <a-divider />
      <Description
        size="middle"
        title="用户信息"
        :bordered="false"
        :column="3"
        :data="refundData"
        :schema="personSchema"
      />
      <a-card title="物流进度" :bordered="false">
        <a-steps :current="current" progress-dot size="small">
          <a-step title="创建订单">
            <template #description>
              <Time v-if="refundSchema.addTime" :value="refundSchema.addTime" mode="datetime" />
            </template>
          </a-step>
          <a-step title="已付款">
            <template #description>
              <Time v-if="refundSchema.payTime" :value="refundSchema.payTime" mode="datetime" />
            </template>
          </a-step>
          <a-step title="物流配送">
            <template #description>
              <p>{{ refundSchema.shippingName }} </p>
            </template>
          </a-step>
          <a-step title="已配送" />
        </a-steps>
      </a-card>

      <template #extra>
        <a-button
          type="primary"
          @click="
            router.push({
              path: '/order/list',
            })
          "
        >
          返回
        </a-button>
      </template>
    </PageWrapper>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { Description } from '/@/components/Description/index';
  import { useRoute, useRouter } from 'vue-router';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { TableImg } from '/@/components/Table';
  import { refundSchema, personData, goodsSchema, personSchema } from './data';
  import { Divider, Card, Row, Col, Steps } from 'ant-design-vue';
  import { GetOrderInfoApi } from '/@/api/order/list';
  import { Time } from '/@/components/Time';

  export default defineComponent({
    components: {
      PageWrapper,
      Description,
      TableImg,
      Time,
      [Divider.name]: Divider,
      [Card.name]: Card,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      const refundData = ref({});
      const current = ref(0);
      const route = useRoute();
      const { setTitle } = useTabs();
      const router = useRouter();
      const ids = route.params.id;
      const id = Number(route.query.id);
      const brandId = Number(route.query.brandId);
      setTitle(`No.${route.params.id} - 订单详情`);
      onMounted(async () => {
        let res = await GetOrderInfoApi({
          id,
          brandId,
        });
        refundData.value = res;
        let ordercurrent = 0;
        switch (res.orderStatus) {
          case 0:
            ordercurrent = 0;
            break;
          case 101:
            ordercurrent = 0;
            break;
          case 201:
            ordercurrent = 1;
            break;
          case 1:
            ordercurrent = 2;
            break;
          case 2:
            ordercurrent = 3;
            break;
          case 501:
            ordercurrent = 3;
            break;
          default:
            ordercurrent = 1;
            break;
        }
        current.value = ordercurrent;
      });
      return {
        refundSchema,
        refundData,
        personData,
        personSchema,
        goodsSchema,
        router,
        ids,
        current,
      };
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ant-card-body) {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .list-card {
    &__link {
      margin-top: 10px;
      font-size: 14px;

      a {
        margin-right: 30px;
      }

      span {
        margin-left: 5px;
      }
    }

    &__card {
      margin-bottom: -8px;
      display: flex;

      &-title {
        flex: 1;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 500;
        color: @text-color;

        .icon {
          margin-top: -5px;
          margin-right: 10px;
          font-size: 38px !important;
        }
      }

      &-detail {
        flex: 1;
        padding-top: 10px;
        padding-left: 30px;
        font-size: 14px;
        color: @text-color-secondary;
      }
    }
  }
</style>
