<template>
	<view class="container">
		<PopManager :show="redPagss" :type="type" @clickmask="closeBtn">
			<!-- style="text-align: center;position: relative;" -->
			<view class="b-f redPag">
				<view class="redpacket-title dis-flex flex-y-center">
					<view class="f-34 redText dis-flex flex-x-center f-30 col-3">我的红包</view>
					<view class="i iocn iconfont icon-close_light closeBtn f-24 dis-flex flex-box col-3" @click="closeBtn"></view>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<!-- <radio-group @change="radioChange"> -->
					<evan-radio-group @change="radioChange" v-model="redPagId">
						<view v-for="(item,index) in orderSubmitInfo" :key="index">
							<view class="usedpacket m-top-btm10">
								<view class="usedpacket-list">
									<view class="usedpacket-list-item dis-flex">
										<view class="usedpacket-itemleft p-r dis-flex flex-dir-column flex-x-center">
											<view class="usedpacket-priceStyle col-f f-50 t-c">
												<text class="f-30">¥</text>
												{{ item.cut_money }}
											</view>
											<view class="f-24 col-f t-c">满{{ item.full_money }}可用</view>
											<view class="itemleft_bgstyle"></view>
											<view class="itemleft_bgstyle2"></view>
										</view>
										<view class="usedpacket-itemright p-r flex-box b-f padding-box-all">
											<view class="usedpacket_titleType dis-flex flex-y-center">
												<view class="usedpacketType t-c m-right10 dis-flex flex-y-center">
													<text class="col-f f-24">{{ item.label }}</text>
												</view>
												<view class="usedpacketTitle onelist-hidden f-28 col-3">{{ item.title }}</view>
											</view>
											<view class="col-9 f-24 m-top-btm10">范围：{{ item.use_where }}</view>
											<view class="col-9 f-24">{{ item.time }}</view>
											<view class="getDraw t-c col-f f-24">
												
												<!-- <evan-radio :value="item.id" clearable color="#ff4444"  /> -->
												<!-- <evan-radio-group @change="radioChange" v-model="color"> -->
													<!-- <view class="evan-radio-show__group-item" v-for="item in colorList" > -->
														<evan-radio clearable :label="item.id" primaryColor="#ff4444"></evan-radio>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</evan-radio-group>
					<view class="f-28" style="padding: 20upx 0;color: #333333;" v-if="noorderSubmitInfo.length > 0">
						暂不可用红包({{noorderSubmitInfo.length}})
					</view>
					<evan-radio-group @change="radioChange" v-model="redPagId" v-if="noorderSubmitInfo.length > 0">
						<view v-for="(item,index) in noorderSubmitInfo" :key="index">
							<view class="usedpacket m-top-btm10">
								<view class="usedpacket-list">
									<view class="usedpacket-list-item dis-flex">
										<view class="usedpacket-itemleft-l p-r dis-flex flex-dir-column flex-x-center">
											<view class="usedpacket-priceStyle col-f f-50 t-c">
												<text class="f-30">¥</text>
												{{ item.cut_money }}
											</view>
											<view class="f-24 col-f t-c">满{{ item.full_money }}可用</view>
											<view class="itemleft_bgstyle"></view>
											<view class="itemleft_bgstyle2"></view>
										</view>
										<view class="usedpacket-itemright p-r flex-box b-f padding-box-all">
											<view class="usedpacket_titleType dis-flex flex-y-center">
												<view class="usedpacketType t-c m-right10 dis-flex flex-y-center">
													<text class="col-f f-24">{{ item.label }}</text>
												</view>
												<view class="usedpacketTitle onelist-hidden f-28 col-3">{{ item.title }}</view>
											</view>
											<view class="col-9 f-24 m-top-btm10">范围：{{ item.use_where }}</view>
											<view class="col-9 f-24">{{ item.time }}</view>
											<view class="getDraw t-c col-f f-24">
												
												<!-- <evan-radio :value="item.id" clearable color="#ff4444"  /> -->
												<!-- <evan-radio-group @change="radioChange" v-model="color"> -->
													<!-- <view class="evan-radio-show__group-item" v-for="item in colorList" > -->
														<evan-radio clearable disabled :label="item.id" primaryColor="#ff4444"></evan-radio>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</evan-radio-group>
				</scroll-view>
			</view>
		</PopManager>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
import PopManager from '@/components/template/PopManager';
import EvanRadioGroup from '@/pages/subPages2/tamplate/evan-radio/evan-radio-group.vue'
import EvanRadio from '@/pages/subPages2/tamplate/evan-radio/evan-radio.vue'

export default {
	components: {
		PopManager,
		EvanRadio,
		EvanRadioGroup
	},
	data() {
		return {
			colorList: [{
					label: '红色',
					value: 'red'
				},
				{
					label: '绿色',
					value: 'green'
				},
				{
					label: '蓝色',
					value: 'blue'
				},
				{
					label: '粉色',
					value: 'pink'
				},
				{
					label: '黑色',
					value: 'black'
				},
			],
			redPagId:'',
			type: 'bottom',
			redPagss: false,
			MoneyOff: '',
			current: 0,
			radioList: [
				{
					value: 1
				},
				{
					value: 2
				},
				{
					value: 3
				},
				{
					value: 4
				},
				{
					value: 5
				},
				{
					value: 6
				},
				{
					value: 7
				}
			],
			flage:false
		};
	},
	methods: {
		closeBtn() {
			let _this = this;
			_this.redPagss = false;
			// for (let i = 0; i < this.orderSubmitInfo.length; i++) {
			// 	_this.orderSubmitInfo[i].checked = false;
			// }
		},
		radioChange: function(e,flag) {
			let _this = this;
			let num = _this.orderSubmitInfo.length;
			console.log(e,_this.redPagId);
			// debugger
			_this.orderSubmitInfo.forEach((item,index)=>{
				if(item.id == e){
					let obj = JSON.parse(JSON.stringify(item));
					obj.check = true;
					_this.$emit('priceis', obj);
				}else if(item.id == flag){
						let obj = JSON.parse(JSON.stringify(item));
						obj.check = false;
						_this.$emit('priceis', obj);
				}
				})
			 // console.log(_this.redPagId);
			 // console.log(_this.orderSubmitInfo);
			// for (let i = 0; i < _this.orderSubmitInfo.length; i++) {
			// 	if (_this.orderSubmitInfo[i].id == evt.target.value) {
			// 		// _this.orderSubmitInfo[i].isCheked = !_this.orderSubmitInfo[i].isCheked;
			// 		
			// 	} else {
			// 		// _this.orderSubmitInfo[i].isCheked = false;
			// 	}
			// }
			// console.log(_this.orderSubmitInfo);
			_this.closeBtn();
		}
	},
	props: {
		orderSubmitInfo: {
			type: Array,
			default: []
		},
		// 红包弹出框显示
		noorderSubmitInfo:{
			type: Array,
			default: []
		}
	},
	watch: {
		'orderSubmitInfo': {
			handler(val,oldVal) {
				// debugger
				setTimeout(()=>{
					if(val.length == 0){
						this.redPagId = ''
					}
					if(this.redPagId == ''){
						this.redPagId = this.orderSubmitInfo[0].id;
						let obj = JSON.parse(JSON.stringify(this.orderSubmitInfo[0]));
						obj.check = true;
						this.$emit('priceis',obj);
					}else{
						
					}
					
					
				})
			},
			immediate: true,
			deep: true, //对象内部的属性监听，也叫深度监听
		}
	}
};
</script>

<style lang="less" scoped>
.redPag {
	width: 100vw;
	height: 830upx;
	padding: 40upx 30upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 20px 20px 0px 0px;
	box-sizing: border-box;
}
.scroll-Y {
	height: 750upx;
}
.redpacket-title {
	width: 100%;
}
.redText {
	width: 95%;
	flex-shrink: 0;
}
.usedpacket {
	.usedpacket-list {
		.usedpacket-list-item {
			height: 170upx;
			.usedpacket-itemleft-l {
				width: 28%;
				height: 100%;
				background-color: #CCCCCC;
				padding: 0 20upx;
				flex-shrink: 0;
			
				.usedpacket-priceStyle {
					margin-right: 12upx;
			
					> text {
						display: inline-block;
						vertical-align: top;
						margin-top: 4upx;
					}
				}
			
				.itemleft_bgstyle {
					width: 30upx;
					height: 30upx;
					border-radius: 50%;
					position: absolute;
					left: -16upx;
					top: 50%;
					transform: translateY(-50%);
					background-color: #f8f8f8;
				}
			
				.itemleft_bgstyle2 {
					position: absolute;
					right: 0;
					top: 0;
					width: 1%;
					height: 170upx;
					padding-left: 4upx;
					color: #fff;
					box-sizing: border-box;
					background: radial-gradient(transparent 0, transparent 8upx, #fff 8upx);
					background-size: 16upx 16upx;
					background-position: 16upx 0px;
					background-color: #fff;
				}
			}
			.usedpacket-itemleft {
				width: 28%;
				height: 100%;
				background: linear-gradient(129deg, rgba(251, 131, 81, 1) 0%, rgba(255, 68, 68, 1) 100%);
				padding: 0 20upx;
				flex-shrink: 0;

				.usedpacket-priceStyle {
					margin-right: 12upx;

					> text {
						display: inline-block;
						vertical-align: top;
						margin-top: 4upx;
					}
				}

				.itemleft_bgstyle {
					width: 30upx;
					height: 30upx;
					border-radius: 50%;
					position: absolute;
					left: -16upx;
					top: 50%;
					transform: translateY(-50%);
					background-color: #f8f8f8;
				}

				.itemleft_bgstyle2 {
					position: absolute;
					right: 0;
					top: 0;
					width: 1%;
					height: 170upx;
					padding-left: 4upx;
					color: #fff;
					box-sizing: border-box;
					background: radial-gradient(transparent 0, transparent 8upx, #fff 8upx);
					background-size: 16upx 16upx;
					background-position: 16upx 0px;
					background-color: #fff;
				}
			}

			.usedpacket-itemright {
				height: 100%;

				.usedpacket_titleType {
					.usedpacketType {
						padding: 0 6upx;
						height: 28upx;
						background-color: #ff4444;
						border-radius: 14upx;

						> text {
							display: inline-block;
							transform: scale(0.85);
						}
					}

					.usedpacketTitle {
						width: 240upx;
					}
				}
			}

			.getDraw {
				position: absolute;
				right: 30upx;
				top: 50%;
				transform: translateY(-50%);
				line-height: 40upx;
				border-radius: 20upx;
			}
		}
	}
}
</style>
