<template>
	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
	  <view class="section" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }"></view>
	  
	  <view class="my-box">
		<view class="flex-col justify-start items-center text-wrapper pos"><text class="font text">积分商城</text></view>
		  <view class="flex-row justify-between items-start section_2 pos_2">
			<view class="flex-col items-center">
			  <text class="text_2">可用积分</text>
			  <text class="mt-20 text_3">{{ points }}</text>
			</view>
			<view class="flex-col items-center group" @click="jumpToTips">
			  <image
				class="image"
				:src="couponUrl + '/CouponMall/jf.png'"
			  />
			  <text class="text_4 mt-7">规则</text>
			</view>
		</view>
	  </view>
	 
	  
	  <view class="flex-col pos_3">
	    <view class="flex-col mt-18 list-item" v-for="(item, index) in couponList" :key="index">
	      <view class="flex-row justify-between items-start self-stretch">
	        <view class="flex-col items-start">
	          <text class="font_2">{{ item.conditionAmount }}元优惠券</text>
	          <text class="font text_5 mt-15">{{ item.name }}</text>
	        </view>
	        <view class="flex-col justify-start items-center text-wrapper_2" @click="exchangeCoupon(item)">
				<text class="font_3 text_6">兑换</text>
			</view>
	      </view>
	      <text class="self-start font_4 mt-7">{{ item.requirePoints }} 积分</text>
	    </view>
	  </view>
	</view>
	
	<uni-popup ref="exchange" :maskClick="false" :animation="false">
		<view class="exchange-popup">
			<confirmPopupVue></confirmPopupVue>
		</view>
	</uni-popup>
	
</template>



<script setup>
	import {ref, onMounted, nextTick, onUnmounted} from 'vue'
	import { baseUrl } from '@/api/request';
	import confirmPopupVue from '../component/confirmPopup.vue';
	import emitter from '../../../utils/emitter';
	import { couponUrl,bkgPubilcPath } from '../../../common/globalImagesUrl';
	import { onLoad } from "@dcloudio/uni-app";
	import { getFonts } from '../../../common/globalFont';
	onLoad(() => {
		getFonts()
	})
	const cookie = wx.getStorageSync("cookie")  //请求头
	
	const couponList = ref([])
	const points = ref(0)
	const exchange = ref(null)
	
	const coupon = ref(0)
	const bkgUrl = ref(couponUrl + '/CouponMall/bkg.png')
	
	const closeConfirmPopupHandler = () => {
		nextTick(() => {
			if (exchange.value) {
				exchange.value.close()
			}
		})
	}
	
	const confirmExchangeHandler = async () => {
		await pointsExchangeCoupon()
		await getMyUserInfo()
	}
	
	onMounted(() => {
		getMyUserInfo() 
		getCouponList()
		emitter.on('closeConfirmPopup', closeConfirmPopupHandler)
		
		emitter.on('confirmExchange', confirmExchangeHandler)
	})
	
	onUnmounted(() => {
		
		emitter.off('closeConfirmPopup', closeConfirmPopupHandler)
		
		emitter.off('confirmExchange', confirmExchangeHandler)
	})

	const getMyUserInfo = async () => {
		const res = await uni.request({
			url: baseUrl + '/user/get/login',
			method: 'GET',
			header: {
				cookie
			}
		})
		points.value = res.data.data.points
	}

	const getCouponList = async () => {
		const res = await uni.request({
			url: baseUrl + '/coupon/list/all',
			method: 'GET',
			header: {
				cookie
			}
		})
		couponList.value = res.data.data
	}
	
	const jumpToTips = () => {
		uni.navigateTo({
			url: '../CouponTips/CouponTips'
		})
	}
	
	const exchangeCoupon = (val) => {
		coupon.value = val
		exchange.value.open('center')
	}
	
	
	const pointsExchangeCoupon = async () => {
		
		if (points.value < coupon.value.requirePoints) {
			uni.showToast({
				title: '积分不足',
				icon: 'error'
			})
			return ;
		}
		
		const res = await uni.request({
			url: baseUrl + '/coupon/exchange',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: coupon.value.id
			}
		})
		if (res.data.data) {
			uni.showToast({
				title: '兑换成功',
				icon: 'success'
			})
		}
	}
	
</script>




<style scoped lang="scss">
	
.exchange-popup {
	justify-content: center;
	background-color: #fff;
	border-radius: 20rpx;
	margin-top: -200rpx;
}	
	
.my-box {
	position: fixed;
	top: 0;
	left: 0;
	right: 0; 
	margin: 0 auto;
	z-index: 99;
}
	
.mt-15 {
  margin-top: 28.13rpx;
}

::-webkit-scrollbar {
  display: none;
}

.mt-7 {
  margin-top: 13.13rpx;
}
.page {
  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 1386.88rpx;
}
.text-wrapper {
  padding: 45rpx 0;
  background-color: #ffffff;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.font {
  font-size: 30rpx;
  font-family: FangZhengFonts;
  line-height: 28.09rpx;
  color: #818181;
}
.text {
  color: #323232;
  line-height: 28.59rpx;
}
.section_2 {
  padding: 24.38rpx 52.5rpx 15rpx;
  background-image: linear-gradient(90deg, #ffffff 42.3%, #fbdedf 93.5%);
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 114.38rpx;
}
.text_2 {
  color: #323232;
  font-size: 30rpx;
  font-family: FangZhengFonts;
  line-height: 25.78rpx;
}
.text_3 {
  color: #c35c5d;
  font-size: 60rpx;
  font-family: FangZhengFonts;
  line-height: 40.09rpx;
}
.group {
  margin-right: 18.75rpx;
  margin-top: 11.25rpx;
}
.image {
  width: 73.13rpx;
  height: 73.13rpx;
}
.text_4 {
  color: #323232;
  font-size: 24.38rpx;
  font-family: FangZhengFonts;
  line-height: 21.34rpx;
}
.pos_3 {
  position: absolute;
  left: 22.5rpx;
  right: 22.5rpx;
  top: 307.5rpx;
  padding-bottom: 40rpx;
}
.list-item {
  padding: 37.5rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.font_2 {
  font-size: 33.75rpx;
  font-family: FangZhengFonts;
  line-height: 32.83rpx;
  color: #323232;
}
.text_5 {
  line-height: 29.42rpx;
}
.text-wrapper_2 {
  margin-right: 3.75rpx;
  margin-top: 45rpx;
  padding: 15rpx 0;
  background-color: #e79ea1;
  border-radius: 18.75rpx;
  width: 159.38rpx;
  height: 60rpx;
}
.font_3 {
  font-size: 30rpx;
  font-family: FangZhengFonts;
  line-height: 28.09rpx;
  color: #ffffff;
}
.text_6 {
  line-height: 27.66rpx;
}
.font_4 {
  font-size: 33.75rpx;
  font-family: FangZhengFonts;
  line-height: 28.09rpx;
  color: #c35c5d;
}
@import url(../../../common/css/global.css);
</style>