<template>
  <view>
    <loading-view v-if="isFirstLoading"></loading-view>
    <!--  -->
    <view class="bg-white rounded-xs mt-24rpx py-base px-40rpx" v-if="goodsList.length">
      <block v-for="(item, index) in goodsList" :key="index">
        <view>
          <view class="flex">
            <u-image border-radius="10" width="190rpx" height="190rpx" :src="item.sku.cover" :lazy-load="true">
            </u-image>
            <view class="flex-1 ml-16rpx w-0 flex justify-between flex-col">
              <view>
                <view>
                  <view class="line-2">{{ item.sku.name }}</view>
                </view>
                <view class="mt-10rpx">
                  <u-tag v-for="spec in item.sku.specs" :key="spec" size="mini" :text="spec" class="mr-6rpx"
                    shape="square" color="#A6A6A6" bg-color="transparent" mode="dark" />
                </view>
              </view>
              <view class="flex items-end">
                <view class="flex-1">
                  <view class="">
                    <view class="flex-1">￥{{ item.sku.sell_price }}</view>
                  </view>
                  <view class="flex items-center" v-if="item.sku.vip_price>0">
                    <view class="">￥{{ item.sku.vip_price }}</view>
                    <image class="w-58rpx h-58rpx ml-10rpx" src="/static/svg/svip.svg" mode=""></image>
                  </view>
                </view>
                <view class="text-lg"> x{{ item.quantity }} </view>
              </view>
            </view>
          </view>
        </view>
        <view class="my-20rpx" v-if="index != goodsList.length - 1">
          <u-line color="#E5E5E5" />
        </view>
      </block>
    </view>

    <!--  -->
    <view class="bg-white mt-base rounded-xs px-40rpx py-20rpx" v-if="type != 'bargains' && type != 'points'">
      <view class="flex items-center justify-between">
        <view class="text-md">选择优惠卷</view>
        <view class="flex items-center" @tap="onOpenCoupon">
          <view class="text-md text-txGray mr-10rpx">{{ couponShowText }}</view>
          <u-icon name="arrow-right" color="#808080" size="30"></u-icon>
        </view>
      </view>
      <view class="text-gray-400 text-sm">因系统迁移优惠券问题请联系客服</view>
    </view>
    <!--  -->
    <view class="bg-white mt-base rounded-xs pb-base px-40rpx pt-rowSm text-md">
      <view class="flex items-center justify-between py-rowSm text-txBase" v-if="orderInfo.total_points>0">
        <view>抵扣积分</view>
        <view>{{ orderInfo.total_points }}</view>
      </view>
      <view class="flex items-center justify-between py-rowSm text-txBase">
        <view>商品金额</view>
        <view>￥{{ orderInfo.products_total_amount }}</view>
      </view>
      <view class="flex items-center justify-between py-rowSm text-txBase">
        <view>运费</view>
        <view>￥{{ orderInfo.shipping_fee }}</view>
      </view>
      <view class="flex items-center justify-between py-rowSm text-txBase"
        v-if="type != 'bargains' && type != 'points'">
        <view>优惠卷</view>
        <view class="text-bgSubtitle">-￥{{ orderInfo.coupon_discount_amount }}</view>
      </view>
      <view class="flex items-center justify-between py-rowSm text-txBase">
        <view>会员优惠</view>
        <view class="text-bgSubtitle">-￥{{ orderInfo.vip_discount_amount }}</view>
      </view>
      <view class="flex items-center justify-between py-rowSm text-txBase" v-if="type == 'bargains'">
        <view>砍价优惠</view>
        <view class="text-bgSubtitle">-￥{{ orderInfo.bargain_amount }}</view>
      </view>
      <!--  -->
      <view class="text-md border-t border-txBorder flex items-center justify-end py-base">
        <view class="text-txBase">实付金额：</view>
        <view class="text-bgSubtitle">￥{{ orderInfo.total_amount }}</view>
      </view>
      <!--  -->
      <view class="border-t border-txBorder pt-base text-md">
        <textarea :adjust-position="false" v-model="remarks" class="min-h-130rpx w-full" placeholder-style="text-h999"
          placeholder="订单备注：" maxlength="100" auto-height></textarea>
      </view>
    </view>

    <cu-popup v-model="couponShow" mode="bottom" border-radius="20" closeable close-icon-size="24">
      <view>
        <view class="text-center py-30rpx text-lg">优惠券</view>
        <scroll-view scroll-y="true" class="max-h-900rpx bg-hex-f6f6f6">
          <coupon-list v-model="tempCouponId" :list="couponsList"></coupon-list>
        </scroll-view>
        <view class="p-base">
          <view class="btn bg-hex-FB4A34 h-84rpx leading-84rpx text-white" @tap="onCounponChange">
            <text>确定</text>
          </view>
        </view>
      </view>
    </cu-popup>

    <!--  -->
    <view class="h-130rpx"></view>
    <!--  -->
    <view class="flex items-center justify-end bg-white shadow-up fixed right-0 left-0 bottom-0 cu-bar tabbar">
      <view class="text-md text-txBase">
        合计: <text class="text-xl" v-if="orderInfo.total_points >0"> {{orderInfo.total_points}}积分+</text> <text
          class="text-xl text-txSvip">￥{{ orderInfo.total_amount }}</text>
      </view>
      <view @tap="createOrder"
        class="w-180rpx h-66rpx leading-66rpx text-center text-lg ml-40rpx text-white bg-primary rounded-lg mr-base">
        提交订单
      </view>
    </view>



  </view>
</template>

<script>
  let btnLoading = false;
  import {
    add
  } from '@/utils'
  export default {
    data() {
      return {
        couponId: '',
        goodsList: [],
        orderInfo: {},
        remarks: '',
        tempCouponId: '',
        couponShow: false,
        isFirstLoading: true,
        cuId: null
      };
    },
    onLoad({
      id
    }) {
      this.cuId = id
    },

    computed: {
      //优惠券列表
      couponsList() {
        return this.orderInfo?.coupons ?? [];
      },
      //优惠券文本显示
      couponShowText() {
        if (!!this.couponId) return this.currentCoupon?.name ?? '已过期';
        if (this.couponsList.length) return `${this.couponsList.length}张可用`;
        else return '当前无可用';
      },
      //当前优惠券
      currentCoupon() {
        const coupon = this.couponsList.find((e) => e.id == this.couponId);
        return coupon;
      },
    },
    onShow() {
      setTimeout(() => {
        this.getDetail();
      }, 200)
    },
    methods: {
      //创建订单
      async createOrder() {
        const params = {
          coupon_id: this.couponId,
          note: this.remarks,
          order_pre: this.cuId
        };
        if (btnLoading) return;
        btnLoading = true;

        try {
          const order = await this.$api.post(`v1/order/orders`, params);
          if (order.status == 1 || order.status == 2) { //支付成功
            this.$u.routeAuth({
              url: '/pages/payment_results/payment_results',
              type: 'redirectTo',
              params: {
                id: order.id,
                type: 'success',
              },
            });
          } else if (order.status == 0) { //待付款
            this.$u.routeAuth({
              url: '/pages/confirm_payment/confirm_payment',
              type: 'redirectTo',
              params: {
                id: order.id
              }
            });
          }
        } catch (error) {
          // console.log(error);
        } finally {
          btnLoading = false;
        }
      },
      //优惠券改变
      onCounponChange() {
        this.couponId = this.tempCouponId;
        this.getDetail();
        this.couponShow = false;
      },
      onOpenCoupon() {
        if (this.couponsList.length == 0) return this.$u.toast('当前无可用优惠券')
        this.couponShow = true
      },

      //确认订单详情
      async getDetail() {
        if (!this.isLogin) return uni.navigateTo({
          url: '/pages/login/index'
        });
        const params = {
          coupon_id: this.couponId,
          order_pre: this.cuId
        };
        try {
          let orderInfo = await this.$api.post('/v1/order/verify-order', params);
          this.goodsList = orderInfo.products;
          this.orderInfo = orderInfo;
        } catch (error) {
          console.log(error, '32');
          uni.switchTab({
            url: '/pages/index/index'
          })
          console.log(error);
        } finally {
          this.isFirstLoading = false
        }
      },
    },
    watch: {
      couponShow(e) {
        if (e) this.tempCouponId = this.couponId;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .listChid:last-child {
    border: 0;
  }
</style>
