<template>
  <scroll-view scroll-y>
    <view class='content'>
      <view class='countdown c-flex-row' v-if='orderBean?.order.payStatus==1'>
        <image :src='assetsUrl("ic_order.png")' />
        <view class='c-flex-column'>
          <text>
            待支付
          </text>
          <view class='c-flex-row'>
            <image :src='assetsUrl("ic_time.png")' />
            <text>支付剩余时间
              <text style='color: #F32B2B'>05:23</text>
            </text>
          </view>
        </view>
      </view>
      <view class='address-view c-flex-column'>
        <view class='user-info c-flex-row'>
          <text>默认</text>
          <text>黄先生</text>
          <text>155****6532</text>
          <view style='flex: 1' />
          <text style='color: #5B96FB'>复制</text>
        </view>

        <view class='addr c-flex-row'>
          <image :src='assetsUrl("ic_location.png")' />
          <text>湖南省 长沙市 详细地址详细地址详细地址</text>
        </view>
        <image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
      </view>

      <view class='goods-info-view c-flex-column'>
        <view class='c-flex-row' style='margin-bottom: 20rpx' v-for='(item,index) in orderBean?.order.orderGoods'
              :key='index'>
          <image class='goods-image' :src='item.stockStock.images' />
          <view class='c-flex-column' style='flex: 1;'>
            <view class='c-flex-row'>
              <text class='goods-name'>{{ item.goodsName }}</text>
            </view>
            <text style='color: #999999;margin-top: 30rpx'>
              {{ item.goodsCode }}
            </text>
            <view class='bottom-view c-flex-row'>
              <text>
                {{ item.stockStock.colorName }}，{{ item.stockStock.sizeName }} x{{ item.goodsNum }}
              </text>
              <text>{{ item.consumePrice }}</text>
            </view>
          </view>
        </view>

        <view class='divider' />

        <view class='remark-view c-flex-row'>
          <text style='flex: 1'>备注</text>
          <text>{{ orderBean?.order?.remark || '无备注' }}</text>
        </view>
      </view>

      <view class='card-view'>
        <view class='c-flex-row'>
          <text class='card-view-title'>商品总价</text>
          <text class='card-view-value'>￥{{ orderBean?.order?.totalPrice }}</text>
        </view>
        <view class='c-flex-row'>
          <text class='card-view-title'>运费</text>
          <text class='card-view-value'>￥0</text>
        </view>
        <view class='c-flex-row'>
          <text class='card-view-title'>优惠券
            <text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
          </text>
          <text class='card-view-value' style='color: #F32B2B;margin: 0'>-￥{{ orderBean?.order?.reducePrice }}
          </text>
        </view>
        <view class='divider' />
        <view class='c-flex-row'>
          <view style='flex: 1' />
          <view class='c-flex-row'>
            <text class='card-view-value'>共{{ orderBean?.order?.itemNum }}件商品 合计：
              <text style='font-size: 34rpx;color:#F32B2B'>¥{{ orderBean?.order?.totalPrice }}</text>
            </text>
          </view>
        </view>
      </view>

      <view class='order-no c-flex-column'>
        <text>订单编号：{{ orderBean?.order?.id }}
          <text style='color: #5B96FB;margin-left: 10rpx'>复制</text>
        </text>
        <text>下单时间：{{ orderBean?.order?.createTime }}</text>
      </view>

      <view class='bottom-action-view c-flex-row' v-if='orderBean?.order.payStatus==1'>
        <text @click.stop='cancel' style='display: none'>取消订单</text>
        <sqb-pay @bindnavigateTo='navigateTo'
                 :return_url='buildSqbParams.return_url'
                 :total_amount='buildSqbParams.total_amount'
                 :terminal_sn='buildSqbParams.terminal_sn'
                 :client_sn='buildSqbParams.client_sn'
                 :subject='buildSqbParams.subject'
                 :merchant_name='buildSqbParams.merchant_name'
                 :notify_url='buildSqbParams.notify_url'
                 :sign='buildSqbParams.sign'>
          <button @click='payment'>立即支付</button>
        </sqb-pay>
      </view>
    </view>
  </scroll-view>
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { getOrderDetail } from '@/api/order';
import { OrderBean } from '@/api/order/types';
import { parseParameter, sortASCII } from '@/utils';
import { hexMD5 } from '@/utils/common/md5';
import { useUserStore } from '@/store';

const userState = useUserStore();
const { terminalInfo } = storeToRefs(userState);

const orderBean = ref<{
  order: OrderBean,
  stock: any[],
  paymentList: []
}>();

onLoad(async (e: any) => {
  await uni.showLoading();
  orderBean.value = await getOrderDetail(e.orderId);
  uni.hideLoading();
});

const buildSqbParams = computed(() => {
  const params = sortASCII({
    client_sn: orderBean.value?.order?.id || '',
    return_url: '/pages/common/payresult/index',
    total_amount: ((orderBean.value?.order?.totalPrice || 0) * 100).toString(),
    terminal_sn: terminalInfo.value.terminalSn,
    subject: '商品支付',
    merchant_name: terminalInfo.value.companyName,
    notify_url: 'https://www.baidu.com'
  }, true);
  return {
    ...params,
    sign: hexMD5(parseParameter(params) + '&key=' + terminalInfo.value.terminalKey).toUpperCase()
  };
});

const navigateTo = (e: any) => {
  console.log('--------------_>>>>>>navigateTo ', e);
  uni.redirectTo({
    url: e.detail.url,
    fail(e) {
      uni.showToast({
        title: '支付失败'
      });
    }
  });
};

const cancel = () => {
};
const payment = () => {
  console.log(buildSqbParams.value);
};
</script>

<style lang='scss' scoped>
.content {
  padding: 20rpx 30rpx;
}

.countdown {
  padding: 10rpx 30rpx 30rpx 30rpx;

  image:nth-of-type(1) {
    width: 60rpx;
    height: 74rpx;
  }

  view:not(.c-flex-row):nth-of-type(1) {
    margin-left: 23rpx;

    text:nth-of-type(1) {
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
    }

    view:nth-of-type(1) {
      margin-top: 5rpx;

      image {
        width: 30rpx;
        height: 30rpx;
      }

      text {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        margin-left: 8rpx;
      }
    }
  }
}

.address-view {
  padding-top: 30rpx;
  background: #FFFFFF;

  .user-info {
    margin-left: 20rpx;
    margin-right: 20rpx;

    text:nth-of-type(1) {
      padding: 2rpx 10rpx;
      font-size: 24rpx;
      color: #F32B2B;
      border-radius: 5rpx;
      border: 1rpx solid #F32B2B;
      margin-right: 12rpx;
    }

    text:nth-of-type(n+2) {
      font-weight: bold;
      font-size: 30rpx;
      color: #333333;
      margin-left: 10rpx;
    }

    image {
      width: 8rpx;
      height: 16rpx;
    }
  }

  .addr {
    margin-top: 15rpx;
    margin-left: 20rpx;

    image {
      width: 30rpx;
      height: 37rpx;
    }

    text {
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      margin-left: 16rpx;
    }
  }

  .dashed-line {
    width: 100%;
    height: 8rpx;
    margin-top: 37rpx;
  }
}

.goods-info-view {
  display: flex;
  position: relative;
  background: #FFFFFF;
  margin-top: 20rpx;
  border-radius: 10rpx;
  padding: 30rpx 20rpx;

  .goods-image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
  }

  .goods-name {
    font-size: 30rpx;
    font-weight: 400;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 20rpx;
    color: #333333;
    flex: 1;
  }

  .bottom-view {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;

    text:nth-of-type(1) {
      font-size: 26rpx;
      font-weight: 400;
      flex: 1;
      color: #999999;
    }

    text:nth-of-type(2) {
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
    }

    text:nth-of-type(2):before {
      content: '￥';
    }

    text:nth-of-type(3) {
      font-size: 34rpx;
      color: #333333;
      font-weight: bold;
    }
  }

  .divider {
    margin: 30rpx 0;
  }

  .remark-view {
    text {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }
  }
}

.card-view {
  margin-top: 20rpx;
  padding: 0 25rpx 0 23rpx;

  view:not(.divider):nth-of-type(n+1) {
    margin: 20rpx 0;

    .card-view-title {
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      flex: 1;
    }

    .card-view-value {
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;

      image {
        width: 8rpx;
        height: 16rpx;
        margin-left: 16rpx;
      }
    }
  }
}

.order-no {
  background: #FFFFFF;
  border-radius: 10rpx;
  padding: 22rpx 23rpx;
  margin-top: 20rpx;
  margin-bottom: 200rpx;

  text:nth-of-type(n+1) {
    font-weight: 400;
    font-size: 26rpx;
    color: #333333;
  }

  text:nth-of-type(1) {
    margin-bottom: 12rpx;
  }
}

.bottom-action-view {
  background: #FFFFFF;
  position: fixed;
  height: 80rpx;
  justify-content: flex-end;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12rpx 30rpx 78rpx 30rpx;

  text:nth-of-type(1) {
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    border-radius: 50rpx;
    padding: 17rpx 45rpx;
    border: 1rpx solid #707070;
    margin-right: 20rpx;
  }

  sqb-pay button {
    padding: 0 45rpx;
    border-radius: 50rpx;
    border: 1rpx solid #F32B2B;
    font-weight: bold;
    background: #FFFFFF;
    font-size: 30rpx;
    color: #F32B2B;
  }
}
</style>
