<template>
<view class="container flex flex-col">
	<block v-if="isload">
		<view class="discount-detail flex1 flex-col">
			<block v-if="record.id">
				<view class="discount-detail__hd flex">
					<view class="discount-detail__hd-left" :style="{color:t('color1')}" v-if="record.type==1">{{record.type==1?'券':(record.type==2?'礼':(record.type==3?'次':(record.type==4?'抵':(record.type==5?'餐':''))))}}</view>
					<view class="discount-detail__hd-right">
						<view class="discount-detail__hd-title">{{record.couponname}}</view>
						<view class="discount-detail__hd-tips">到店使用时请出示核销码进行核销</view>
					</view>
				</view>
				<view class="discount-detail__bd flex1">
					<view class="discount-detail__bd-code" v-if="record.status==0 && record.hexiaoqr">
						<image class="code-img" :src="record.hexiaoqr" @tap="previewImage" :data-url="record.hexiaoqr"></image>
					</view>
					<view class="discount-detail__bd-item flex" v-if="record.type==1">
						<text class="item-hd">面额</text>
						<text class="item-bd">{{record.money}}元</text>
					</view>
					<view class="discount-detail__bd-item flex" v-if="coupon.bid!=0">
						<text class="item-hd">适用商家</text>
						<text class="item-bd">{{coupon.bname}}</text>
					</view>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">类型</text>
						<text class="item-bd">{{record.type==1?'代金券':(record.type==2?'礼品券':(record.type==3?'计次券':(record.type==4?'运费抵扣券':(record.type==5?'餐饮券':''))))}}{{coupon.isgive == 1?'（可赠送）':''}}</text>
					</view>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">使用条件</text>
							<text class="item-bd">{{record.minprice > 0?'满'+record.minprice+'元可用':'无门槛'}}</text>
					</view>
					<block v-if="record.type==3">
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">共计次数</text>
						<text class="item-bd">{{record.limit_count}}</text>
					</view>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">已使用次数</text>
						<text class="item-bd">{{record.used_count}}</text>
					</view>
					<block v-if="record.limit_perday>0">
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">每天限制次数</text>
						<text class="item-bd">{{record.limit_perday}}</text>
					</view>
					</block>
					</block>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">领取时间</text>
						<text class="item-bd">{{record.createtime}}</text>
					</view>
					<block v-if="record.status==1">
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">使用时间</text>
						<text class="item-bd">{{record.usetime}}</text>
					</view>
					</block>
					
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">有效期</text>
						<view class="item-bd">
							<view>{{record.starttime}} 至</view>
							<view>{{record.endtime}}</view>
						</view>
					</view>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">使用说明</text>
						<view class="item-bd">{{coupon.usetips || "无"}}</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="discount-detail__hd flex al-item-center">
					<view class="discount-detail__hd-left" :style="{color:t('color1')}" v-if="coupon.type==1">{{coupon.type==1?'券':(coupon.type==2?'礼':(coupon.type==3?'次':(coupon.type==4?'抵':(coupon.type==5?'餐':''))))}}</view>
					<view class="discount-detail__hd-right">
						<view class="discount-detail__hd-title">{{coupon.name}}</view>
					</view>
				</view>
				<view class="discount-detail__bd flex1">
					<view class="discount-detail__bd-item flex" v-if="coupon.type==1">
						<text class="item-hd">面额</text>
						<text class="item-bd">{{coupon.money}}元</text>
					</view>
					<view class="discount-detail__bd-item flex" v-if="coupon.bid!=0">
						<text class="item-hd">适用商家</text>
						<text class="item-bd">{{coupon.bname}}</text>
					</view>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">类型</text>
						<text class="item-bd">{{coupon.type==1?'代金券':(coupon.type==2?'礼品券':(coupon.type==3?'计次券':(coupon.type==4?'运费抵扣券':(coupon.type==5?'餐饮券':''))))}}{{coupon.isgive == 1?'（可赠送）':''}}</text>
					</view>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">使用条件</text>
							<text class="item-bd">{{coupon.minprice > 0 ? '满'+coupon.minprice+'元可用' : '无门槛'}}</text>
					</view>
					<block v-if="coupon.type==3">
						<view class="discount-detail__bd-item flex">
							<text class="item-hd">共计次数</text>
							<text class="item-bd">{{coupon.limit_count}}次</text>
						</view>
						<block v-if="coupon.limit_perday>0">
							<view class="discount-detail__bd-item flex">
								<text class="item-hd">每天限制使用</text>
								<text class="item-bd">{{coupon.limit_perday}}次</text>
							</view>
						</block>
					</block>
					<block v-if="coupon.price>0">
						<view class="discount-detail__bd-item flex">
							<text class="item-hd">所需金额</text>
							<text class="item-bd">￥{{coupon.price}}</text>
						</view>
					</block>
					<block v-if="coupon.score>0">
						<view class="discount-detail__bd-item flex">
							<text class="item-hd">所需{{t('积分')}}</text>
							<text class="item-bd">{{coupon.score}}{{t('积分')}}</text>
						</view>
					</block>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">活动时间</text>
						<view class="item-bd">
							<view>{{coupon.starttime}} 至</view>
							<view>{{coupon.endtime}}</view>
						</view>
					</view>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">有效日期</text>
						<block v-if="coupon.yxqtype==1">
						<view class="item-bd">
							<view>{{coupon.yxqtime.substring(0,coupon.yxqtime.indexOf('~'))}} 至</view>
							<view>{{coupon.yxqtime.substring(coupon.yxqtime.indexOf('~')+1,coupon.yxqtime.length)}}</view>
						</view>
						</block>
						<block v-else-if="coupon.yxqtype==2">
						<text class="item-bd">领取后{{coupon.yxqdate}}天内有效</text>
						</block>
						<block v-else-if="coupon.yxqtype==3">
						<text class="item-bd">领取后{{coupon.yxqdate}}天内有效（次日0点生效）</text>
						</block>
					</view>
					<view class="discount-detail__bd-item flex">
						<text class="item-hd">使用说明</text>
						<view class="item-bd">{{coupon.usetips || '无'}}</view>
					</view>
				</view>
			</block>
			<view v-if="!record.id"  class="discount-detail__ft" @tap="getcoupon" :data-id="coupon.id" :data-price="coupon.price" :data-score="coupon.score" :data-canget="coupon.canget">{{coupon.price>0?'立即购买':(coupon.score>0?'立即兑换':(coupon.canget?'立即领取':'立即使用'))}}</view>
			<block v-if="mid == record.mid">
				<view v-if="record.id && coupon.type==1 && record.status==0 && coupon.bid==0" class="discount-detail__ft" @tap="goto" :data-url="'/pages/maidan/pay?cprid=' + record.id">立即使用</view>
				<block v-if="record.id && record.status==0 && coupon.isgive == 1">
					<view class="discount-detail__ft" @tap="shareapp" v-if="getplatform() == 'app'" :data-id="record.id">转赠好友</view>
					<view class="discount-detail__ft" @tap="sharemp" v-else-if="getplatform() == 'mp'" :data-id="record.id">转赠好友</view>
					<view class="discount-detail__ft" @tap="sharemp" v-else-if="getplatform() == 'h5'" :data-id="record.id">转赠好友</view>
					<button class="discount-detail__ft" open-type="share" v-else :data-id="record.id">转赠好友</button>
				</block>
			</block>
			<block v-else>
				<view v-if="coupon.isgive == 1 && opt.pid == record.mid && opt.pid > 0" class="discount-detail__ft" @tap="receiveCoupon" :style="{background:'linear-gradient(to bottom,'+t('color2')+' 0%,rgba('+t('color2rgb')+',0.8) 100%)'}" :data-id="record.id">立即领取</view>
			</block>
		</view>
		
		<view class='return-tips' @tap="goto" data-url='/pages/index/index'><text>返回首页</text></view>
	</block>
	<loading v-if="loading"></loading>
	<dp-tabbar :opt="opt"></dp-tabbar>
	<popmsg ref="popmsg"></popmsg>
</view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
			opt:{},
			loading:false,
      isload: false,
			menuindex:-1,
			pre_url:app.globalData.pre_url,

			textset:{},
			record:{},
			coupon:{},
			shareTitle:'',
			sharePic:'',
			shareDesc:'',
			shareLink:'',
			mid:0
		}
  },

  onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.getdata();
  },
	onPullDownRefresh: function () {
		this.getdata();
	},
	onShareAppMessage:function(){
		return this._sharewx({title:this.shareTitle,pic:this.sharePic,desc:this.shareDesc,link:this.shareLink});
	},
	onShareTimeline:function(){
		var sharewxdata = this._sharewx({title:this.shareTitle,pic:this.sharePic,desc:this.shareDesc,link:this.shareLink});
		var query = (sharewxdata.path).split('?')[1];
		console.log(sharewxdata)
		console.log(query)
		return {
			title: sharewxdata.title,
			imageUrl: sharewxdata.imageUrl,
			query: query
		}
	},
  methods: {
		getdata: function () {
			var that = this;
			that.loading = true;
			app.get('ApiCoupon/coupondetail', {rid: that.opt.rid,id: that.opt.id}, function (res) {
				that.loading = false;
				that.textset = app.globalData.textset;
				uni.setNavigationBarTitle({
					title: that.t('优惠券') + '详情'
				});
				if(!res.coupon.id) {
					app.alert(that.t('优惠券')+'不存在');return;
				}
				that.mid = app.globalData.mid;
				that.record = res.record;
				that.coupon = res.coupon;
				that.shareTitle = '送你一张优惠券，点击领取';
				that.shareDesc = that.coupon.name;
				that.sharePic = app.globalData.initdata.logo;
				that.shareLink = app.globalData.pre_url +'/h5/'+app.globalData.aid+'.html#/pages/coupon/coupondetail?scene=id_'+that.coupon.id+'-pid_' + app.globalData.mid+'-rid_' + that.record.id;
				that.loaded({title:that.shareTitle,pic:that.sharePic,desc:that.shareDesc,link:that.shareLink});
			});
		},
    getcoupon: function (e) {
			var that = this;
			var datalist = that.datalist;
			var id = e.currentTarget.dataset.id;
			var score = parseInt(e.currentTarget.dataset.score);
			var price = e.currentTarget.dataset.price;
			var canget = e.currentTarget.dataset.canget;

			if (price > 0) {
				app.post('ApiCoupon/buycoupon', {id: id}, function (res) {
					if(res.status == 0) {
							app.error(res.msg);
					} else {
						app.goto('/pages/pay/pay?id=' + res.payorderid);
					}
				})
				return;
			}
			var key = e.currentTarget.dataset.key;
			if (score > 0) {
				app.confirm('确定要消耗' + score + '' + that.t('积分') + '兑换吗?', function () {
					app.showLoading('兑换中');
					app.post('ApiCoupon/getcoupon', {id: id}, function (data) {
						app.showLoading(false);
						if (data.status == 0) {
							app.error(data.msg);
						} else {
							app.success(data.msg);
							datalist[key]['haveget'] = data.haveget;
							that.datalist = datalist;
						}
					});
				});
			} else if(!canget) {
				uni.navigateTo({
					url:'/pages/shop/prolist?cpid='+ id
				})
			} else {
				app.showLoading('领取中');
				app.post('ApiCoupon/getcoupon', {id: id}, function (data) {
					app.showLoading(false);
					if (data.status == 0) {
						app.error(data.msg);
					} else {
						app.success(data.msg);
						setTimeout(function(){
							app.goto('mycoupon');
						},1000)
					}
				});
			}
    },
		
		receiveCoupon:function(){
			var that = this;
			var datalist = that.datalist;
			var rid = that.record.id;
			var id = that.coupon.id;
			app.showLoading('领取中');
			app.post('ApiCoupon/receiveCoupon', {id: id,rid:rid}, function (data) {
				app.showLoading(false);
				if (data.status == 0) {
					app.error(data.msg);
				} else {
					app.success(data.msg);
					that.getdata();
				}
			});
		},
		
		sharemp:function(){
			app.error('点击右上角发送给好友或分享到朋友圈');
			this.sharetypevisible = false
		},
		shareapp:function(){
			var that = this;
			that.sharetypevisible = false;
			uni.showActionSheet({
		    itemList: ['发送给微信好友', '分享到微信朋友圈'],
		    success: function (res){
					if(res.tapIndex >= 0){
						var scene = 'WXSceneSession';
						if (res.tapIndex == 1) {
							scene = 'WXSenceTimeline';
						}
						var sharedata = {};
						sharedata.provider = 'weixin';
						sharedata.type = 0;
						sharedata.scene = scene;
						sharedata.title = '送你一张优惠券，点击领取';
						sharedata.summary = that.shareDesc;
						sharedata.href = that.shareLink;
						sharedata.imageUrl = that.sharePic;
						
						uni.share(sharedata);
					}
		    }
		  });
		},
  }
};
</script>
<style lang="scss">
.container {
	padding: 20rpx 40rpx;
	min-height: 100vh;
	box-sizing: border-box;
	background: linear-gradient(180deg,#058552 0%,#096742 100%);
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
.discount-detail {
	border-radius:50rpx;
	background: #FFF;
	padding: 44rpx 40rpx;
	&__hd {
		padding-bottom: 40rpx;
		position: relative;
		&::before,&::after {
			content: "";
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			bottom: -15rpx;
			border-radius: 50%;
			background: #068150;
		}
		&::before {
			left: -55rpx;
		}
		&::after {
			right: -55rpx;
		}
		&-left {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			background: linear-gradient(to right,#EAFBF4 0%,#CAF6E5 100%);
			font-size: 48rpx;
			font-weight: bold;
			line-height: 96rpx;
			text-align: center;
			margin-right: 16rpx;
			flex-shrink: 0;
		}
		&-right {
			flex: 1;
		}
		&-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 44rpx;
		}
		&-tips {
			margin-top: 10rpx;
			font-size: 22rpx;
			color: #999999;
			line-height: 32rpx;
		}
	}
	&__bd {
		padding-top: 40rpx;
		position: relative;
		margin-bottom: 60rpx;
		&::before {
			content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 2rpx;
            background-image: linear-gradient(to right, #EEEEEE 0%, #EEEEEE 50%, transparent 50%);
            background-size: 20rpx 4rpx;
            background-repeat: repeat-x;
		}
		&-code {
			width: 530rpx;
			height: 520rpx;
			margin: 0 auto 16rpx;
			.code-img {
				width: 100%;
				height: 100%;
			}
		}
		&-item {
			margin-top: 28rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			.item-hd {
				color: #999999;
				width: 140rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
			.item-bd {
				color: #333333;
				font-weight: bold;
			}
		}
	}
	&__ft {
		height: 80rpx;
		line-height :80rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 40rpx;
		background: linear-gradient(to right,#00AE68 0%,#096742 100%);
	}
}
.return-tips {margin-top: 60rpx;text-align: center;font-size: 28rpx;color: rgba(255,255,255,0.4);line-height: 40rpx;}
</style>