<template>
  <view class="">
    <!-- 方式支付弹窗 -->
    <u-popup :show="modeShow" bgColor="#F6F8FA" :closeable="true" round="12" @close="canclePop">
      <view class="popBox iosAuto">
        <view class="title">选择支付方式</view>
        <view class="popModeBox flexJ" v-for="(item, index) in payMode" :key="item.id" @click="checkPay(index)">
          <view class="mode flexA">
            <image :src="item.modeUrl" mode=""></image>
            {{ item.name }}
          </view>
          <image v-if="item.shows" :src="defaultMode == index ? '/static/shopCarIc/modeCheck.png' : '/static/shopCarIc/checks.png'" mode=""></image>
          <view class="insufficient flexA" v-else @click="goRecharge">
            余额不足
            <view class="go flexA">
              去充值
              <image src="/static/indexIc/orangeRight.png" mode=""></image>
            </view>
          </view>
        </view>
        <view class="subOrder flexC" @click="subOrder">提交订单</view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance, defineEmits, watchEffect } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getPay, getOrderPay, getCarPay } from '@/api/'
const props = defineProps({
  payParams: {
    type: Object,
    default: {}
  },
  modeShow: {
    type: Boolean,
    default: false
  },
  adressId: {
    type: String,
    default: ''
  },
  // 商品总价
  totalPrice: {
    type: String,
    default: 0
  },
  // 余额
  balance: {
    type: String,
    default: ''
  },
  // 是否订单支付
  isOrderPay: {
    type: Boolean,
    default: false
  },
  orderId: {
    type: String,
    default: ''
  },
  // 购物车id
  carId: {
    type: String,
    default: ''
  }
})
onMounted(() => {
  setTimeout(() => {
    if (props.totalPrice > +props.balance) {
      payMode[1].shows = false
    }
  }, 100)
})
watchEffect(() => {
  console.log('余额', props.balance) //余额不足点击充值，返回页面刷新余额
  if (props.totalPrice < +props.balance) {
    payMode[1].shows = true
  }
})
// 支付方式数组
const payMode = reactive([
  { id: 1, name: '微信支付', check: true, modeUrl: '/static/shopCarIc/weCaat.png', shows: true },
  { id: 2, name: '余额支付', check: false, modeUrl: '/static/shopCarIc/yue.png', shows: true }
])
// 余额是否为0
let balance = ref(0)
// 默认支付方式
let defaultMode = ref(0)
// 选择支付方式
let checkPay = index => {
  defaultMode.value = index
}
// 支付方式弹窗提交订单按钮
const subOrder = () => {
  if (props.car_Id) {
    console.log('购物车支付', props.car_Id)
    getCarPays()
  } else {
    console.log('dindan支付', props.car_Id)

    //订单支付      普通支付
    props.isOrderPay ? getOrderPays() : getPays()
  }
}
// 去充值
const goRecharge = () => {
  uni.navigateTo({ url: '/pages/mine/recharge' })
}
const emit = defineEmits(['canclePop'])
const canclePop = () => {
  emit('canclePop')
}
const { proxy } = getCurrentInstance() //获取当前实例
// 支付
const getPays = async () => {
  try {
    let { id, num, specId } = props.payParams
    let params = {
      goods_id: id, //integer	是	商品ID
      num: num, //integer	是	数量
      goods_spec_id: specId, //integer	是	规格ID
      address_id: props.adressId, //integer	是	地址ID
      fangs: defaultMode.value == 0 ? 1 : 2, //integer	否	支付方式:1是微信支付,2是余额支付
      remark: '' //string	否	备注
    }
    const res = await getPay(params)
    proxy.$methods.pay(res)
    canclePop()
    if (defaultMode.value === 1) {
      uni.showToast({ title: '支付成功', icon: 'none' })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getPay', err)
  }
}
// 购物车支付
const getCarPays = async () => {
  try {
    let params = {
      cart_ids: props.car_Id, //string	是	购物车ID，多个英文逗号隔开
      address_id: props.adressId, //integer	是	地址ID
      remark: '', //string	否	备注
      fangs: defaultMode.value == 0 ? 1 : 2 //integer	否	支付方式:2是余额支付
    }
    const res = await getCarPay(params)

    proxy.$methods.pay(res)
    canclePop()
    console.log('getCarPay', res)
    if (defaultMode.value === 1) {
      proxy.$methods.showTN('余额支付成功~')
    }
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getCarPay', err)
  }
}
// 订单支付
const getOrderPays = async () => {
  try {
    const res = await getOrderPay(props.orderId, defaultMode.value == 0 ? 1 : 2)
    proxy.$methods.pay(res)
    canclePop()
    console.log('getOrderPay', res)
    if (defaultMode.value === 1) {
      uni.showToast({ title: '支付成功', icon: 'none' })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getOrderPay', err)
  }
}
</script>

<style lang="scss">
.popBox {
  padding: 32rpx 24rpx 0;

  .title {
    text-align: center;
    margin-bottom: 60rpx;
    color: #000000e6;
    font-size: 32rpx;
    font-weight: 700;
  }

  .popModeBox {
    width: 100%;
    padding: 32rpx 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background: #ffffffff;

    .mode {
      color: #000000e6;
      font-size: 28rpx;
      font-weight: 700;
      image {
        width: 52rpx;
        height: 52rpx;
        margin-right: 20rpx;
      }
    }

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

    .insufficient {
      color: #00000066;
      font-size: 24rpx;

      .go {
        margin-left: 8rpx;
        font-size: 24rpx;
        color: #fb3e3c;
        line-height: 32rpx;

        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
  .subOrder {
    margin-top: 138rpx;
    width: 100%;
    height: 88rpx;
    border-radius: 280rpx;
    color: #ffffffff;
    font-size: 32rpx;
    font-weight: 700;
    background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
  }
}
</style>