<script setup>
	// 引入
	import { onShow,onLoad,onHide } from "@dcloudio/uni-app"
	import {ref,onMounted,nextTick,reactive,watch} from "vue"
	import myButton from "@/components/myButton.vue"
	import { useStore } from '@/store'
	import api from "@/api/index"
	import goodsInfo from "@/components/goodsInfo.vue"
	import emptyCard from "@/components/emptyCard.vue"
	const store = useStore()
	const props = defineProps(['coupon_show','coupon_list']);
	const emits = defineEmits(['choosedOk'])
	import utils from "@/utils/index.js"
	onLoad((e) => {
		styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
		// console.log("组件:",props.goods_info)
		// getList()
	})
	watch(
	  () => props.coupon_list,
	  (newVal, oldVal) => {
		// info.value = newVal
		list.value = newVal
		console.log(newVal)
		updateList()
	  }
	)
	watch(
	 ()=>props.coupon_show,
	 (newVal, oldVal) => {
		cart_popup.value.open('bottom')
    })
    //变量
	const list = ref([])
	const cart_popup = ref()
    const styleObject = ref({
	  height: '0px',
    })
	const total_num = ref(1)
	const current_ = ref(-1)
	// 函数
	function updateList(){
		// console.log(list.value)
		if(list.value && list.value.length>0) {
			for(let item of list.value) {
				// item.goods_image = item.goods.goods_image
				// item.goods_name = item.goods.goods_name
				// item.goods_id = item.goods.id
				// item.sell_price = item.price * item.num
				// item.single_price = item.price
				// item.desc = item.spec.name+',￥'+item.spec.sell_price
			}
		}
	}
	// async function getList() { // 获取购物车列表
	// 	const res = await api.getCartList()
	// 	if(res.code ===1) {
	// 		list.value = res.data
	// 	}
	// }
	// function changeNumFunc(value){
	// 	setTimeout(() => {
	// 		// console.log(value,current_.value)
	// 		if(value>0) {
	// 			list.value[current_.value].num = value
	// 			list.value[current_.value].sell_price = list.value[current_.value].single_price * value
	// 			// list.value[current_.value].price = value
	// 			// 修改订单
	// 			emits('update_cart',[list.value[current_.value].id,list.value[current_.value].num])
	// 		}
	// 		else if(value<1) { // 删除购物车
	// 			// total_num.value = 1
	// 			emits('del_cart',[list.value[current_.value].id])
	// 		}
	// 		else{ // 超过库存 
	// 		}
	// 	},0)
	// }
	// function lockItem(i) { // 锁定当前操作的索引
	// 	current_.value = i
	// }
	async function toUseFunc(item,i) { // 选择优惠券
		current_.value = i		
		// const res = await api.couponsCenterReceive({
		// 	coupon_id:item.id
		// })
		// if(res.code === 1) {
		// 	uni.showToast({
		// 		title:"领取成功",
		// 		icon:"success"
		// 	})
		// 	// getList()
		// }
	}
	function ofunc() {
		if(current_.value==-1) {
			uni.showToast({
				title:"请选择优惠券",
				icon:"error"
			})
		}
		else{
			// console.log(list.value[current_.value])
			cart_popup.value.close()
			emits("choosedOk",list.value[current_.value])
		}
	}
	function timestampToDate(stamp) { // 时间戳转日期
	      var time = new Date(stamp);
	      var y = time.getFullYear();
	      var m = time.getMonth()+1;
	      var d = time.getDate();
	      const date = `${y}-${m}-${d}`
	    return date
	}
</script>
<template>
	<view class="goodsCartBox">
		<uni-popup ref="cart_popup" @change="change">
			<view class="popup-content" :style="styleObject" >
				<view class="pc-top">
					<view class="pc-top-left">
						优惠券
						<!-- <text style="color: gray;">(共{{list.length}}件)</text> -->
					</view>
					<!-- <view class="pc-top-right" style="color: gray;" @click="clearFunc">
						清空购物车
					</view> -->
				</view>
				<view class="pc-content couponBox">
					<!-- <view class="list-row" v-for="(item,i) in list" @tap="lockItem(i)">
						<goodsInfo :type="2" :info="item" >
							<template #btn>
								<uni-number-box :value="item.num"  @change="changeNumFunc" />
							</template>
						</goodsInfo>
					</view> -->
					<view class="c-part" v-if="list.length>0" @tap="toUseFunc(item,i)" v-for="(item,i) in list">
						<view class="state-css small-text" v-if="item.bind_type == 1">
							<!-- 已领取 -->
							<!-- <image src="../../static/had.png" mode="widthFix"></image> -->
						</view>
						<view class="cp-row" style="padding-bottom: 0px;">
							<view class="cpr-left">
								{{item.coupon_name}}
							</view>
							<view class="cpr-right" style="color: red;">
								￥<text class="big-text">{{item.money}}</text>
							</view>
						</view>
						<view class="cp-row small-text" style="padding-top: 0px;">
							<view class="cpr-left">
								有效期至{{item.expire_time}}
							</view>
							<view class="cpr-right">
								<text class="red-text">满{{item.num}}可用</text>
							</view>
						</view>
						<view class="line"></view>
						<view class="cp-row small-text">
							<view class="cpr-left">
								指定商品可用
							</view>
							<view class="cpr-right">
								<view class="checkBox-css">
									<uni-icons v-if="current_ == i" type="checkmarkempty" size="20"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<emptyCard v-else></emptyCard>
				</view>
				<view class="pc-bottom" style="padding: 40rpx 0 ;">
					<!-- 按钮 -->
					<myButton v-if="list.length>0" style="width: 100%;" class="op-right" :type="2" @tap="ofunc">
						确认使用
					</myButton>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<style scoped lang="scss">
	.checkBox-css{
		width: 34rpx;
		height: 34rpx;
		border: 1px solid #cacaca;
	}
	/*
	优惠券
	*/
   .hasDone{
   	background-color: #cccccc !important;
   }
	  .state-css{
		position: absolute;
		right: 0;
		image{
			width: 100rpx;
		}
	   }
	   .button-css{
		background-color: red;
		color: white;
		border-radius: 10rpx;
		padding: 6rpx 20rpx;
	   }
	   .couponBox{
		.c-part{
			background-color: white;
			margin: 20rpx;
			border-radius: 5px;
			.cp-row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;
			}
		}
	   }
	.pc-bottom{
		position: fixed;
		width: 100%;
		bottom: 20rpx;
	}
	.goodsCartBox{
		.popup-content{
			position: relative;
			padding-top: 40rpx;
			background-color: white;
			border-radius: 10px 10px 0 0;
			overflow: scroll;
			background: #f2f2f2;
			.pc-top{
				position: fixed;
				top:120rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				box-sizing: border-box;
				padding: 40rpx;
				background-color: white;
				z-index: 10;
				border-bottom: 1px solid #eaeaea;
			}
			.pc-content{
				.list-row{
					padding: 20rpx;
				}
				margin-bottom: 240rpx;
				margin-top: 100rpx;
			}
			.pc-row{
				padding:0 40rpx;
				padding-bottom: 40rpx;
				.pcr-title{
					color: gray;
					font-size: 30rpx;
					padding: 20rpx 0;
				}
				.pc-choose-card-box{
					.pc-choose-card{
						display: inline-block;
						background: #f1f1f1;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						// font-weight: bolder;
						font-size: 28rpx;
					}
				}
			}
			.main-info{
				display: flex;
				// align-items:;
				.pcr-left{
					margin-right: 40rpx;
					.pcrl-img-box{
						border: 2rpx solid #dadada;
						width: 180rpx;
						height: 180rpx;
						image{
							width: 180rpx;
							height: 180rpx;
						}
					}  
				}
				.pcr-right{
					.pcrr-row{
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>