<template>
  <!-- 底部按钮弹出成 -->
  <u-popup :show="payPopShow" mode="bottom" :closeable="true" round="18" @close="close" @open="open">
    <view class="popBox">
      <view class="title flexC" v-if="shopType !== 3">{{ btnType == 0 ? '加入购物车' : '立即购买' }}</view>
      <view class="title flexC" v-if="shopType === 3">立即兑换</view>
      <!-- 价格 -->
      <view class="topBox flexA">
        <view class="shopPhoto">
          <image :src="shopDetail.image" mode=""></image>
        </view>
        <view class="price">
          <view class="shopName ellipsis">{{ shopDetail.name }}</view>
          <view class="money" v-if="shopDetail.goodstatus !== 3">￥{{ shopDetail.spec[data.curPriceIdx].goods_price }}</view>
          <view class="money" v-else>{{ shopDetail.spec[data.curPriceIdx].coscore }}积分</view>
        </view>
      </view>
      <!-- 商品规格 -->
      <view v-for="(item, index) in data.speList" :key="item.group_id" style="margin-bottom: 44rpx">
        <view class="specificationsTile">
          {{ item.group_name }}
        </view>
        <view class="colorBox">
          <view
            class="item"
            v-for="(it, idx) in item.spec_items"
            :key="it.item_id"
            :class="idx == data.indexList[index].curIndex ? 'checked' : ''"
            @click="checkSpec(index, it, idx)"
          >
            {{ it.spec_value }}
          </view>
        </view>
      </view>
      <!-- 数量加减 -->
      <view class="numBox flexJ">
        <view class="rightTitle flexA">数量</view>
        <view class="and flexA">
          <u-number-box v-model="value" @change="valChange"></u-number-box>
        </view>
      </view>
      <!-- 加入购物车按钮 -->
      <view v-if="btnType == 0" class="popBtn flexC" @click="popBtn">加入购物车</view>
      <!-- 立即购买按钮 -->
      <view v-else class="popBtn1 flexC" @click="popBtn">
        {{ shopDetail.goodstatus == 3 ? '立即兑换' : '立即购买' }}
      </view>
    </view>
  </u-popup>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getAddCar } from '@/api/'
let props = defineProps({
  btnType: {
    type: Number,
    default: 0
  },
  shopType: Number,
  payPopShow: {
    type: Boolean,
    default: false
  },
  shopDetail: {
    type: Object,
    default: {}
  },
  moreSpec: {
    type: Object,
    default: {}
  }
})
let data = reactive({
  value: 1, //商品数量
  speList: [], //规格数组
  indexList: [], //规格索引
  specID: [], //选中的规格id
  specIdList: [], //规格组合id数组
  formList: {}, //选择玩规格后的商品详情
  goods_spec_id: '', //参数规格id
  curPriceIdx: 0 // 当前价格索引
})
onMounted(() => {
  setTimeout(() => {
    console.log('多规格', props.moreSpec)
    if (props.moreSpec != null) {
      let spec = props.moreSpec.spec_attr //规格
      let mateSpecId = props.moreSpec.spec_list //规格匹配id
      data.speList = spec //渲染规格
      data.specIdList = mateSpecId //组合id数组
      spec.forEach((item, index) => {
        data.indexList.push({ curIndex: 0 })
        data.specID.push(item.spec_items[0].item_id) //默认规格id
      })
      data.goods_spec_id = data.specID.join('_') //默认组合规格id
      makeUpId()
    } else {
      data.goods_spec_id = props.shopDetail.spec[0].goods_spec_id
    }
  }, 200)
})
// 关闭弹窗
let emit = defineEmits(['close'])
const close = () => {
  emit('close')
}
const valChange = e => {
  console.log('数量' + e.value)
  data.value = e.value
}
// 弹窗按钮props.btnType ==0加入购物车 1立即购买
const popBtn = () => {
  let shopType = props.shopDetail.goodstatus //商品类型 1=普通商品,2=特价商品,3=积分商品
  let buyData = { id: props.shopDetail.id, num: data.value, specId: data.goods_spec_id } //购买数据参数
  console.log('当前值为: ', buyData)
  props.btnType == 0 ? getAddCars() : uni.navigateTo({ url: `/pages/shopCar/confirmOrder?params=${JSON.stringify(buyData)}&shopType=${shopType}` })
}
//选择规格
const checkSpec = (index, it, idx) => {
  console.log(index, it, idx)
  data.curPriceIdx = idx
  data.indexList[index].curIndex = idx //选中高亮
  if (data.speList.length == 1) {
    data.specID.splice(index, 1, it.item_id)
  } else {
    data.specID.splice(index, data.specID.length > 1 ? 1 : 0, it.item_id) //规格组合的id
  }
  makeUpId()
}
// 组合id
const makeUpId = () => {
  if (data.specID.length == data.speList.length) {
    let str = data.specIdList.find(item => item.spec_sku_id == data.specID.join('_'))
    data.formList = str.form //所选规格对应详情
    data.goods_spec_id = str.goods_spec_id //商品规格详情id
    console.log('查找到的规格', str, data.specID.join('_'))
  }
}
// 加入购物车
const getAddCars = async () => {
  try {
    let params = {
      goods_id: props.shopDetail.id, //integer	是	商品ID
      num: data.value, //integer	//是	数量
      goods_spec_id: data.goods_spec_id //integer	是	规格ID
    }
    const res = await getAddCar(params)
    close()
    uni.showToast({ title: '成功加入购物车~', icon: 'none' })
    console.log('getAddCar', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getAddCar', err)
  }
}
</script>

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

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

  .topBox {
    margin-top: 32rpx;

    .shopPhoto {
      width: 134rpx;
      height: 138rpx;
      margin-right: 24rpx;

      image {
        border-radius: 12rpx;
        width: 134rpx;
        height: 138rpx;
      }
    }

    .price {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 110rpx;

      .money {
        color: #fc4338ff;
        font-size: 32rpx;
        font-weight: 600;
      }

      .shopName {
        color: #000000e6;
        font-size: 30rpx;
        font-weight: 700;
        line-height: 40rpx;
      }
    }
  }

  .specificationsTile {
    color: #00000099;
    font-size: 28rpx;
    margin-bottom: 16rpx;
    border: 1rpx solid transparent;
  }

  .colorBox {
    display: flex;
    flex-wrap: wrap;

    .item {
      margin-right: 16rpx;
      padding: 8rpx 32rpx;
      border-radius: 46rpx;
      color: #000;
      font-size: 24rpx;
      background: #1918330f;
      border: 1rpx solid transparent;
    }

    .checked {
      color: #f43736ff;
      font-size: 24rpx;
      border-radius: 46rpx;
      border: 1rpx solid #f43736ff;
      background: #fff1efff;
    }
  }

  .numBox {
    margin-top: 92rpx;

    .rightTitle {
      color: #00000099;
      font-size: 28rpx;

      .surplus {
        margin-left: 12rpx;
        color: #ec3323ff;
        font-size: 24rpx;
      }
    }
  }

  .payBox {
    margin-top: 48rpx;

    .payMode {
      color: #000000e6;
      font-size: 28rpx;

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

    .yue {
      color: #f33f2e;
      font-size: 30rpx;
      font-weight: 700;

      text {
        margin-top: 5rpx;
        color: #f33f2e;
        font-size: 24rpx;
      }
    }
  }

  .popBtn {
    border-radius: 280rpx;
    margin: 50rpx auto 0;
    width: 686rpx;
    height: 88rpx;
    color: #ffffffff;
    font-size: 32rpx;
    font-weight: 700;
    background: linear-gradient(139deg, #ffac0bff 0%, #ffc24aff 100%);
  }

  .popBtn1 {
    margin: 50rpx auto 0;
    width: 686rpx;
    height: 88rpx;
    border-radius: 96rpx;
    opacity: 1;
    color: #ffffffff;
    font-size: 32rpx;
    font-weight: 700;
    background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
  }

  .notHave {
    background: #ffd5d1ff;
  }
}
</style>