<template>
  <view>
    <loading-view v-if="isFirstLoading"></loading-view>
    <u-navbar>
      <view class="text-center w-full ">
        <block v-if="detail.status >= 0">
          <view class="text-lg font-medium">{{ detail.status | payStatusText }}</view>
          <view class="text-xs" v-if="detail.status == 0">
            <u-count-down :timestamp="detail.expires_at" font-size="20" separator="zh" separator-size="20"
              @end="onCountEnd"></u-count-down>
          </view>
        </block>
        <view v-else class="text-lg font-medium">订单详情</view>
      </view>
    </u-navbar>
    <view class="bg-white mt-20rpx py-base px-40rpx">
      <block v-for="(item, index) in products" :key="index">
        <view @tap="$u.routeAuth('/pages/product_details/index', { skuId: index})" class="mb-base">
          <view class="flex">
            <u-image border-radius="10" width="190rpx" height="190rpx"
              src="http://zcs-test.oss-cn-chengdu.aliyuncs.com/product-spus/cover/2022-04-22/f6f96cba9ba86197e58ea3c2ce93b2a1.jpg"
              :lazy-load="true"></u-image>
            <view class="flex-1 ml-16rpx w-0 flex justify-between flex-col">
              <view>
                <view>
                  <view class="line-2">商品名称商品名称商品名称商品商品名称商品名称商品名称商品商品名称商品名称商品名称商品</view>
                </view>
              </view>
              <view class="flex items-end">
                <view class="flex-1">
                  <view class="">
                    <view class="flex-1 price-text">390</view>
                  </view>
                  <view class="flex items-center" >
                    <view class="price-text">300</view>
                    <image class="w-58rpx h-58rpx ml-10rpx" src="/static/images/svip.svg" mode=""></image>
                  </view>
                </view>
                <view class="text-lg"> x20</view>
              </view>
            </view>
          </view>
        </view>
        <view class="my-20rpx" v-if="index != products.length - 1">
          <u-line color="#E5E5E5" />
        </view>
      </block>
      <view class="mt-20rpx">
        <view class="h-50rpx leading-50rpx flex justify-between">
          <text class="text-black">商品金额</text>
          <text class="price-text">390</text>
        </view>
        <view class="h-50rpx leading-50rpx flex justify-between">
          <text class="text-black">运费</text>
          <text class="price-text">0</text>
        </view>
      </view>
      <u-line color="#E5E5E5" />
      <view class="flex justify-end mt-base">
        <text class="text-lg text-black">实付金额：</text>
        <text class="text-warning text-xl ">￥999</text>
      </view>
    </view>
    <view class="bg-white mt-20rpx py-base px-40rpx">
      <view class="flex items-center justify-between">
        <view class="h-50rpx leading-50rpx text-md text-black">订单编号：12345678912345678</view>
        <view @tap="copy(detail.sn)" class="border border-solid border-hex-A6A6A6 rounded-full px-base py-6rpx">复制</view>
      </view>
      <view class="h-50rpx leading-50rpx text-md text-black">下单时间：2022-12-12</view>
      <view class="h-50rpx leading-50rpx text-md text-black" >支付时间：2022-12-12</view>
    </view>
    <!-- 底部导航栏 -->
    <block>
      <view class="h-120rpx"></view>
      <view class="fixed bg-white bottom-0 w-full px-40rpx">
        <view class="flex justify-end h-100rpx items-center">
          <view  class="border border-hex-A6A6A6 border-solid rounded-full px-20rpx py-10rpx ml-base">取消订单</view>
          <view class="border border-hex-A6A6A6 border-solid rounded-full px-20rpx py-10rpx ml-base" >立即付款</view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
  import uniCopy from '@/utils/uni-copy';
  export default {
    data() {
      return {
        isFirstLoading: false,
        products: [{}, {}, {}],
        detail: {}
      };
    },

    methods: {
      //复制
      copy(val) {
        uniCopy({
          content: val ?? '',
          success: (res) => {
            this.$u.toast(res);
          },
          error: (e) => {
            this.$u.toast(e);
          },
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
</style>
