<template>
  <scroll-view scroll-y>
    <view class='content'>
      <view class='c-flex-row'>
        <view class='tab c-flex-row' :class='{"tab-active": tabIndex === 0}' @click.stop='tabIndex=0'>
          <image :src='assetsUrl("ic_order_dd.png")' />
          <text>到店</text>
        </view>
        <view class='tab c-flex-row' :class='{"tab-active": tabIndex === 1}' @click.stop='tabIndex=1'>
          <image :src='assetsUrl("ic_order_yj.png")' />
          <text>邮寄</text>
        </view>
      </view>

      <view v-show='tabIndex==1' class='address-view c-flex-column'
            @click.stop='goPath("/pages/mine/subs/address/index")'>

        <view v-if='deliveryAddress?.addrid'>
          <view class='user-info c-flex-row'>
            <text class='status' v-if='deliveryAddress?.defaultstatus==1'>默认</text>
            <text>{{ deliveryAddress?.name }}</text>
            <text>{{ deliveryAddress?.mobile }}</text>
            <view style='flex: 1' />
            <image :src='assetsUrl("ic_arrow_right_gray.png")' />
          </view>

          <view class='addr c-flex-row'>
            <image :src='assetsUrl("ic_location.png")' />
            <text>{{ deliveryAddress?.addr }}</text>
          </view>
        </view>
        <view v-else class='user-info c-flex-row'>
          <text style='flex: 1'>请选择收货地址</text>
          <image :src='assetsUrl("ic_arrow_right_gray.png")' />
        </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?.orderGoods'
              :key='index'>
          <image class='goods-image' :src='item.images||defaultImage' />
          <view class='c-flex-column' style='flex: 1;'>
            <view class='c-flex-row'>
              <text class='goods-name'>{{ item.name || '未知' }}</text>
            </view>
            <text style='color: #999999;margin-top: 30rpx'>
              {{ item.code }}
            </text>
            <view class='bottom-sku-view c-flex-row'>
              <text>
                {{ item.checkedStock.colorName || '均色' }}，{{ item.checkedStock.sizeName || '均码' }}
                x{{ item.checkedStock.count }}
              </text>
              <text>¥{{ item.price }}</text>
            </view>
          </view>
        </view>
        <view class='divider' />

        <view class='remark-view c-flex-row'>
          <text>备注</text>
          <input placeholder='请填写订单备注' @input='orderBean!.remark = $event.detail.value' />
        </view>
      </view>

      <view class='card-view'>
        <view class='c-flex-row'>
          <text class='card-view-title'>商品总价</text>
          <text class='card-view-value'>￥{{ orderBean?.totalPrice || 0 }}</text>
        </view>
        <view class='c-flex-row' style='display: none'>
          <text class='card-view-title'>运费</text>
          <text class='card-view-value'>￥0</text>
        </view>
        <view class='c-flex-row' @click.stop='showCouponDialog'>
          <text class='card-view-title'>优惠券
            <text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
          </text>
          <view class='card-view-value' style='color: #F32B2B;margin: 0'>-￥{{ checkedCoupon?.reduce || 0 }}
            <image :src='assetsUrl("ic_arrow_right_gray.png")' />
          </view>
        </view>
        <view class='divider' />
        <view class='c-flex-row'>
          <view style='flex: 1' />
          <view class='c-flex-row'>
            <text class='card-view-value'>共1件商品 合计：
              <text style='font-size: 34rpx;color:#F32B2B'>¥{{ totalPrice || 0 }}</text>
            </text>
          </view>
        </view>
      </view>

      <view class='payment-way c-flex-row' @click.stop='changePayment'>
        <text>支付方式</text>
        <view>{{ paymentType === 0 ? '微信支付' : '余额' }}
          <image style='display: none' :src='assetsUrl("ic_arrow_right_gray.png")' />
        </view>
      </view>

      <view class='bottom-view c-flex-row'>
        <text>合计</text>
        <text>￥{{ totalPrice || 0 }}</text>
        <sqb-pay @navigateTo='navigateTo'
                 :return_url='buildSqbParams.return_url'
                 :total_amount='buildSqbParams.total_amount'
                 :terminal_sn='buildSqbParams.terminal_sn'
                 :client_sn='buildSqbParams.client_sn'
                 :subject='buildSqbParams.subject'
                 :subject_img='buildSqbParams.subject_img '
                 :merchant_name='buildSqbParams.merchant_name'
                 :notify_url='buildSqbParams.notify_url'
                 :sign='buildSqbParams.sign'>
          <button class='confirm-order' @click='createOrder'>确认订单</button>
        </sqb-pay>
      </view>
    </view>
  </scroll-view>
  <payment-dialog ref='paymentDialogRef' @change='args => paymentType=args' />
  <coupon-dialog ref='couponDialogRef' @confirm='confirmCoupon' :order-price='orderBean?.totalPrice' />
</template>

<script lang='ts' setup>
import { assetsUrl, defaultImage } from '@/utils/assets';
import PaymentDialog from '@/components/payment-dialog.vue';
import CouponDialog from '@/pages/mall/subs/components/coupon-dialog.vue';
import { goPath, parseParameter, showToast, sortASCII } from '@/utils';
import { hexMD5 } from '@/utils/common/md5';
import { getPaymentList, orderCreate, overPayment } from '@/api/order';
import { CouponBean } from '@/api/user/types';
import { OrderBean } from '@/api/order/types';
import { useUserStore } from '@/store';
import { handlePayResult } from '@/utils/order';
import useShoppingCartStore from '@/store/modules/shoppingcart';

const userStore = useUserStore();
const { userInfo, terminalInfo, deliveryAddress } = storeToRefs(userStore);
const shoppingCartStore = useShoppingCartStore();

const couponDialogRef = ref();
const paymentDialogRef = ref();
const paymentType = ref(0);
const tabIndex = ref(0);

const checkedCoupon = ref<CouponBean>();

const orderBean = ref<OrderBean>();

onLoad((e) => {
  orderBean.value = JSON.parse(decodeURIComponent(e?.orderBean));
  createOrder();
});

const totalPrice = computed(() => {
  return (orderBean?.value?.totalPrice || 0) - (checkedCoupon.value?.reduce || 0);
});

const buildSqbParams = computed(() => {
  const params = sortASCII({
    client_sn: orderBean.value?.id || '',
    return_url: '/pages/common/payresult/index',
    total_amount: Number(((totalPrice.value || 0) * 100).toFixed(2)),
    terminal_sn: terminalInfo.value?.terminalSn,
    subject: orderBean?.value?.orderGoods[0].name || '未知',
    subject_img: orderBean?.value?.orderGoods[0].images || '',
    merchant_name: terminalInfo.value?.companyName,
    notify_url: 'https://www.baidu.com'
  }, true);

  return {
    ...params,
    sign: hexMD5(parseParameter(params) + '&key=' + terminalInfo.value?.terminalKey).toUpperCase()
  };
});

const changePayment = () => {
  // paymentDialogRef.value.show();
};

const showCouponDialog = () => {
  couponDialogRef.value.show();
};

const confirmCoupon = (item: CouponBean) => {
  checkedCoupon.value = item;
  createOrder();
};
const navigateTo = (e: any) => {
  handlePayResult(orderBean.value?.id, e, {
    onSuccess: () => {
      console.log('pay success');
      payment();
    },
    onFailure: () => {
      console.error('pay onFailure');
      if(orderBean.value?.id) {
        orderBean.value.id = '';
      }
      createOrder();
    }
  });
};

const createOrder = async () => {
  if(!terminalInfo.value) {
    showToast('当前店铺未配置收款渠道，请联系商家');
    return;
  }
  //邮寄
  if(tabIndex.value == 1 && !deliveryAddress.value.addrid) {
    showToast('请选择收货地址');
    return;
  }
  const params = {
    // 'discount': 0,
    // 'freePrice': 0,
    'reducePrice': checkedCoupon.value == undefined ? 0 : checkedCoupon.value?.reduce,
    'totalPrice': totalPrice.value,
    // 'integral': 0,
    // 'allowIntegral': 0,
    // 'produceIntegralNumber': 0,
    'couponIds': checkedCoupon.value?.id,
    'remark': orderBean.value?.remark,
    'address': tabIndex.value == 0 ? undefined : JSON.stringify(deliveryAddress.value),
    'orderGoods': orderBean?.value?.orderGoods?.map(item => (
      {
        'goodsId': item.id,
        'goodsCode': item.code,
        'goodsNum': item.checkedStock.count,
        'stockId': item.checkedStock.stockId,
        'originPrice': item.price,
        // 'consumePrice': item.price * ((userInfo.value?.levelEntity?.discount || 0) / 100),
        'consumePrice': item.consumePrice,
        'discount': userInfo.value?.levelEntity?.discount || 0
        // 'discountOriginPrice': 0,
        // 'produceIntegral': 0,
        // 'priceModify': [0],
        // 'offset': 0
      }
    ))
  };

  if(orderBean.value?.id == undefined || orderBean.value?.id == '') {
    await uni.showLoading();
    const result = await orderCreate(params);
    orderBean.value!.id = result.id;
    uni.hideLoading();
  }

  //删除购物车已存在商品
  orderBean?.value?.orderGoods?.forEach(item => {
    const index = shoppingCartStore.getSameGoodsIndex(item.id, item.checkedStock.colorId, item.checkedStock.sizeId);
    if(index >= 0) {
      shoppingCartStore.delete(index);
    }
  });
};

const payment = async () => {
  await uni.showLoading();
  const paymentList = await getPaymentList(orderBean.value?.id || '');
  const paymentParams = {
    orderId: orderBean?.value?.id,
    produceIntegralNumber: Math.round((orderBean?.value?.totalPrice || 0) + (orderBean?.value?.useGold || 0)),
    transactionPrice: orderBean?.value?.totalPrice,
    useGold: orderBean.value?.useGold || 0,
    detailBos: [{
      integralNumber: Math.floor(orderBean?.value?.totalPrice || 0),
      onlinePayResult: '',
      payName: '收钱吧',
      payTypeId: paymentList.find((res: any) => res.type === 'ShouQianBa')?.id,
      transactionPrice: Number(orderBean?.value?.totalPrice)
    }]
  };
  await overPayment(paymentParams);
  showToast('支付成功', {
    icon: 'success',
    complete: () => {
      uni.navigateBack();
      uni.hideLoading();
    }
  });
};
</script>

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

.tab {
  height: 63rpx;
  background: #E8E8E8;
  border-radius: 10rpx 0 10rpx 0;
  align-items: center;
  justify-content: center;
  margin-top: 17rpx;
  flex: 1;

  text {
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    margin-left: 10rpx;
  }
}

.tab:nth-of-type(1) {
  border-radius: 10rpx 0 0 0;
}

.tab:nth-of-type(2) {
  border-radius: 0 10rpx 0 0;
}

.tab-active {
  background: #FFFFFF;
}

.tab:nth-of-type(1) image {
  width: 42rpx;
  height: 42rpx;
}

.tab:nth-of-type(2) image {
  width: 38rpx;
  height: 29rpx;
}

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

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

    .status {
      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-sku-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-size: 30rpx;
      color: #333333;
      font-weight: bold;
      margin-right: 5rpx;
    }

    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;
      flex: 1;
    }

    input {
      min-width: 200rpx;
      font-weight: 400;
      text-align: right;
      font-size: 28rpx;
      color: #333333;
      z-index: 0;
    }
  }
}

.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;
      }
    }
  }
}

.payment-way {
  background: #FFFFFF;
  border-radius: 10rpx;
  padding: 22rpx 23rpx;
  margin-top: 20rpx;

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

  view:nth-of-type(1) {
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;

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

.bottom-view {
  background: #FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx 78rpx 30rpx;

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

  text:nth-of-type(2) {
    font-weight: bold;
    font-size: 36rpx;
    color: #F32B2B;
    margin-left: 14rpx;
    flex: 1;
  }

  sqb-pay .confirm-order {
    display: flex;
    padding: 0 45rpx;
    height: 80rpx;
    border: 2rpx solid #F32B2B;
    font-weight: bold;
    font-size: 30rpx;
    color: #F32B2B;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 40rpx;
  }
}
</style>
