<template>
	<view>
		<view :class="fee_detail ? 'shadow' : ''">
			<view class="_container">
				<view class="play_info">
					<view class="_top">
						<image class="img" :src="_info.show_info.show_pic" />
						<view class="info">
							<view class="title">{{ _info.show_info.show_name }}</view>
							<view>
								<view class="line">{{ _info.show_info.show_date }}</view>
								<view class="line">{{ _info.show_info.city_name }}｜{{ _info.show_info.theater_name }}
								</view>
							</view>
							<view class="line">
								<image src="/static/images/ui/passedGreen.png" />
								<text>不支持退票</text>
								<block v-if="_info.show_info.is_invoice == 0">
									<image src="/static/images/ui/closeRed.png" />
									<text>不可开发票</text>
								</block>
								<block v-else-if="_info.show_info.is_invoice == 1">
									<image src="/static/images/ui/passedGreen.png" />
									<text>可开发票</text>
								</block>
							</view>
						</view>
					</view>

					<view class="split-line"></view>

					<view class="_bottom">
						<view class="_ticket" v-for="(ticket_list, index) in _info.ticket_info" :key="index">
							<view class="sit_info">¥{{ ticket_list.price }}*{{ ticket_list.tkt_num }}张</view>

							<view style="display: flex; flex-wrap: wrap">
								<view class="sit_info1" v-for="(item, index1) in ticket_list.list" :key="index1">
									{{ item.seat_info }}
								</view>
							</view>
						</view>
						<view class="line1">
							<navigator open-type="navigateBack" style="font-size: 24rpx; color: #999999">重新选座
							</navigator>
							<view style="font-size: 36rpx">
								共
								<text style="color: #ff1d42; font-weight: bold">¥{{ tprice }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cell">
				<view class="line1">
					<view class="title">取票方式</view>
					<view class="value">短信票码</view>
				</view>
			</view>
			<view class="cell">
				<view class="line1">
					<view class="title">取票人</view>
					<view class="value">{{ _info.order_info.mobile }}</view>
				</view>
				<view class="tips">支付成功后，凭短信票码到剧场兑换纸质票入场，或直接入场</view>
			</view>
			<view style="background: #fff; margin-bottom: 20rpx">
				<view class="cell cell1" v-if="_info.show_info.is_real_name == 1 || _info.show_info.is_real_name == 2">
					<view class="line1">
						<view style="display: flex; align-items: center">
							<view style="width: 160rpx">观演人</view>
							<view class="tips" style="margin: 0">
								{{ _info.show_info.is_real_name == 2 ? '一证即可观演' : '一人一票实名观影，入场需携带对应证件' }}
							</view>
						</view>
						<image src="/static/images/ui/add.png" style="width: 34rpx; height: 34rpx" @tap="viewer_nav" />
					</view>
				</view>

				<radio-group v-if="_info.show_info.is_real_name == 2" class="checkboxGroup" @change="viewer_sel1">
					<label v-for="(item, index) in viewer_info" :key="index" style="width: 100%;">
						<view v-if="rolled ? index < 6 : true" class="line1" style="margin: 15rpx 0">
							<view style="display: flex; align-items: center; font-size: 12px">
								<view style="width: 160rpx">{{ item.name }}</view>
								<view>{{ item.id_card }}</view>
							</view>
							<radio style="transform: scale(0.7)" :value="item.viewer_id" :checked="item.checked" />
							<!-- <icon size="16" color="{{item.checked?'#07C160':'#CACACA'}}" type="success" /> -->
						</view>
					</label>
				</radio-group>
				<checkbox-group v-else-if="_info.show_info.is_real_name == 1" class="checkboxGroup"
					@change="viewer_sel">
					<label v-for="(item, index) in viewer_info" :key="index" style="width: 100%;">
						<view v-if="rolled ? index < 6 : true" class="line1" style="margin: 15rpx 0">
							<view style="display: flex; align-items: center; font-size: 12px">
								<view style="width: 160rpx">{{ item.name }}</view>
								<view>{{ item.id_card }}</view>
							</view>
							<checkbox style="transform: scale(0.7)" :value="item.viewer_id" :checked="item.checked" />
							<!-- <icon size="16" color="{{item.checked?'#07C160':'#CACACA'}}" type="success" /> -->
						</view>
					</label>
				</checkbox-group>

				<view v-if="_info.viewer_info.length >= 6" class="roll" @tap="rolled=!rolled">
					{{ rolled ? '展开观演人列表' : '收起观演人列表' }}
				</view>
			</view>

			<view class="cell">
				<view class="line1">
					<view class="title">票价优惠</view>
					<view class="value">-¥{{ _info.order_info.discount_price }}</view>
				</view>
			</view>
			<navigator :url="'/pages/make_order/coupon/coupon?tid=' + tid + '&drama_id=' + drama_id" class="cell"
				style="border: none">
				<view class="line1">
					<view class="title">优惠券</view>
					<view class="value" style="display: flex; align-items: center">
						<text v-if="coupon">-¥{{ coupon.subtract }}</text>
						<image src="/static/images/ui/right1.png" style="width: 26rpx; height: 26rpx" />
					</view>
				</view>
			</navigator>

			<view style="margin-top: 400rpx; height: 2rpx" />
		</view>

		<view class="submit" style="border-radius: none">
			<view v-if="!fee_detail">
				<view style="display: flex; align-items: center; margin: 10px 20px">
					<!-- #ifndef MP-ALIPAY || MP-BAIDU -->
					<checkbox class="checkBox" :checked="agreementChecked" @tap="agreementChecked=!agreementChecked"></checkbox>
					<!-- #endif -->
					<!-- #ifdef MP-BAIDU -->
					<checkbox class="checkBox" @tap="agreementChecked=!agreementChecked" :value="agreementChecked"></checkbox>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<checkbox class="checkBox" :checked="agreementChecked" @change="agreementChecked=!agreementChecked"></checkbox>
					<!-- #endif -->
					<text class="check">购票须先同意</text>
					<view @tap="agreement" style="color: #1394f2; font-size: 28rpx">《服务条款》</view>
				</view>
			</view>
			<view v-else class="fee_detail">
				<view class="title">费用明细</view>
				<view class="ln" style="font-weight: normal; font-size: 24rpx"
					v-for="(item, index) in _info.ticket_info" :key="index">
					<view class="text l">¥{{ item.price }}</view>

					<view class="line"></view>

					<view class="text r">{{ item.tkt_num }}张</view>
				</view>
				<view class="ln">
					<view class="text l">商品合计</view>
					<view class="line"></view>
					<view class="text r">¥{{ tprice }}</view>
				</view>
				<view class="ln">
					<view class="text l">票价优惠</view>
					<view class="line"></view>
					<view class="text r">-¥{{ _info.order_info.discount_price }}</view>
				</view>
				<view class="ln" v-if="coupon">
					<view class="text l">优惠券</view>
					<view class="line"></view>
					<view class="text r">{{ coupon.subtract }}</view>
				</view>
			</view>

			<view style="display: flex; height: 128rpx; align-items: center; border-top: 1px solid #dddddd">
				<view class="cacu">
					<text class="text">实付款</text>
					<!-- #ifdef MP-ALIPAY -->
					<view style="margin: 0 5px;display: flex;align-items: center;">
						<!-- #endif -->
						<text :decode="true" class="fee">&nbsp;&nbsp;¥</text>
						<text :decode="true" class="fee1">
							{{
                            coupon
                                ? _info.order_info.order_price - coupon.subtract >= 0
                                    ? _info.order_info.order_price - coupon.subtract
                                    : 0
                                : _info.order_info.order_price
                        }}&nbsp;&nbsp;
						</text>
						<!-- #ifdef MP-ALIPAY -->
					</view>
					<!-- #endif -->
					<text class="detail" @tap="fee_detail=!fee_detail">明细{{ fee_detail ? '▼' : '▲' }}</text>
				</view>
				<button class="button" @tap="onSubmit">提交订单</button>
			</view>
		</view>
		<!-- #ifndef MP-BAIDU -->
		<u-modal title="服务条款" :show="show1" @confirm="show1=false">
			<view class="slot-content" style="margin: 40rpx 20rpx; font-size: 24rpx; color: #565656">
				我已确认购票场次及价位，完全知悉并接收如下约定：话剧演出性质特殊且具有时效性，演出票一经售出不退不换
			</view>
		</u-modal>
		<!-- #endif -->

		<u-modal :show="show" title="确认支付" showCancelButton @confirm="pay" @cancel="show=false">
			<view class="slot-content pay_detail">
				<view class="ln">
					<view>演出场馆：</view>
					<view>{{ _info.show_info.city_name }}｜{{ _info.show_info.theater_name }}</view>
				</view>
				<view class="ln">
					<view>演出时间：</view>
					<view>{{ _info.show_info.show_date }}</view>
				</view>
				<view class="ln">
					<view>支付金额：</view>
					<view>
						¥{{
                            coupon
                                ? _info.order_info.order_price - coupon.subtract >= 0
                                    ? _info.order_info.order_price - coupon.subtract
                                    : 0
                                : _info.order_info.order_price
                        }}
					</view>
				</view>
				<view class="ln">
					<view>购票数：</view>
					<view>{{ _info.order_info.tkt_num }}张</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	// pages/user/make_order/make_order.js
	import {
		httpUtil,
		http,
		orderSubmit
	} from '../../../utils/util';
	export default {
		data() {
			return {
				rolled: true,
				agreementChecked: false,
				show: false,
				viewer_info: [],
				max_viewer_num: 6,
				tprice: '',
				tid: '',
				drama_id: '',
				fee_detail: '',
				show1: false,
				viewer_id: '',
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let tid = options.tid;
			let drama_id = options.drama_id;
			http('/api/v1/order-confirm', 'post', {
				tid
			}).then((res) => {
				let _info = res;
				/* ？？？？？？自己算总价？？？？？？？？ */

				let tprice = 0;

				for (let i in _info.ticket_info) {
					tprice += _info.ticket_info[i].price * _info.ticket_info[i].tkt_num;
				}

				this.getRecommendCoupons(options.drama_id, options.tid);
				this.setData({
					_info,
					viewer_info: _info.viewer_info,
					tprice,
					tid,
					drama_id
				});
			});
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			var curPage = getCurrentPages()[getCurrentPages().length - 1]
			// #ifdef MP-BAIDU
			if(curPage.data.more_viewer_info){
				this.viewer_info.push(curPage.data.more_viewer_info)
			}
			// #endif
			if (curPage.data.coupon) {
				this.setData({
					coupon: curPage.data.coupon
				})
			}
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			agreement() {
				this.show1 = true
				// #ifdef MP-BAIDU
				swan.showModal({
					title: '服务条款',
					content: '我已确认购票场次及价位，完全知悉并接收如下约定：话剧演出性质特殊且具有时效性，演出票一经售出不退不换',
					showCancel:false
				});
				// #endif
			},
			viewer_nav() {
				uni.navigateTo({
					url: '/pages/user/viewer_list/viewer_list?situationAdd=1'
				});
			},
			viewer_sel1(e) {
				this.setData({
					viewer_id: e.detail.value
				});
			},
			viewer_sel(e) {
				var items = this.viewer_info;
				var values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;

					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].viewer_id == values[j]) {
							items[i].checked = true;
							break;
						}
					}
				}

				var arr = '';

				for (var i in items) {
					if (items[i].checked) {
						arr += ',' + items[i].viewer_id;
					}
				}

				this.setData({
					viewer_info: items,
					viewer_id: arr.substring(1)
				});
			},

			onSubmit() {
				if (this._info.show_info.is_real_name == 1) {
					var tid = this.tid;
					var viewer_id = this.viewer_id;
					if (viewer_id && tid.split(',').length == viewer_id.split(',').length) {
						if (this.agreementChecked) {
							this.setData({
								show: true
							});
						} else {
							uni.showToast({
								title: '请勾选服务条款',
								icon: 'none',
								duration: 2000
							});
						}
					} else {
						uni.showToast({
							title: '观演人数和座位数不符',
							icon: 'none',
							duration: 2000
						});
					}
				} else {
					if (this._info.show_info.is_real_name == 2) {
						var tid = this.tid;
						var viewer_id = this.viewer_id;

						if (viewer_id) {
							if (this.agreementChecked) {
								this.setData({
									show: true
								});
							} else {
								uni.showToast({
									title: '请勾选服务条款',
									icon: 'none',
									duration: 2000
								});
							}
						} else {
							uni.showToast({
								title: '观演人数和座位数不符',
								icon: 'none',
								duration: 2000
							});
						}
					} else {
						if (this.agreementChecked) {
							this.setData({
								show: true
							});
						} else {
							uni.showToast({
								title: '请勾选服务条款',
								icon: 'none',
								duration: 2000
							});
						}
					}
				}
			},


			pay() {
				if (this.show) {
					this.setData({
						show: false
					});
					var tid = this.tid;
					var viewer_id = this.viewer_id;
					let coupon = this.coupon;
					let order_data = {
						tid,
						viewer_id
					}
					if (coupon && coupon.coupon_id && 'underfined' !== coupon.coupon_id) {
						order_data.coupon_id = coupon.coupon_id
					}


					orderSubmit(order_data)
				}
			},

			//    使用最大减免优惠券
			getRecommendCoupons(drama_id, tid) {
				http('/api/v1/coupon-list', 'post', {
					drama_id: drama_id ? drama_id : this.data.drama_id,
					tid,
					mode: 1
				}).then((Response) => {
					if (Response.coupon_list.length > 0) {
						let coupon_list = Response.coupon_list; //  去除日期格式

						let a = [];
						coupon_list.forEach((item) => {
							if (item.status == 1) {
								item.end_date = item.end_date.replace(/[\u4e00-\u9fa5]/g, '');
								a.push(item);
							}
						});
						coupon_list = a; //  优惠券筛选策略

						function couponSort(list, params) {
							let descList;

							if (arguments[2] == 'asc') {
								descList = list.sort((a, b) => {
									return a[params] - b[params];
								});
							} else {
								descList = list.sort((a, b) => {
									return b[params] - a[params];
								});
							}

							let l = [];
							l.push(descList[0]);
							descList.forEach((item, index) => {
								if (index != 0 && item[params] == l[0][params]) {
									l.push(item);
								}
							});
							return l;
						}

						let recommendCoupons = couponSort(couponSort(couponSort(coupon_list, 'subtract'), 'full'),
							'end_date', 'asc');

						if (recommendCoupons && recommendCoupons.length > 0) {
							this.setData({
								coupon: recommendCoupons[0]
							});
						}
					}
				});
			}
		},
	};
</script>
<style>
	.line {
		display: flex;
		align-items: center;
	}

	.line1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shadow {
		z-index: 99;
		opacity: 0.6;
		filter: alpha(opacity=60);
	}

	._container {
		background-color: #ff446b;
		padding: 30rpx 20rpx;
	}

	.play_info {
		background-color: #ffffff;
		border-radius: 10rpx;
	}

	.split-line {
		position: relative;
		flex: 0 0 0;
		border-top: 2rpx dashed #eee;
	}

	.split-line:before,
	.split-line:after {
		content: '';
		position: absolute;
		width: 16rpx;
		height: 32rpx;
		background: #ff446b;
		top: -18rpx;
		z-index: 1;
	}

	.split-line:before {
		border-radius: 0 32rpx 32rpx 0;
		left: 0;
	}

	.split-line::after {
		border-radius: 32rpx 0 0 32rpx;
		right: 0;
	}

	._top {
		display: flex;
		padding: 20rpx;
	}

	._top .img {
		background: #d8d8d8;
		border-radius: 16rpx;
		width: 168rpx;
		height: 252rpx;
	}

	._top .info {
		padding-left: 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	._top .info .title {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 48rpx;
	}

	._top .info .line {
		font-size: 24rpx;
		line-height: 48rpx;
		display: flex;
		align-items: center;
	}

	._top .info .line image {
		width: 28rpx;
		height: 28rpx;
	}

	._top .info .line text {
		margin: 0 20rpx 0 10rpx;
	}

	._bottom {
		padding: 20rpx 30rpx;
	}

	._bottom ._ticket {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	._bottom ._ticket .sit_info {
		font-weight: bold;
	}

	._bottom ._ticket .sit_info1 {
		font-size: 24rpx;
		color: #7b7b7b;
		width: 33%;
	}

	.cell {
		padding: 40rpx;
		border-bottom: 1rpx solid #dddddd;
		font-size: 28rpx;
		background: #fff;
		color: #181818;
	}

	.cell .tips {
		font-size: 24rpx;
		color: #7b7b7b;
		margin-top: 10rpx;
	}

	.cell1 {
		padding: 40rpx 0;
		margin: 0 40rpx;
	}

	.checkboxGroup {
		margin: 15rpx 40rpx;
	}

	.roll {
		text-align: center;
		font-size: 24rpx;
		color: #1394f2;
		padding: 10rpx 0 30rpx 0;
	}

	.clp_item_dsn {
		margin: 20rpx;
		color: #323233;
	}

	.margin_top_bottom {
		margin: 20rpx 0;
	}

	.submit {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #ffffff;
		z-index: 99;
	}

	.checkBox {
		transform: scale(0.7);
	}

	.check {
		font-size: 28rpx;
	}

	.submit .fee_detail {}

	.submit .fee_detail .title {
		margin-top: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.submit .fee_detail .ln {
		display: flex;
		text-align: center;
		margin: 20rpx 0;
		font-size: 28rpx;
		font-weight: bold;
	}

	.submit .fee_detail .ln .text {
		width: 15%;
		margin: 0 40rpx;
		white-space: nowrap;
	}

	.l {
		text-align: left;
	}

	.r {
		text-align: right;
	}

	.submit .fee_detail .ln .line {
		flex: 1;
		border-bottom: 2rpx dashed #dddddd;
		margin: auto;
	}

	.submit .cacu {
		display: flex;
		align-items: center;
		margin: 0 40rpx;
	}

	.submit .cacu .text {
		font-size: 28rpx;
		font-weight: bold;
	}

	.submit .cacu .fee {
		color: #ff1d42;
	}

	.submit .cacu .fee1 {
		color: #ff1d42;
		font-size: 44rpx;
		font-weight: bold;
	}

	.submit .cacu .detail {
		color: #1394f2;
		font-size: 28rpx;
	}

	.submit .button {
		width: 240rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
		border-radius: 44rpx;
		margin-right: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #ffffff;
		/* #ifdef MP-ALIPAY */
		margin-left: auto;
		/* #endif */
	}

	.pay_detail {
		margin: 40rpx 30rpx;
		color: #333333;
		font-size: 24rpx;
	}

	.pay_detail .ln {
		display: flex;
		justify-content: space-between;
		line-height: 40rpx;
	}
</style>
