<template>
	<view>
		<view class="info">
			<view class="title">{{info.show_info.show_name }}</view>
			<view class="line">{{ info.show_info.city_name }}｜{{info.show_info.theater_name }}</view>
			<view class="line">{{ info.show_info.show_date }}</view>
		</view>

		<view class="sit_sel">
			<view class="sit_warning">《温馨提示：各票档分区，不对号入座，请确认后购买》</view>
			<view class="title">选择票档</view>
			<view class="selecter" v-for="(item, index) in grade_list">
				<view class="price">¥{{ item.price }}</view>

				<stepper :value="item.value"
					:max="item.tkt_num > able_select ? (item.value ? able_select + item.value : able_select) : item.tkt_num"
					@change="change($event,index)" />

				<text v-if="item.tkt_num == 0">售罄</text>
			</view>
		</view>

		<view class="submit" style="display: flex; height: 128rpx; align-items: center">
			<view class="cacu" v-if="total">
				<text class="text">合计：</text>
				<text :decode="true" class="fee">&nbsp;&nbsp;¥</text>
				<text :decode="true" class="fee1">{{ total }}&nbsp;&nbsp;</text>
			</view>
			<button class="button" :disabled="!total" @tap="onSubmit">下一步</button>
		</view>
	</view>
</template>

<script>
	import stepper from '@/components/stepper/stepper';
	// pages/make_order/random_sit/random_sit.js
	import {
		http,
		httpUtil
	} from '../../../utils/util';
	export default {
		components: {
			stepper
		},
		data() {
			return {
				grade_list: [],
				max_select: 6,
				able_select: 6,
				grade_seat: [],
				drama_id: '',
				info: [],
				total: '',
				tid: '',
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let drama_id = options.drama_id;
			let that = this
			this.setData({
				drama_id
			});
			httpUtil('/api/v1/no-seat-list', 'get', {
				drama_id
			}).then((res) => {
				that.setData({
					info: res,
					grade_list: res.grade_list
				});
			});
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			change(e, index) {
				let value = e.detail.value
				let grade_list = this.grade_list;
				grade_list[index].value = value;
				let a = 0;
				grade_list.forEach((v, i) => {
					if (v.value && v.value !== 0) {
						a = a + v.value;
					}
				});
				this.setData({
					grade_list,
					able_select: this.max_select - a
				});
				let grade_price = this.info.grade_price;
				let grade_seat = this.grade_seat;
				let total = 0;
				let none = true;

				for (var grade in grade_price) {
					if (grade_list[index].grade == grade) {
						var price = grade_list[index].price;
						grade_list[index].sub_price = grade_price[grade][value];

						for (var i in grade_seat) {
							if (grade_seat[i].grade == grade) {
								grade_seat[i].tkt_num = value;
								none = false;
								this.setData({
									grade_seat
								});
							}
						}

						if (none) {
							grade_seat.push({
								grade,
								price,
								tkt_num: value
							});
							this.setData({
								grade_seat
							});
						}
					}
				}

				for (var i in grade_list) {
					if (grade_list[i].sub_price) {
						total += parseInt(grade_list[i].sub_price);
					}
				}

				this.setData({
					total
				});
			},

			onSubmit() {
				let data = {
					drama_id: this.info.show_info.drama_id,
					grade_seat: JSON.stringify(this.grade_seat)
				};
				http('/api/v1/no-seat-ticket', 'post', data).then((res) => {
					this.setData({
						tid: res.tid
					});
					var tid = '';
					res.tid.forEach((v, k) => {
						tid = tid + ',' + String(v);
					});
					tid = tid.substring(1);
					uni.navigateTo({
						url: '/pages/make_order/make_order/make_order?tid=' + tid + '&drama_id=' + this
							.drama_id
					});
				});
			}
		},

	};
</script>
<style>
	.info {
		background: #fff;
		padding: 20rpx 40rpx;
		color: #181818;
	}

	.info .title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.info .line {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.sit_sel {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 0 40rpx;
	}

	.sit_warning {
		text-align: center;
		font-size: 24rpx;
		color: #ff1d42;
		line-height: 64rpx;
	}

	.sit_sel .title {
		font-size: 28rpx;
		font-weight: bold;
		line-height: 64rpx;
	}

	.sit_sel .selecter {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		line-height: 80rpx;
	}

	.sit_sel .selecter .price {
		width: 200rpx;
		font-size: 14px;
	}

	.sit_sel .selecter text {
		margin-left: 60rpx;
		font-size: 14px;
		color: #ff1d42;
	}

	.submit {
		position: fixed;
		width: 100%;
		bottom: 0;
		border-top: 2rpx solid #dddddd;
		background: #ffffff;
		box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.2);
		z-index: 99;
		border-radius: 10px 10px 0px 0px;
	}

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

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

	.submit .cacu .fee {
		/* #ifdef MP-ALIPAY */
		margin-left: 20rpx;
		/* #endif */
		color: #ff1d42;
	}

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

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