<template>
  <!-- 确认订单 -->
  <u-navbar bgColor="#F6F8FA" :placeholder="true" title="" :autoBack="true"></u-navbar>
  <view class="mainBox">
    <view class="checkAddress flexJ" @click="checkAddress" v-if="!adress.name">
      <view class="add flexA">
        <image src="/static/shopCarIc/address.png" mode=""></image>
        新增收货地址
      </view>
      <image src="/static/mineIc/gayRight.png" mode=""></image>
    </view>
    <view v-else @click="checkAddress">
      <!-- 收货地址 -->
      <shopAddres :adress="adress"></shopAddres>
    </view>
    <view class="ordersShop">
      <view class="shop flexJ" v-for="item in buyShop" :key="item.id">
        <view class="shopPhoto">
          <image :src="item.image" mode=""></image>
        </view>
        <view class="shopInfo">
          <view class="shopName ellipsis">{{ item.name }}</view>
          <view class="shopDesc ellipsis">{{ item.describe }}</view>
          <view class="price flexJ">
            <text v-if="shopType != 3">￥{{ item.goods_price }}</text>
            <view v-else class="flexA points">
              {{ orderInfo.coscore }}
              <text>积分</text>
            </view>
            <view class="num">x{{ item.total_num }}</view>
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="modeBox flexJ">
        <text>提货方式</text>
        <view class="mode">快递配送</view>
      </view>
      <view class="modeBox flexJ" v-if="shopType == 3">
        <text>运费</text>
        <view class="yunPrice">￥{{ orderInfo.express_price }}</view>
      </view>
    </view>
    <view class="btnsBox iosAuto flexJ">
      <!-- 积分购买 -->
      <view class="pointsPrcie flexV" v-if="shopType == 3">
        <view class="allPoints flexA">
          <view class="all">合计:</view>
          <view class="pointsNum">
            {{ orderInfo.coscore }}
            <text>积分</text>
          </view>
        </view>
        <view class="pointsMoeny">{{ orderInfo.express_price }}元</view>
      </view>
      <!-- 非积分购买 -->
      <view class="allMoney flexA" v-else>
        <text>总价：</text>
        {{ orderInfo.total_price }}
      </view>
      <view class="btn flexC" @click="btns">{{ shopType == 3 ? '立即兑换' : '立即购买' }}</view>
    </view>
    <!-- 选择支付方式弹窗 -->
    <payMode @canclePop="modeShow = false" :car_Id="car_Id" :balance="balance" :totalPrice="orderInfo.total_price" :adressId="adress.id" :payParams="payParams" :modeShow="modeShow"></payMode>
    <!-- 确认积分兑换弹窗 -->
    <tipPop @pointsBtns="pointsBtns" :integral="orderInfo.coscore" :tipShow="tipShow"></tipPop>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import payMode from '@/componets/checkPayMode.vue'
import tipPop from '@/componets/tipPop.vue'
import shopAddres from '@/componets/address.vue'
import { getbBuyData, getCarsettlement, getyue } from '@/api/'
onLoad(e => {
  if (e.ids) {
    car_Id.value = e.ids
    getCarsettlements(e.ids) //购物车结算
  } else {
    shopType.value = e.shopType //商品类型
    payParams.value = JSON.parse(e.params) //规格id 商品数量 商品id
    getbBuyDatas(JSON.parse(e.params))
    console.log(e.params, '商品规格信息')
  }
  //默认地址
  uni.getStorageSync('defaultAdres') ? (adress.value = uni.getStorageSync('defaultAdres')) : ''
})
onShow(() => {
  // 余额
  getyues()
  // uni.getStorageSync('balance') ? balance.value = uni.getStorageSync('balance') : ''
})
let modeShow = ref(false) //选择支付方式
let payParams = ref({}) //支付参数
let shopType = ref(1) // 1=普通商品,2=特价商品,3=积分商品
let car_Id = ref('') //购物车结算商品的购物车id
let balance = ref(0) //余额
let buyShop = ref([]) //购买de商品
let orderInfo = ref({}) //购买信息
// 购买商品信息
const getbBuyDatas = async obj => {
  try {
    let params = {
      goods_id: obj.id, //integer	是	商品ID
      num: obj.num, //integer	是	数量
      goods_spec_id: obj.specId //integer	是	规格ID
    }
    const res = await getbBuyData(params)
    buyShop.value = res.goods_list //购买de商品
    orderInfo.value = res //购买信息
    console.log('getbBuyData', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getbBuyData', err)
  }
}

const getyues = async () => {
  try {
    const res = await getyue()
    balance.value = res.money
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getyue', err)
  }
}

// 购物车结算
const getCarsettlements = async ids => {
  try {
    const res = await getCarsettlement(ids)
    buyShop.value = res.goods_list //购买de商品
    orderInfo.value = res //购买信息
    console.log('getCarsettlement', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getCarsettlement', err)
  }
}
let adress = ref({}) //收货地址
// 选择地址
const checkAddress = () => {
  uni.navigateTo({
    url: `/pages/mine/myAddress?isCheck=${1}`,
    events: {
      steBack: data => {
        adress.value = data
        console.log('地址', data)
      }
    }
  })
}
// 是否使用积分弹窗
const tipShow = ref(false)
// 是否使用积分 0否 1 是
const pointsBtns = type => {
  tipShow.value = false
  if (type == 1) {
    modeShow.value = true
  }
}
// 立即购买按钮 shopType== 1 || 2立即购买 ==  shopType==3立即兑换按钮
const btns = () => {
  if (shopType.value == 3) {
    console.log('立即兑换按钮')
    if (uni.getStorageSync('myPoints') < orderInfo.value.coscore) return uni.showToast({ title: '您的积分不足~', icon: 'none' })
    tipShow.value = true
  } else {
    modeShow.value = true
    console.log('立即购买')
  }
}
</script>

<style lang="scss">
page {
  background: #f6f8fa;
}

.mainBox {
  width: 100%;
  padding: 20rpx 24rpx 0;
  box-sizing: border-box;

  .checkAddress {
    width: 100%;
    padding: 24rpx 20rpx 26rpx;
    box-sizing: border-box;
    border-radius: 24rpx;
    background: #ffffffff;
    margin-bottom: 20rpx;

    .add {
      color: #323233ff;
      font-size: 28rpx;
      font-weight: 700;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
      }
    }

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

  .addressBox {
    margin-bottom: 20rpx;
    padding: 32rpx 20rpx 31rpx 32rpx;
    background: #fff;

    .right {
      display: flex;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
        margin-top: 9rpx;
      }

      .area {
        text {
          color: #323233ff;
          font-size: 28rpx;
          font-weight: 700;
          line-height: 36rpx;
        }

        .name {
          color: #646566ff;
          font-size: 24rpx;
          margin-top: 9rpx;
        }
      }
    }

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

  .ordersShop {
    width: 100%;
    padding: 24rpx 20rpx 32rpx 20rpx;
    box-sizing: border-box;
    border-radius: 24rpx;
    background-color: #fff;

    .shop {
      margin-bottom: 24rpx;

      .shopPhoto {
        width: 180rpx;
        height: 180rpx;
        margin-right: 20rpx;

        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 16rpx;
        }
      }

      .shopInfo {
        width: 100%;

        .shopName {
          color: #323233ff;
          font-size: 26rpx;
          font-weight: 700;
        }

        .shopDesc {
          margin: 16rpx 0 58rpx;
          color: #00000066;
          font-size: 20rpx;
        }

        .price {
          width: 100%;

          text {
            color: #fc4338ff;
            font-size: 28rpx;
            font-weight: 700;
          }

          .num {
            color: #323233ff;
            font-size: 26rpx;
          }

          .points {
            color: #000000e6;
            font-size: 32rpx;
            font-weight: 700;

            text {
              margin: 6rpx 0 0 8rpx;
              color: #000000e6;
              font-size: 22rpx;
            }
          }
        }
      }
    }

    .line {
      margin: 40rpx 0 33rpx;
      width: 100%;
      height: 1rpx;
      opacity: 1;
      background: #eeeff0ff;
    }

    .modeBox {
      margin-top: 32rpx;
      text {
        color: #000000e6;
        font-size: 26rpx;
      }

      .mode {
        color: #000000e6;
        font-size: 26rpx;
        font-weight: 700;
      }

      .yunPrice {
        color: #fc4338ff;
        font-size: 26rpx;
        font-weight: 700;
      }
    }
  }
}

.btnsBox {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 96rpx;
  opacity: 1;
  background: #ffffffff;

  .allMoney {
    margin-left: 32rpx;
    color: #fc4338ff;
    font-size: 40rpx;
    font-weight: 700;

    text {
      color: #000000ff;
      font-size: 32rpx;
      font-weight: 700;
    }
  }

  .btn {
    margin-right: 24rpx;
    width: 256rpx;
    height: 80rpx;
    border-radius: 80rpx;
    color: #ffffffff;
    font-size: 30rpx;
    font-weight: 700;
    background: linear-gradient(-88deg, #fe6434ff 0%, #ff2f2fff 100%);
  }

  .pointsPrcie {
    margin-left: 32rpx;

    .allPoints {
      .all {
        color: #000000ff;
        font-size: 30rpx;
        font-weight: 700;
      }

      .pointsNum {
        margin-left: 12rpx;
        color: #fc4338ff;
        font-size: 40rpx;
        font-weight: 700;

        text {
          margin: 8rpx 0 0 8rpx;
          color: #fc4338ff;
          font-size: 22rpx;
        }
      }
    }

    .pointsMoeny {
      color: #00000099;
      font-size: 24rpx;
    }
  }
}
</style>