<!-- 大礼包组件 -->
<template>
	<view class="packages-container" :style="{'padding':isdiyPageStyle.margin+'px'}">
		<view class="disCard1-box b-f dis-flex m-btm20 p-r" v-for="(giftItem,index) in giftList" :key="index" :class="!isdiyPage?'bor-radius-10upx':''"
		 :style="{padding:!isdiyPage?'20rpx':isdiyPageStyle.padding*2+'rpx'}" @click="navigateTo(giftItem['url'],giftItem)">
			<view class="disCard1-left m-right20" style="padding-left: 20upx;">
				<view>
					<view class="dis-flex flex-x-between flex-y-center">
						<view class="f-30  disCard1-store onelist-hidden" style="padding-bottom: 10upx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 320upx;">{{giftItem['name']}}</view>
						<!-- <view class="f-24 col-9" v-if="!!giftItem['distance']" style="padding-bottom: 10upx;">{{giftItem['distance']}}</view> -->
					</view>
					<view class="f-24 disCard-notice-use twolist-hidden" style="color: #FF4444;">{{giftItem['newlimit']}} <text style="padding-left: 10upx;">当前剩余{{giftItem['surplus']}}次</text></view>
				</view>
				<!-- <view class="disCard-image" :style="{'background-image':'url('+giftItem['shop_logo']+')'}"></view> -->
				<image :src="giftItem['shop_logo']" class="disCard-image" mode="aspectFill"></image>
				<view class="dis-il-block f-28" style="vertical-align:top;line-height: 100upx;padding-left: 20upx;">
					{{giftItem.storename}}
				</view>
			</view>
			<view class="disCard1-right dis-flex flex-dir-column flex-x-between">
				
				<view class="col-f4 f-24 t-r" style="margin-top: 20upx;">价值：¥<text class="f-36">{{giftItem['price']}}</text></view>
				<view class="disCard-skip-btn col-f f-24 t-c p-r" style="margin-bottom: 20upx;" v-if="giftItem.use_where == 1">去使用</view>
				<view class="disCard-skip-btns  f-24 t-c p-r" style="margin-bottom: 20upx;color: #FFFFFF;width: 210upx;background-color: #999999;border: 2upx solid #999999;" v-if="giftItem.use_where == 0">当前等级无法使用</view>
			</view>
		</view>
	</view>
</template>
<script>
	import App from "@/common/js/app.js"
	export default {
		data() {
			return {

			}
		},
		components: {

		},
		props: {
			giftData: {
				type: Object,
				default: function() {
					return {}
				}
			},
			giftData_two: {
				type: Array,
				default: function() {
					return []
				}
			},

			disType: {
				type: Number,
				default: function() {
					return 1
				}
			},
			isdiyPage: {
				type: Boolean,
				default: function() {
					return false
				}
			},
			isdiyPageStyle: {
				type: Object,
				default: function() {
					return {}
				}
			},
			isdiyPageParams: {
				type: Object,
				default: function() {
					return {}
				}
			},
		},
		computed: {
			giftList() {
				return this.disType === 1 ? this.giftData['data'] : this.giftData_two
			}
		},
		onShow() {

		},
		onLoad() {

		},
		mounted() {

		},
		methods: {
			isUnfold_act(index) {
				let _this = this,
					giftDataInfo = _this.giftData.data || _this.giftData_two;
				_this.$set(giftDataInfo[index], 'isUnfold', !giftDataInfo[index].isUnfold)
			},
			navigateTo(url,item) {
				console.log(url);
				// if(item.use_where == 0) return
				App.navigationTo({
					url
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.disCard1-box:last-child {
		margin-bottom: 0 !important;
	}

	.disCard1-left {
		.disCard-image {
			width: 60upx;
			height: 60upx;
			background-repeat: no-repeat;
			background-position: center;
			background-size: 200upx 200upx;
			flex-shrink: 0;
			border-radius: 60upx;
			margin-top: 20upx;
		}
	}

	.disCard1-right {
		flex: 1;

		.disCard1-store {
			width: 300upx;
		}

		.disCard-notice-use {
			color: #bdbdbd;
		}

		.disCard2-notice-use {
			width: 300upx;
		}

		.disCard-skip-btn {
			position: absolute;
			right: 20upx;
			bottom: 24upx;
			width: 130upx;
			height: 50upx;
			line-height: 50upx;
			border-radius: 10upx;
			// background-color: linear-gradient(direction, #FF8032, #ff4444);
			background: -webkit-linear-gradient(right, #FF8032 , #ff4444); /* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(right, #FF8032 , #ff4444); /* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(right, #FF8032 , #ff4444); /* Firefox 3.6 - 15 */
			background: linear-gradient(right, #FF8032 , #ff4444); /* 标准的语法（必须放在最后） */
		}
		
		.disCard-skip-btns {
			position: absolute;
			right: 20upx;
			bottom: 24upx;
			width: 130upx;
			height: 50upx;
			line-height: 50upx;
			border-radius: 10upx;
			background-color: #999999;
		}

		.disCard2-skip {
			position: absolute;
			right: 0;
			bottom: 20upx;
		}

		.disCard2-skip-btn {
			width: 70upx;
			border-radius: 50%;
			height: 70upx;
			background: #d83a3a;
			color: #FFF;
			padding: 10upx;
		}
	}
</style>
