<template>
	<view>
		<!-- 开屏广告 -->
		<view class="markinfo" v-if="isActionMarkShow" @touchstart="buttonStart" @touchmove.stop.prevent="buttonMove">
			<view class="fiexbox">
				<view class="box" @tap="onlinkurl" :data-id="screen_list.id" :data-link_url="screen_list.link_url">
					<image :src="screen_list.img_url"></image>
				</view>
				<view class="btn" @tap.stop.prevent="cancle_mark" :data-id="screen_list.id">×</view>
			</view>
		</view>
		<!-- 礼物弹窗 -->
		<view class="surprise" @tap="advertisementMark_show" v-if="isGiftMarkShow">
			<view class="img"></view>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="swiper" :autoplay="true" interval="2000" duration="500" previous-margin="20px"
				next-margin="20px" circular @change="bindchange">
				<swiper-item class="swiper_item" v-for="(item, index) in banner_list" :key="index">
					<image lazy-load :class="'img ' + (swiperIdx == index ? 'active' : 'quiet')" :src="item.pic"
						:data-key="item.route_path + item.key" @tap="banner_nav"></image>

					<view class="shadow" />
				</swiper-item>
			</swiper>
			<view class="indicator_dsn">
				<view :class="'dot ' + (swiperIdx == index ? 'active' : 'quiet')" v-for="(item, index) in banner_list"
					:key="index"></view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search_area">
			<view class="cal">
				<image src="/static/images/ui/calendar.png" @tap="calendar_nav" />
			</view>
			<view class="_search">
				<view class="_search1">
					<text @tap="area_nav">{{ city }}</text>
					<text v-if="city" style="color: #ff446b" :decode="true">&nbsp;&nbsp;｜&nbsp;&nbsp;</text>
					<!-- <input placeholder="开心麻花" placeholder-style="color: #ACACAC;" bindinput="write_in" bindconfirm="search"
        type="text" confirm-type="search" /> -->
					<!--  <input class="input" :placeholder="placeholder" disabled placeholder-style="color: #ACACAC;"
                        @input="write_in" @tap="search1" type="text" confirm-type="search" /> -->
					<view @tap="search1" style="flex:1;color: #ACACAC;">{{placeholder}}</view>
				</view>
				<image src="/static/images/ui/search.png" @tap="search1" />
			</view>
		</view>
		<!-- 列表 -->
		<view class="line">
			<view :class="'topLine ' + (swith_area == index ? 'active' : ' ')" :data-index="index" @tap="swith_tab"
				v-for="(item, index) in swich_space" :key="index">
				{{ item }}
			</view>
		</view>
		<view class="_list">
			<view class="_demo" :data-cycle_id="item.cycle_id" @tap="show_detail" v-for="(item, index) in current_list"
				:key="index">
				<image :lazy-load="true" :src="item.show_pic" class="list_img" />
				<view class="_ln flexC fd-col">
					<view>
						<view class="_ln1">
							<text>{{ item.start_date }}-{{ item.end_date }}</text>
							<image src="/static/images/ui/low_price.png" v-if="item.is_discount == 1" />
						</view>
						<view class="_ln2">
							<text>{{ item.show_name }}</text>
						</view>
					</view>
					<view class="_ln3">
						<view class="_ln4">
							<text style="font-size: 24rpx; color: #ff1d42">¥</text>
							<text
								style="font-size: 36rpx; font-weight: bold; color: #ff1d42; margin: 0 2rpx">{{ item.lowest_price }}</text>
							<text style="font-size: 20rpx; color: #7b7b7b">起</text>
						</view>
						<button class="_detail" :data-cycle_id="item.cycle_id">详情</button>
					</view>
				</view>

			</view>
		</view>
		<view class="more" v-if="no_more">别滑了，已经到底啦～</view>
	</view>
</template>

<script>
	// pages/index/index.js
	import {
		httpUtil,
		location_city
	} from '../../../utils/util';
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				city: '',
				swiperIdx: 0,
				swith_area: 0,
				swich_space: ['综合排序', '近期上演', '限时钜惠'],
				screen_list: [], //开屏广告信息
				//   screen_imgUrl: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61382ab58bf84d41d8cd98f00b204e9800998ecf8427e.jpg',
				isActionMarkShow: false, //开屏广告
				isGiftMarkShow: false, //首页弹窗
				show: true,
				show_list: [{
						sort_type: '1',
						list: 'newMake',
						page: '1',
						has_more: 'false'
					},
					{
						sort_type: '2',
						list: 'newMake',
						page: '1',
						has_more: 'false'
					},
					{
						sort_type: '3',
						list: 'newMake',
						page: '1',
						has_more: 'false'
					}
				],

				current_list: '',
				no_more: '',
				keyword: '',
				banner_list: '',
				placeholder: '',
				city_list: null,
				city_id: ''
			};
		},
		onLoad: function(options) {
			if (!getApp().globalData.city_id) {
				// 默认北京写法
				//location_city("beijing").then(res=>{
				location_city().then((res) => {
					var city = res.city_info.city_name;
					var city_id = res.city_info.city_id;
					getApp().globalData.city_id = city_id;
					this.refresh_info(city_id);
				}).catch(rej=>{
					if(rej==='定位未开启'){
						getApp().globalData.locationPermise =false
						location_city("beijing").then((res) => {
					var city = res.city_info.city_name;
					var city_id = res.city_info.city_id;
					getApp().globalData.city_id = city_id;
					this.refresh_info(city_id);
				})
					}
				})
			} else {
				this.refresh_info(getApp().globalData.city_id);
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			var curPage = getCurrentPages()[getCurrentPages().length - 1]
			if (curPage.data.city_id && curPage.data.city_id != this.city_id) {
				this.setData({
					show_list: [{
							sort_type: '1',
							list: 'newMake',
							page: '1',
							has_more: 'false'
						},
						{
							sort_type: '2',
							list: 'newMake',
							page: '1',
							has_more: 'false'
						},
						{
							sort_type: '3',
							list: 'newMake',
							page: '1',
							has_more: 'false'
						}
					],
					swith_area: 0,
				})
				this.refresh_info(curPage.data.city_id)
			}
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			uni.reLaunch({
				url: '/pages/index/index/index'
			});
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			let show_list = this.show_list;
			let current = show_list[this.swith_area];

			if (current.has_more) {
				uni.showNavigationBarLoading(); //在标题栏中显示加载图标

				let page = parseInt(current.page) + 1;
				let city_id = this.city_id;
				let sort_type = current.sort_type;
				httpUtil('/api/v1/show-list', 'get', {
					city_id,
					page,
					sort_type
				}).then((res) => {
					uni.hideNavigationBarLoading(); //完成停止加载图标

					show_list[this.swith_area].list = current.list.concat(res.show_list);
					show_list[this.swith_area].page = page;
					show_list[this.swith_area].has_more = res.has_more;
					this.setData({
						show_list,
						current_list: show_list[this.swith_area].list,
						no_more: !res.has_more
					});
				});
			} else {
				this.setData({
					no_more: true
				});
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				title: '开心麻花小程序 - 优惠购票',
				path: '/pages/index/index/index',
				imageUrl: 'https://mahuaimage.oss-cn-qingdao.aliyuncs.com/mini_app/share/home-share.png'
			};
		},
		methods: {
			// 轮播图
			bindchange(e) {
				this.setData({
					swiperIdx: e.detail.current
				});
			},

			swith_tab: function(e) {
				let swith_area = e.currentTarget.dataset.index;
				this.setData({
					swith_area
				});

				if ('newMake' == this.show_list[swith_area].list) {
					this.get_show_list(this.city_id, swith_area + 1, 1);
				} else {
					this.setData({
						current_list: this.show_list[swith_area].list,
						no_more: !this.show_list[swith_area].has_more
					});
				}
			},

			write_in(e) {
				this.setData({
					keyword: e.detail.value
				});
			},

			search(e) {
				this.setData({
					keyword: e.detail.value
				});
				uni.navigateTo({
					url: '/pages/index/search/search?city_id=' + this.city_id + '&keyword=' + e.detail.value
				});
			},

			search1() {
				uni.navigateTo({
					url: '/pages/index/search/search?city_id=' + this.city_id + '&keyword=' + this.keyword
				});
			},

			// 封装 获取banner｜获取城市列表｜获取演出列表
			// 方便刷新全局数据
			refresh_info: function(city_id) {
				var that = this; // 获取banner列表

				httpUtil('/api/v1/banner-list', 'get', {
					city_id
				},false).then((res) => {
					if (0 != res.banner_list.length) {
						let banner_list = res.banner_list.filter(item => {
							return item.show_type.indexOf('8') !== -1
						})
						that.setData({
							banner_list
						});
					}
				}); // 获取search关键词

				httpUtil('/api/v1/hot-search', 'get').then((res) => {
					that.setData({
						placeholder: res.keyword
					});
				}); // 获取演出城市列表

				httpUtil('/api/v1/city-list', 'get', {
					city_id
				},false).then((res2) => {
					that.setData({
						city_list: res2,
						city_id: res2.current.city_id,
						city: res2.current.city_name
					});
				}); // 获取演出列表

				let sort_type = 1;
				let page = 1;
				this.get_show_list(city_id, sort_type, page);
				//   获取开屏广告
				httpUtil("/api/v1/home-promotion", "get", {
					city_id
				},false).then(res => {
					if (res.length == 0) {
						return
					}
					let key = uni.getStorageSync('key')
					if (key.indexOf(res.id) != -1) {
						this.setData({
							screen_list: res,
							isGiftMarkShow: !this.isActionMarkShow
						})
						return
					}
					this.setData({
						screen_list: res,
						isActionMarkShow: true,
					})
				})
			},

			// 获取演出列表方法封装
			get_show_list(city_id, sort_type, page) {
				httpUtil('/api/v1/show-list', 'get', {
					city_id,
					sort_type,
					page
				},false).then((res) => {
					let show_list = this.show_list;
					show_list[sort_type - 1].list = res.show_list;
					show_list[sort_type - 1].has_more = res.has_more;
					this.setData({
						show_list,
						current_list: res.show_list,
						no_more: !res.has_more
					});
				});
			},

			banner_nav: function(e) {
				let url = e.currentTarget.dataset.key;
				console.log('前往地址：', url);
				uni.navigateTo({
					//  url: '/pages/opera/show/show_detail'+e.currentTarget.dataset.key,
					url
				});
			},

			calendar_nav: function() {
				uni.navigateTo({
					url: '/pages/index/calendar/calendar?city_id=' + this.city_id
				});
			},

			area_nav: function() {
				if (!this.city_list) {
					httpUtil('/api/v1/city-list', 'get', {
						city_id:52
					}).then((res) => {
						uni.navigateTo({
							url: '/pages/index/city/selectcity?city_list=' + JSON.stringify(res)
						})
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/city/selectcity?city_list=' + JSON.stringify(this
							.city_list) 
					})
				}
			},

			show_detail: function(e) {
				uni.navigateTo({
					url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id
				});
			},
			// 关闭广告
			cancle_mark(e) {
				let id = e.currentTarget.dataset.id
				let key = wx.getStorageSync('key')
				if (key.indexOf(id) == -1) {
					wx.setStorageSync('key', [...key, id])
				}
				this.setData({
					isActionMarkShow: false,
					isGiftMarkShow: true
				})
			},
			// 礼物图标
			advertisementMark_show() {
				this.setData({
					isActionMarkShow: true,
					isGiftMarkShow: false
				})
			},
			onlinkurl(e) {
				this.cancle_mark(e)
				let link_url = e.currentTarget.dataset.link_url
				wx.navigateTo({
					url: link_url
				})
			},
		}
	};
</script>
<style>
	/* .pageBox .swiperClass {margin: 0;margin-top: 40px;height: 608rpx;}
.pageBox .slide-image {width: 320px;
  height: 250px;border-radius: 10px;position: relative;box-shadow: 0 0 10rpx rgba(0, 0, 0, .8)}
.pageBox image.active {transform: none;transition: all 0.2s ease-in 0s;}
.pageBox image.quiet {transform: scale(0.8333333);transition: all 0.2s ease-in 0s;} */

	.banner {
		/* #ifdef MP-ALIPAY */
		position: relative;
		/* #endif */
	}

	.banner .swiper {
		text-align: center;
		margin-top: 40rpx;
		height: 560rpx !important;
		display: flex;
		align-items: center;
	}

	.banner .shadow {
		width: 550rpx;
		height: 212rpx;
		background: #7b7b7b;
		border-radius: 8rpx;
		opacity: 0.3;
		filter: blur(12px);
		position: absolute;
		left: 60rpx;
		top: 310rpx;
		z-index: -1;
	}

	.banner .swiper .swiper_item .img {
		width: 640rpx;
		height: 500rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx 0 #f3f3f3;
	}

	.banner .indicator_dsn {
		display: flex;
		justify-content: center;
		/* margin: 20rpx 0 40rpx 0; */
		position: absolute;
		top: 560rpx;
		/* #ifdef MP-ALIPAY */
		top: 520rpx;
		/* #endif */
		left: 50%;
		transform: translate(-50%);
	}

	.banner .indicator_dsn .dot {
		width: 8rpx;
		height: 8rpx;
		margin: 0 10rpx;
		border-radius: 8rpx;
		background-color: #ffffff;
	}

	.banner .indicator_dsn .dot.active {
		width: 32rpx;
		background-color: #ff446b;
	}

	.search_area {
		display: flex;
		padding: 0 20rpx 20rpx 20rpx;
		align-items: center;
	}

	.search_area .cal {
		width: 60rpx;
		height: 60rpx;
		margin: 0 26rpx 0 6rpx;
		background: #ffffff;
		box-shadow: 0 4rpx 20rpx 0 #f3f3f3;
		border: 2rpx solid #e9e9e9;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search_area .cal image {
		width: 28rpx;
		height: 32rpx;
	}

	.search_area ._search {
		display: flex;
		flex: 1;
		background-color: #ffffff;
		border-radius: 60rpx;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 20rpx 0 #f3f3f3;
		font-size: 24rpx;
		height: 64rpx;
		padding: 0 20rpx;
		margin-right: 10rpx;
		border: 2rpx solid #ebebeb;
	}

	.search_area ._search image {
		width: 28rpx;
		height: 28rpx;
	}

	.search_area ._search ._search1 {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.search_area ._search ._search1 .input {
		flex: 1;
	}

	.line {
		display: flex;
		margin-bottom: 20rpx;
	}

	.line .topLine {
		width: 33%;
		text-align: center;
		margin: 20rpx;
		color: #7b7b7b;
	}

	.line .topLine.active {
		position: relative;
		color: #181818;
		font-weight: bold;
	}

	.line .topLine.active:after {
		content: ' ';
		width: 1rem;
		height: 0.12rem;
		/* #ifdef MP-ALIPAY */
		width: 0.4rem;
		height: 0.04rem;
		/* #endif */
		background: #fff;
		position: absolute;
		/* bottom: -0.1rem; */
		bottom: -0.2rem;
		left: 50%;
		transform: translateX(-50%);
		background-color: #ff446b;
		border-radius: 0.12rem;
	}

	._list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	._list ._demo {
		margin: 0 0 40rpx 26rpx;
		width: 336rpx;
		background: #fff;
		border-radius: 16rpx;
		overflow: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	._list ._demo .list_img {
		width: 336rpx;
		height: 504rpx;
	}

	._list ._demo ._ln {
		margin: 4rpx 10rpx 12rpx 12rpx;
		flex: 1;
	}

	._list ._demo ._ln1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20rpx;
		color: #7b7b7b;
	}

	._list ._demo ._ln1 image {
		width: 36rpx;
		height: 28rpx;
	}

	._list ._demo ._ln2 {
		margin: 5rpx 0;
		font-size: 28rpx;
		font-weight: bold;
		color: #181818;
	}

	._list ._demo ._ln3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;
	}

	._list ._demo ._ln3 ._ln4 {
		display: flex;
		align-items: center;
	}

	._list ._demo ._ln3 ._detail {
		font-size: 24rpx;
		white-space: nowrap;
		border-radius: 22rpx;
		text-align: center;
		margin: 0;
		background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
		color: #fff;
		line-height: 42rpx;
		/* #ifdef MP-ALIPAY */
		line-height: 0.45rem;
		height: 0.45rem;
		width: 1.04rem;
		/* #endif */
	}

	.more {
		color: #7b7b7b;
		text-align: center;
		margin: 70rpx 0 40rpx 0;
	}

	.fiexbox {
		width: 400rpx;
		border-radius: 4rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0px;
		bottom: 0;
		margin: auto;
		z-index: 100;
		height: 700rpx;
	}

	.fiexbox .box image {
		width: 100%;
		height: 100%;
		border-radius: 4px;
	}

	.fiexbox .box {
		width: 400rpx;
		height: 600rpx;
		margin-bottom: 10px;
		border-radius: 4rpx;
	}

	.fiexbox .btn {
		margin-top: 10px;
		border-radius: 50%;
		border: 1px solid #fffaf0;
		color: #fffaf0;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		margin: 0 auto;
		background: rgba(228, 220, 220, 0.3) !important;
	}

	.markinfo {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		background: rgba(0, 0, 0, 0.64) !important;
		z-index: 100;
	}

	.surprise {
		position: fixed;
		right: 10rpx;
		bottom: 0rpx;
		z-index: 100;
	}

	.surprise .img {
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		background: url('https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61415f6cf0837b03af37cc5d456f21c901e1413071d7f.png');
		background-size: 150rpx 150rpx;
	}

	.surprise .img image {
		width: 100%;
		height: 100%;
	}

	.cton {
		background: yellow;
		color: #ccc;
		border-radius: 8rpx;
		width: 50rpx;
		/* margin: 0 auto; */
		text-align: center;
	}
</style>
