<template>
  <ui-page-layout :title="$t('订单详情')">
    <div class="px-24rem py-24rem">
      <div v-if="type === 'product'"  class="rounded-10rem bg-white pt-34rem pl-34rem pr-24rem pb-24rem mb-24rem">
        <div class="flex items-center mb-30rem">
          <div class="text-size-36rem text-black ">
            {{item.linkman}}
          </div>
          <div class="text-size-30rem text-[#686868] ml-10rem font-light">
            {{item.phone}}
          </div>
        </div>
        <div class="text-size-30rem text-[#686868] font-light leading-42rem">
          {{item.address}}
        </div>

      </div>
      <div v-if="type === 'vip'" class=" h-100rem px-34rem flex justify-between items-center mb-24rem text-size-30rem bg-white rounded-10rem">
        <div>{{item.refVipSmName}}</div>
        <div class="text-[#686868]">{{item.expire}}天</div>
        <div class="text-primary font-light">¥{{item.sum.toFixed(2)}}</div>
      </div>
      <div class="pt-46rem pl-34rem pr-26rem bg-white rounded-10rem pb-105rem">
        <div v-if="type === 'product'" class="h-150rem flex mb-68rem">
          <img src="/imgs/article_cover_small1.png" class="w-150rem h-150rem object-cover" />
          <div class="ml-20rem flex flex-col justify-between">
            <div class="text-size-30rem">
               {{item.name}}
            </div>
            <div class="flex justify-between items-center">
              <div class="text-size-30rem text-primary font-light">¥{{item.price.toFixed(2)}}</div>
              <div class="text-size-30rem text-[#686868] font-light">x{{item.num}}</div>
            </div>
          </div>
        </div>
        <order-detail-info-item label="订单号" :value="item.number"></order-detail-info-item>
        <order-detail-info-item label="下单时间" :value="item.createTimeStr"></order-detail-info-item>
        <order-detail-info-item label="支付时间" :value="item.payTimeStr"></order-detail-info-item>
        <order-detail-info-item label="实付金额" :value="item.sum.toFixed(2)"></order-detail-info-item>
        <order-detail-info-item label="交易状态" :value="$t(item.statusDesc)"></order-detail-info-item>
        <order-detail-info-item label="商家备注" :value="item.remark"></order-detail-info-item>


      </div>

      <div class="flex justify-center pt-32rem">
        <div
                v-if="item.status === '2'"
                class="right-30rem  w-280rem h-70rem bg-primary rounded-full flex justify-center items-center text-size-30rem text-white">
          {{$t('去支付')}}
        </div>
      </div>


    </div>
  </ui-page-layout>
</template>

<script>
export default {
  data(){
    return {
      type:'',
      item:{}
    }
  },
  created() {
    this.type = this.$route.query.type;
    this.item = JSON.parse(decodeURIComponent(this.$route.query.data));
  }
};
</script>

<style>

</style>
