<template>
	<view>
		<!-- 轮播图 -->
		<!-- #ifdef MP-ALIPAY -->
		<scroll-view scroll-y :enhanced="true" :bounces="false">
			<!-- #endif -->
			<!-- #ifndef MP-ALIPAY -->
			<scroll-view scroll-y :enhanced="true" :bounces="false" style="height: 5000px;">
				<!-- #endif -->
				<view class="selection_cards" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
					style="width: 100%; overflow-x: hidden;">
					<view v-if="!(index===0||index===6)" class="selection_cards_item" :data-abb_id="item.abb_id"
						@tap="detail" :style="
						'left:' +
						item.style.left +
						'px; z-index:' +
						item.style.zIndex +
						';transform:' +
						item.style.transform +
						';opacity:' +
						(item.style.opacity == 0.4 ? '0.2' : item.style.opacity == 0.8 ? '0.6' : item.style.opacity) +
						';transition:' +
						(!isTouch ? '0.1s' : 0) +
						';background-image: url(' +
						item.backimage +
						');'
						" v-for="(item, index) in list" :key="index">
					</view>
					<!-- <view class="bac" :style="'left:' + item.style.left + 'px; transform:' + item.style.transform + ';'" v-for="(item, index) in list" :key="index"></view> -->
					<view class="white_area"
						:style="(white_area ? '' : 'display:none;') + 'left:' + white_area_left + 'px;'">
						<view class="title">{{ cname }}</view>
						<view class="des">{{ ctitle }}</view>
					</view>
					<view class="shadow" />
				</view>

				<view class="item" v-for="(i, index) in lists.other">
					<view class="line">
						<view class="_title">
							<!-- <view class="_icon" />{{index}} -->
							<view class="_icon"></view>
							{{ i.title }}
						</view>
						<navigator :url="'/pages/opera/IP_more/IP_more?category=' + i.category + '&title=' + i.title">
							<text class="more">查看更多</text>
							<image class="iconPic" src="/static/images/ui/ellipsis.png" />
						</navigator>
					</view>

					<scroll-view class="scroll-view_H" :scroll-x="true">
						<image :lazy-load="true" class="scroll-item" :data-abb_id="item.abb_id" :src="item.pic"
							@tap="detail" v-for="(item, index1) in i.list" :key="index1"></image>
					</scroll-view>
				</view>
			</scroll-view>
	</view>
</template>

<script>
	// pages/opera/opera_IP.js
	import {
		httpUtil,
		location_city
	} from '../../../utils/util';
	export default {
		data() {
			return {
				cardNumber: 7,
				indexArr: [-3, -2, -1, 0, 1, 2, 3],
				list: [],
				listArr: [],
				startPageX: 0,
				cardWidth: 0,
				screenWidth: 0,
				isTouch: false,
				white_area: true,
				cname: '',
				ctitle: '',
				city_id: null,
				lists: {
					other: []
				},

				swith_area: '',
				white_area_left: '',

				clone_li: {
					id: '',
					category: '',
					title: '',
					list: []
				}
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			this.setData({
				list: [],
				listArr: [],
				cname: '',
				ctitle: ''
			});
			let that = this;

			if (!getApp().globalData.city_id) {
				// 默认北京写法
				//location_city("beijing").then(res=>{
				location_city().then((res) => {
					console.log(res);
					var city = res.city_info.city_name;
					var city_id = res.city_info.city_id;
					getApp().globalData.city_id = city_id;
					httpUtil('/api/v1/ip-index', 'get', {
						city_id: getApp().globalData.city_id
					}).then((res) => {
						console.log(city_id);
						that.init(res);
						that.setData({
							lists: res,
							city_id
						});
					});
				});
			} else {
				let city_id = getApp().globalData.city_id
				httpUtil('/api/v1/ip-index', 'get', {
					city_id
				}).then((res) => {
					that.init(res);
					that.setData({
						lists: res,
						city_id
					});
				});
			}

		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			if (this.city_id && getApp().globalData.city_id && getApp().globalData.city_id != this.city_id) {
				let city_id = getApp().globalData.city_id
				httpUtil('/api/v1/ip-index', 'get', {
					city_id
				}).then((res) => {
					this.init(res);
					this.setData({
						lists: res,
						city_id
					});
				});
			}
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			detail(e) {
				uni.navigateTo({
					url: '/pages/opera/IP_detail/IP_detail?abb_id=' + e.currentTarget.dataset.abb_id
				});
			},

			// 轮播图

			/*触摸开始*/
			touchstart(e) {
				//console.log(e.changedTouches[0].pageX);
				this.setData({
					startPageX: e.changedTouches[0].pageX,
					isTouch: true //开始触摸
				});
			},

			/*触摸移动*/
			touchmove(e) {
				let _this = this;

				let pageX = e.changedTouches[0].pageX;
				let move = pageX - _this.startPageX; //正数，向右滑动；负数，向左滑动

				let list = JSON.parse(JSON.stringify(_this.list));
				let len = list.length; //console.log(move);

				if (move > 0) {
					//向右滑
					for (let i = 0; i < len; i++) {
						list[i].style.left = list[i].left + move * 0.521;

						if (_this.indexArr[i] < 0) {
							list[i].style.transform = 'scale(' + (list[i].scale + move * 0.0021) + ')';
							list[i].style.zIndex = list[i].zIndex + 1; //if (_this.data.indexArr[i] >= -3) {

							list[i].style.opacity = 1; // }
						} else {
							list[i].style.transform = 'scale(' + (list[i].scale - move * 0.0021) + ')';
							list[i].style.zIndex = list[i].zIndex - 1;

							if (_this.indexArr[i] >= 2) {
								list[i].style.opacity = 0;
							}
						}
					} //检查是否，向右

					if (list[2].style.left >= list[3].left) {
						let newArr = [];

						for (let i = 0; i < len; i++) {
							let index = i; //当前将要变成哪一个坐标元素的位置

							if (i + 1 != len) {
								index = i + 1;
							} else {
								//最后一个元素到第一个元素的位置
								index = 0;
							}

							let current_option = list[i].option; // console.log('current_option',current_option);
							// console.log('list[i].option',list[i].option);

							let item = _this.listArr[index];
							item.option = current_option;
							item.backimage = list[i].backimage;
							item.abb_id = list[i].abb_id;
							item.show_name = list[i].show_name;
							item.f_title = list[i].f_title;
							newArr[index] = item;
						} // console.log('old', list);
						// console.log('new', newArr);

						list = newArr;

						_this.setData({
							startPageX: pageX
						});
					}

					_this.setData({
						white_area: false,
						list
					});
				} else {
					//向左滑
					for (let i = 0; i < len; i++) {
						list[i].style.left = list[i].left + move * 0.521;

						if (_this.indexArr[i] <= 0) {
							list[i].style.transform = 'scale(' + (list[i].scale - Math.abs(move * 0.0021)) + ')';
							list[i].style.zIndex = list[i].zIndex - 1;

							if (_this.indexArr[i] <= -2) {
								list[i].style.opacity = 0;
							}
						} else {
							list[i].style.transform = 'scale(' + (list[i].scale + Math.abs(move * 0.0021)) + ')';
							list[i].style.zIndex = list[i].zIndex + 1; //  if (_this.data.indexArr[i] >= 2) {

							list[i].style.opacity = 1; // }
						}
					} //检查，向左

					if (list[3].style.left <= list[2].left) {
						let newArr = [];

						for (let i = 0; i < len; i++) {
							let index = i;

							if (i == 0) {
								index = len - 1;
							} else {
								index = i - 1;
							}

							let current_option = list[i].option; // console.log('current_option',current_option);
							// console.log('list[i].option',list[i].option);

							let item = _this.listArr[index];
							item.option = current_option;
							item.backimage = list[i].backimage;
							item.abb_id = list[i].abb_id;
							item.show_name = list[i].show_name;
							item.f_title = list[i].f_title;
							newArr[index] = item;
						} // console.log('old', list);
						// console.log('new', newArr);

						list = newArr;

						_this.setData({
							startPageX: pageX
						});
					}

					_this.setData({
						white_area: false,
						list
					});
				}
			},

			/*触摸结束*/
			touchend(e) {
				console.log('触摸结束');

				let _this = this;

				let list = JSON.parse(JSON.stringify(_this.list));
				let len = list.length;

				_this.setData({
					isTouch: false //关闭触摸
				}); //     if (list[2].style.zIndex >= (list[3].zIndex)) {

				if (list[3].style.left > list[3].left) {
					let newArr = [];

					for (let i = 0; i < len; i++) {
						let index = i; //当前将要变成哪一个坐标元素的位置

						if (i + 1 != len) {
							index = i + 1;
						} else {
							//最后一个元素到第一个元素的位置
							index = 0;
						}

						let current_option = list[i].option; // console.log('current_option',current_option);
						// console.log('list[i].option',list[i].option);

						let item = _this.listArr[index];
						item.option = current_option;
						item.backimage = list[i].backimage;
						item.abb_id = list[i].abb_id;
						item.show_name = list[i].show_name;
						item.f_title = list[i].f_title;
						newArr[index] = item;

						if (list[i].style.zIndex == 3) {
							this.setData({
								cname: list[i].show_name,
								ctitle: list[i].f_title
							});
						}
					}

					list = newArr;

					_this.setData({
						white_area: true,
						list
					});
				} else {
					// if ((list[4].style.zIndex) >= list[3].zIndex) {
					if (list[3].style.left < list[3].left) {
						let newArr = [];

						for (let i = 0; i < len; i++) {
							let index = i;

							if (i == 0) {
								index = len - 1;
							} else {
								index = i - 1;
							}

							let current_option = list[i].option; // console.log('current_option',current_option);
							// console.log('list[i].option',list[i].option);

							let item = _this.listArr[index];
							item.option = current_option;
							item.backimage = list[i].backimage;
							item.abb_id = list[i].abb_id;
							item.show_name = list[i].show_name;
							item.f_title = list[i].f_title;
							newArr[index] = item;

							if (list[i].style.zIndex == 3) {
								this.setData({
									cname: list[i].show_name,
									ctitle: list[i].f_title
								});
							}
						}

						list = newArr;

						_this.setData({
							white_area: true,
							list
						});
					} else {
						//移动的距离不够
						let newArr = [];

						for (let i = 0; i < len; i++) {
							let index = i; //当前将要变成哪一个坐标元素的位置

							let current_option = list[i].option; // console.log('current_option',current_option);
							// console.log('list[i].option',list[i].option);

							let item = _this.listArr[index];
							item.option = current_option;
							item.backimage = list[i].backimage;
							item.abb_id = list[i].abb_id;
							item.show_name = list[i].show_name;
							item.f_title = list[i].f_title;
							newArr[index] = item;

							if (list[i].style.zIndex == 3) {
								this.setData({
									cname: list[i].show_name,
									ctitle: list[i].f_title
								});
							}
						}

						list = newArr;

						_this.setData({
							white_area: true,
							list
						});
						/*    for (let i = 0; i < len; i++) {
                 list[i].style.left = list[i].left;
                 list[i].style.zIndex = list[i].zIndex;
                 list[i].style.transform = "scale(" + list[i].scale + ")";
                 list[i].style.opacity = (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0
          //    list[i].style.opacity =(3 - Math.abs(_this.data.indexArr[i])) * 0.3
           if(list[i].style.zIndex==3){
           this.setData({cname:list[i].show_name,ctitle:list[i].f_title})}
              }
             _this.setData({white_area:true,
                 list
             }) */
					}
				}

				if (this.list[3].zIndex != this.list[3].style.zIndex) {
					this.touchend(e);
				}
			},

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

			/*层叠轮播图初始化*/
			init: function(l) {
				let that = this;
				uni.getSystemInfo({
					success(res) {
						//获取屏幕的宽成功
						let arr = [];
						let len = that.cardNumber;
						let cardWidth = (res.screenWidth / 750) * 120;
						// #ifdef MP-ALIPAY
						cardWidth = (res.windowWidth / 750) * 120;
						// #endif
						that.setData({
							white_area_left: 3 * (cardWidth / 2) - 40
						});

						for (let i = 0; i < len; i++) {
							let item = {
								option: 0,
								//自定义选项
								left: i * (cardWidth / 2) - 40,
								// scale: (3 - Math.abs(_this.data.indexArr[i])) * 0.4,
								scale: (3 - Math.abs(that.indexArr[i])) * 0.1 + 0.7,
								zIndex: 3 - Math.abs(that.indexArr[i]),
								style: {
									left: i * (cardWidth / 2) - 40,
									transition: 0,
									zIndex: 3 - Math.abs(that.indexArr[i]),
									//  transform: "scale(" + ((3 - Math.abs(_this.data.indexArr[i])) * 0.4) + ")",
									transform: 'scale(' + ((3 - Math.abs(that.indexArr[i])) * 0.1 + 0.7) +
										')',
									//     opacity: (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0
									opacity: (3 - Math.abs(that.indexArr[i])) * 0.4
								},
								backimage: ''
							};
							item.option = i;
							arr.push(item);
						}

						for (var a = 0; a < 7; a++) {
							if (a <= 3) {
								if (a >= l.banner.list.length) {
									let i = 3 - (a - l.banner.list.length);
									arr[a + 3].backimage = l.banner.list[i].pic;
									arr[a + 3].abb_id = l.banner.list[i].abb_id;
									arr[a + 3].show_name = l.banner.list[i].show_name;
									arr[a + 3].f_title = l.banner.list[i].f_title;
								} else {
									arr[a + 3].backimage = l.banner.list[a].pic;
									arr[a + 3].abb_id = l.banner.list[a].abb_id;
									arr[a + 3].show_name = l.banner.list[a].show_name;
									arr[a + 3].f_title = l.banner.list[a].f_title;
								}
							}

							if (a > 3) {
								if (a >= l.banner.list.length) {
									let i = 3 - (a - l.banner.list.length);
									arr[a - 4].backimage = l.banner.list[i].pic;
									arr[a - 4].abb_id = l.banner.list[i].abb_id;
									arr[a - 4].show_name = l.banner.list[i].show_name;
									arr[a - 4].f_title = l.banner.list[i].f_title;
								} else {
									arr[a - 4].backimage = l.banner.list[a].pic;
									arr[a - 4].abb_id = l.banner.list[a].abb_id;
									arr[a - 4].show_name = l.banner.list[a].show_name;
									arr[a - 4].f_title = l.banner.list[a].f_title;
								}
							}
						}

						that.setData({
							screenWidth: res.screenWidth,
							cardWidth,
							list: arr,
							listArr: arr,
							cname: arr[3].show_name,
							ctitle: arr[3].f_title
						});
					}
				});
			}
		}
	};
</script>
<style>
	page {
		width: 100%;
		overflow: hidden;
	}

	.selection_cards {
		width: 100%;
		/* height: 400rpx;
  position: relative; */
		margin-top: 920rpx;
		margin-bottom: 80rpx;
		z-index: 99;
	}

	.selection_cards_item {
		/* width: 194rpx;
  height:350rpx; */
		width: 550rpx;
		height: 840rpx;
		background-size: 100%;
		/* overflow: hidden; */
		border-radius: 40rpx;
		position: absolute;
		top: 40rpx;
		color: white;
		font-size: 100rpx;
		box-sizing: border-box;
	}

	.bac {
		width: 550rpx;
		height: 840rpx;
		background-size: 100%;
		border-radius: 40rpx;
		position: absolute;
		top: 40rpx;
		color: white;
		background: #fff;
		box-sizing: border-box;
	}

	.white_area {
		width: 550rpx;
		position: absolute;
		top: 743rpx;
		border-radius: 0 0 40rpx 40rpx;
		background: #fff;
		height: 100rpx;
		z-index: 99;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
		color: #333333;
	}

	.white_area .title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.white_area .des {
		font-size: 28rpx;
	}

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

	.item {
		margin-bottom: 20rpx;
		background: #fff;
	}

	.item .line {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item .line ._title {
		display: flex;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		color: #181818;
	}

	.item .line ._title ._icon {
		width: 8rpx;
		height: 36rpx;
		background: #ff446b;
		border-radius: 4rpx;
		margin: 0 20rpx 0 0;
	}

	.item .more {
		font-size: 28rpx;
		color: #666666;
		vertical-align: middle;
	}

	.item .iconPic {
		width: 32rpx;
		height: 26rpx;
		vertical-align: middle;
	}

	.item .scroll-view_H {
		padding: 0 20rpx 30rpx 20rpx;
		width: 710rpx;
		background-color: #ffffff;
		white-space: nowrap;
	}

	.item .scroll-view_H .scroll-item {
		width: 200rpx;
		height: 200rpx;
		margin: 0 10rpx;
		border-radius: 16rpx;
	}
</style>
