<template>
	<view class="body">
		<mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" @init="mescrollInit" :up="upOption"
			:down="downOption">
			<view class="login_gray" v-if="!isLogin" @click="toUrlLogin"></view>
			<image class="my_bg" src="/static/my_bg.png" mode="widthFix"></image>
			<view class="my_con">
				<view class="my_box" :style="'margin-top:' + statusBarHeight + 'px'">
					<view class="my_head" :class="isIphoneX?'my_head2':''">
						<!-- <navigator hover-class="none" url="/pages/my/set/index">
                            <image class="set_img" src="/static/set.png" mode="widthFix"></image>
                        </navigator> -->
						<view class="my_head_box d_flex a_center" v-if="isLogin">
							<image class="img" :src="loginInfo.ImgUrl" mode="widthFix"></image>
							<view class="my_head_txt">
								<view class="my_head_name" v-text="loginInfo.TrueName"></view>
								<view class="my_head_job d_flex a_center">
									<image class="phone_icon.png" src="/static/phone_icon.png"></image>
									<view v-text="loginInfo.Phone"></view>
								</view>
							</view>
							<view class="sign_in" @click="showClick">签到</view>
						</view>
						<view class="my_head_box d_flex a_center" v-else>
							<image class="img" src="/static/header.png" mode="widthFix"></image>
							<view class="my_head_txt">
								<view class="my_head_name">登录</view>
								<view class="my_head_job d_flex a_center">登录获取更多信息</view>
							</view>
							<view class="sign_in" @click="showClick">签到</view>
						</view>
					</view>
					<view class="my_head_inner d_flex j_space_around a_center">
						<navigator hover-class="none" url="/pages/my/myReservation/index" class="my_head_nav">
							<image class="img img1" src="/static/reservation_icon.png" mode="widthFix"></image>
							<view class="my_head_nav_txt">我的预约</view>
						</navigator>
						<navigator hover-class="none" url="/pages/my/myCollect/index" class="my_head_nav">
							<image class="img img2" src="/static/collect_icon.png" mode="widthFix"></image>
							<view class="my_head_nav_txt">我的收藏</view>
						</navigator>
						<navigator hover-class="none" url="/pages/my/myComment/index" class="my_head_nav">
							<image class="img img3" src="/static/comment_icon.png" mode="widthFix"></image>
							<view class="my_head_nav_txt">我的评论</view>
						</navigator>
					</view>
					<!--                    <navigator hover-class="none" :url="'/pages/my/myActivity/index?tabIndex=' + tabIndex" class="i1_head family_heiti d_flex j_between a_center">
                        <view class="i1_head_left">报名活动</view>
                        <view class="i1_head_right d_flex a_center">
                            <view class="more_txt">查看更多</view>
                            <image class="more_arrow" src="/static/more_arrow.png"></image>
                        </view>
                    </navigator>
                    <view class="tab_con2 d_flex j_between a_center">
                        <view v-for="(item, index) in tabs" :key="index" v-text="item.title" class="tab_nav" :class="tabIndex == index ? 'on' : ''" @click="tabClick(index)"></view>
                    </view>
                    <view class="activity_list" v-if="items.length>0">
                        <navigator hover-class="none" :url="'/pages/activity/detail/index?id=' + item.cgid" class="activity_nav" v-for="(item, index) in items" :key="index">
                            <view class="activity_nav_img">
                                <image class="img" :src="item.imgurl"></image>
                                <image v-if="item.isActivity == 1" class="activity_icon" src="/static/activity_icon1.png"></image>
                                <image v-else class="activity_icon" src="/static/activity_icon2.png"></image>
                            </view>
                            <view class="activity_nav_content">
                                <view class="activity_nav_title two_hidden" v-text="item.cgname"></view>
                                <view class="activity_nav_subtitle text_hidden" v-text="item.content2"></view>
                                <view class="activity_nav_time" v-text="item.startDate + ' - ' + item.endDate"></view>
                                <view class="activity_nav_label d_flex" v-if="item.dyw.length>0">
                                    <view class="activity_nav_label_txt label2" v-for="(item2,index2) in item.dyw" :key="index2" v-text="item2" v-if="index2<3"></view>
                                </view>
                            </view>
                        </navigator>
                    </view>
                    <view class="no_data" v-else>
                    	<text class=""> ~ 暂无相关数据 ~ </text>
                    </view> -->
					<navigator hover-class="none"
						:url="'/pages/my/myReservation/index?tabIndex=' + tabIndex2 + '&tabIndex3=' + tabIndex3"
						class="i1_head family_heiti d_flex j_between a_center">
						<view class="i1_head_left">场馆预约</view>
						<view class="i1_head_right d_flex a_center">
							<view class="more_txt">查看更多</view>
							<image class="more_arrow" src="/static/more_arrow.png"></image>
						</view>
					</navigator>
					<view class="tab_con2 d_flex j_space_around a_center">
						<view v-for="(item, index) in tabs2" :key="index" v-text="item.title" class="tab_nav"
							:class="tabIndex2 == index ? 'on' : ''" @click="tabClick2(index)"></view>
					</view>
					<view v-show="tabIndex2==1" class="tab_con3 d_flex j_space_around a_center">
						<view v-for="(item, index) in tabs3" :key="index" v-text="item.title" class="tab_nav"
							:class="tabIndex3 == index ? 'on' : ''" @click="tabClick3(index)"></view>
					</view>
					<view class="changguan_list" v-if="items2.length>0">
						<navigator hover-class="none" :url="'/pages/changguan/detail/index?id=' + item.cgid"
							class="changguan_nav" v-for="(item, index) in items2" :key="index">
							<view class="changguan_inner">
								<view class="changguan_nav_img">
									<image class="img" :src="item.imgurl"></image>
								</view>
								<view class="changguan_nav_content">
									<view class="changguan_nav_title font_bold text_hidden" v-text="item.cgname"></view>
									<view class="changguan_nav_subtitle text_hidden" v-text="item.Author"></view>
									<view class="changguan_nav_label d_flex">
										<view v-for="(item2,index2) in item.Source" :key="index2"
											class="changguan_nav_label_txt"
											:class="[index2==0?'label1':'',index2==1?'label2':'',index2==2?'label3':'']"
											v-text="item2"></view>
									</view>
								</view>
							</view>
							<view class="changguan_time d_flex a_center">
								<image class="icon" src="/static/time_icon.png"></image>
								<view class="">预约时间：<text v-text="item.startDate + ' - ' + item.endDate"></text></view>
							</view>
						</navigator>
					</view>
					<view class="no_data" v-else>
						<text class="">~ 暂无相关数据 ~</text>
					</view>
				</view>
			</view>
			<view class="alert_con" v-if="isAlert">
				<view class="alert_content">
					<image class="qr_img" :src="qrImg"></image>
				</view>
				<image @click="closeClick" class="close_icon" src="/static/close_icon.png"></image>
			</view>
		</mescroll-uni>
		<tabBar :info="info"></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/html/tabBar.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin],
		components: {
			tabBar
		},
		data() {
			return {
				info: {
					ind: 2,
					scr: false
				},
				isLogin: false,
				mescroll: null,
				downOption: {
					use: true, //是否启用下拉刷新
					auto: false //是否自动加载
				},
				upOption: {
					use: false, //是否启用上拉加载更多
					auto: false //是否自动加载
				},
				tabIndex: 0,
				tabs: [{
						title: '审核中'
					},
					{
						title: '已入选'
					},
					{
						title: '未入选'
					}
				],
				tabIndex2: 0,
				tabs2: [{
						title: '个人'
					},
					{
						title: '团队'
					}
				],
				tabIndex3: 0,
				tabs3: [{
						title: '审核中'
					},
					{
						title: '已通过'
					},
					{
						title: '未通过'
					}
				],
				items: [],
				items2: [],
				loginInfo: {},
				qrImg: "",
				isAlert: false,
				isIphoneX: false
			};
		},
		onLoad(options) {
			let that = this;
			const system = uni.getSystemInfoSync();
			that.statusBarHeight = system.statusBarHeight + 5;
			console.log(system)
			if (system.model == "iPhone XR" || system.model == "iPhone X" || system.model == "iPhone XS") {
				that.isIphoneX = true;
			}
		},
		onReady() {},
		onShow() {
			if (this.$util.isLogin()) {
				this.loginInfo = this.$util.getLoginInfo();
				this.isLogin = true;
				this.getData();
				this.getChangGuan();
				this.getQr();
			} else {
				this.isLogin = false;
			}
		},
		methods: {
			showClick(index) {
				this.isAlert = true;
			},
			closeClick() {
				this.isAlert = false;
			},
			getQr() {
				let that = this;
				that.$doPost('Server.aspx', {
						mod: 'getQR'
					})
					.then(res => {
						if (res.data.resultcode != 0) {
							that.$util.showToast(res.data.msg);
							return;
						}
						let body = res.data.data;
						that.qrImg = body;
					})
					.catch(err => {
						console.log('request fail', err);
					});
			},
			toUrlLogin() {
				let url = '/pages/tab/my/index';
				url = encodeURIComponent(url);
				uni.navigateTo({
					url: '/pages/login/index?url=' + url
				});
			},
			tabClick(e) {
				this.tabIndex = e;
				this.getData();
			},
			tabClick2(e) {
				this.tabIndex2 = e;
				this.getChangGuan();
			},
			tabClick3(e) {
				this.tabIndex3 = e;
				this.getChangGuan();
			},
			getChangGuan() {
				let that = this;
				let mod = "getMyCG";
				let issh = "";
				if (that.tabIndex2 == 1) {
					mod = "getMyCGTeam";
					issh = that.tabIndex3;
				} else {
					mod = "getMyCG";
					issh = 1;
				}
				that.$doPost('Server.aspx', {
						mod: mod,
						page: 1,
						pagesize: 4,
						issh: issh
					})
					.then(res => {
						if (res.data.resultcode != 0) {
							that.$util.showToast(res.data.msg);
							return;
						}
						let body = res.data.data;
						body.filter(function(item, index) {
							item.imgurl = that.baseImgUrl + item.imgurl;
							item.startDate = that.$util.strDateFormat(item.startDate, "yyyy.MM.dd hh:mm");
							item.endDate = that.$util.strDateFormat(item.endDate, "hh:mm");
							if (item.Source) {
								item.Source = item.Source.split("|");
							}
						})
						that.items2 = body;
					})
					.catch(err => {
						that.$util.showToast('网络错误，稍后重试');
						console.log('request fail', err);
					});
			},
			getData() {
				let that = this;
				that.$doPost('Server.aspx', {
						mod: "getMyHD",
						page: 1,
						pagesize: 4,
						issh: that.tabIndex
					})
					.then(res => {
						if (res.data.resultcode != 0) {
							that.$util.showToast(res.data.msg);
							return;
						}
						let body = res.data.data;
						body.filter(function(item, index) {
							item.imgurl = that.baseImgUrl + item.imgurl;
							if (!item.dyw) {
								item.dyw = [];
							} else {
								item.dyw = item.dyw.split("|");
							}
							if (new Date() > that.$util.strDateFormat(item.endDate)) {
								item.isActivity = 0;
							} else {
								item.isActivity = 1;
							}
							item.startDate = that.$util.strDateFormat(item.startDate, "yyyy.MM.dd");
							item.endDate = that.$util.strDateFormat(item.endDate, "yyyy.MM.dd");

						})
						that.items = body;
					})
					.catch(err => {
						that.$util.showToast('网络错误，稍后重试');
						console.log('request fail', err);
					});
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				setTimeout(function() {
					mescroll.endSuccess(0);
				}, 600);
			}
		}
	};
</script>

<style lang="scss">
	page,
	.body {
		background: #fff;
	}

	.login_gray {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background: transparent;
	}

	.my_bg {
		width: 100vw;
		height: 54vw;
	}

	.my_con {
		position: absolute;
		width: 100%;
		z-index: 10;
		left: 0;
		top: 0;
	}

	.my_head {
		width: 100%;
		padding-top: 100upx;
	}

	.my_head2 {
		padding-top: 130upx;
	}

	.my_box {
		margin: 0 0 40upx 0;
		overflow: hidden;
		position: relative;
	}

	.my_box .set_img {
		width: 48upx;
		height: 48upx;
		position: absolute;
		top: 0;
		right: 0;
		padding: 30upx 20upx;
		z-index: 10;
	}

	.my_head_box {
		margin: 26upx 30upx 38upx 30upx;
		position: relative;
	}

	.my_head_box .img {
		width: 115upx;
		height: 115upx;
		box-sizing: border-box;
		border: 4upx solid #fff;
		border-radius: 50%;
	}

	.my_head_inner {
		margin: 40upx 30upx 30upx 30upx;
		height: 182upx;
		background: #fff;
		border-radius: 30upx;
		box-shadow: 0px 7px 13px 0px rgba(145, 93, 93, 0.2);
	}

	.my_head_inner .my_head_nav {
		font-size: 26upx;
		line-height: 28upx;
		color: #000000;
	}

	.my_head_inner .my_head_nav .img1 {
		width: 51upx;
		height: 48upx;
		margin: auto;
	}

	.my_head_inner .my_head_nav .img2 {
		width: 49upx;
		height: 49upx;
		margin: auto;
	}

	.my_head_inner .my_head_nav .img3 {
		width: 57upx;
		height: 49upx;
		margin: auto;
	}

	.my_head_inner .my_head_nav .my_head_nav_txt {
		white-space: nowrap;
		margin-top: 20upx;
	}

	.my_head .my_head_txt {
		color: #fff;
		margin-left: 16upx;
	}

	.my_head .my_head_name {
		font-size: 36upx;
		line-height: 26upx;
		padding-bottom: 16upx;
	}

	.my_head .my_head_job {
		font-size: 26upx;
		line-height: 28upx;
	}

	.my_head .phone_icon {
		width: 15upx;
		height: 24upx;
		margin-right: 8upx;
	}

	/*标题*/
	.i1_head {
		padding: 30upx 0 0 0;
		overflow: hidden;
		background: #fff;
		margin: 0 30upx;
	}

	.i1_head .i1_head_left {
		color: #000000;
		font-size: 36upx;
		padding-left: 14upx;
		position: relative;
	}

	.i1_head .i1_head_left::after {
		width: 8upx;
		height: 26upx;
		background: #ffb155;
		border-radius: 10upx;
		content: '';
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		position: absolute;
	}

	.i1_head .i1_head_right {
		font-size: 24upx;
		color: #888a87;
	}

	.i1_head .more_arrow {
		width: 12upx;
		height: 19upx;
		margin-left: 8upx;
	}

	/*tab*/
	.tab_con2 {
		margin: 20upx 30upx 0 30upx;
	}

	.tab_con2 .tab_nav {
		color: #999;
		font-size: 30upx;
		position: relative;
	}

	.tab_con2 .tab_nav::after {
		width: 40upx;
		height: 4upx;
		background: #fff;
		border-radius: 10upx;
		content: '';
		position: absolute;
		left: 50%;
		margin-left: -20upx;
		bottom: -10upx;
	}

	.tab_con2 .tab_nav.on::after {
		background: #ffb155;
	}

	.tab_con3 {
		margin: 36upx 30upx 0 30upx;
	}

	.tab_con3 .tab_nav {
		border: 1upx solid #e5e5e5;
		border-radius: 10upx;
		padding: 0 30upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		font-size: 28upx;
		color: #999;
	}

	.tab_con3 .tab_nav.on {
		border: 1upx solid #ffb155;
		background: #ffb155;
		color: #fff;
	}

	/*活动列表*/
	.activity_list {
		width: 100%;
		overflow: hidden;
	}

	.activity_nav {
		border-radius: 20upx;
		box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
		height: 224upx;
		margin: 0 30upx 50upx 30upx;
		position: relative;
		z-index: 10;
	}

	.activity_nav:first-child {
		margin-top: 50upx;
	}

	.activity_nav .activity_nav_img {
		width: 302upx;
		height: 100%;
		border-top-left-radius: 20upx;
		border-bottom-left-radius: 20upx;
		float: left;
		position: relative;
	}

	.activity_nav .activity_nav_img .img {
		width: 100%;
		height: 100%;
		border-top-left-radius: 20upx;
		border-bottom-left-radius: 20upx;
	}

	.activity_nav .activity_nav_img .activity_icon {
		position: absolute;
		width: 94upx;
		height: 42upx;
		left: 20upx;
		top: -20upx;
		z-index: 10;
	}

	.activity_nav .activity_nav_content {
		width: calc(100% - 338upx);
		margin-left: 20upx;
		float: left;
		padding-right: 16upx;
	}

	.activity_nav .activity_nav_title {
		font-size: 30upx;
		color: #3c3d3b;
		margin-top: 10upx;
		line-height: 40upx;
	}

	.activity_nav .activity_nav_subtitle {
		color: #767676;
		font-size: 24upx;
		margin-top: 8upx;
		margin-bottom: 8upx;
	}

	.activity_nav .activity_nav_time {
		color: #767676;
		font-size: 24upx;
	}

	.activity_nav .activity_nav_label {
		margin-top: 10upx;
	}

	.activity_nav .activity_nav_label_txt {
		padding: 0 10upx;
		height: 34upx;
		line-height: 34upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
		margin-right: 20upx;
	}

	.activity_nav .activity_nav_label_txt.label1 {
		background: #f27491;
		margin-right: 20upx;
	}

	.activity_nav .activity_nav_label_txt.label2 {
		background: #eaa24e;
	}

	.activity_nav .activity_nav_label_txt:last-child {
		margin-right: 0;
	}

	/*场馆列表*/
	.changguan_list {
		width: 100%;
		overflow: hidden;
	}

	.changguan_nav {
		margin: 0 30upx 50upx 30upx;
		position: relative;
		z-index: 10;
	}

	.changguan_nav .changguan_inner {
		width: 100%;
		overflow: hidden;
		border-radius: 20upx;
		box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
		height: 183upx;
	}

	.changguan_nav .changguan_time {
		font-size: 24upx;
		color: #999;
		padding-top: 30upx;
		padding-bottom: 14upx;
		border-bottom: 1upx solid #f4f2f2;
	}

	.changguan_nav .changguan_time .icon {
		width: 29upx;
		height: 30upx;
		margin-right: 10upx;
	}

	.changguan_nav:first-child {
		margin-top: 50upx;
	}

	.changguan_nav .changguan_nav_img {
		width: 302upx;
		height: 100%;
		border-top-left-radius: 20upx;
		border-bottom-left-radius: 20upx;
		float: left;
		position: relative;
	}

	.changguan_nav .changguan_nav_img .img {
		width: 100%;
		height: 100%;
		border-top-left-radius: 20upx;
		border-bottom-left-radius: 20upx;
	}

	.changguan_nav .changguan_nav_content {
		width: calc(100% - 338upx);
		margin-left: 20upx;
		float: left;
		padding-right: 16upx;
	}

	.changguan_nav .changguan_nav_title {
		font-size: 30upx;
		color: #3c3d3b;
		margin-top: 18upx;
		line-height: 40upx;
	}

	.changguan_nav .changguan_nav_subtitle {
		color: #767676;
		font-size: 24upx;
		margin-top: 18upx;
		margin-bottom: 18upx;
	}

	.changguan_nav .changguan_nav_label {}

	.changguan_nav .changguan_nav_label_txt {
		width: calc((100% - 40upx) / 3);
		height: 34upx;
		line-height: 34upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
	}

	.changguan_nav .changguan_nav_label_txt.label1 {
		background: #fdf6e5;
		color: #f4bd67;
		margin-right: 20upx;
	}

	.changguan_nav .changguan_nav_label_txt.label2 {
		background: #f2fcfe;
		color: #80a9f4;
		margin-right: 20upx;
	}

	.changguan_nav .changguan_nav_label_txt.label3 {
		background: #f3f5f8;
		color: #9f9d9d;
	}

	/*弹窗*/
	.alert_con {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1002;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
	}

	.alert_con .alert_content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.alert_con .alert_content .qr_img {
		width: 320upx;
		height: 320upx;
		border: 10upx solid #fff;
		box-sizing: border-box;
	}

	.alert_con .close_icon {
		width: 26upx;
		height: 27upx;
		padding: 20upx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		right: 40upx;
		top: 200upx;
		z-index: 1003;
	}

	.sign_in {
		position: absolute;
		width: 100upx;
		height: 52upx;
		border: 2upx solid #fff;
		color: #fff;
		text-align: center;
		line-height: 52upx;
		box-sizing: border-box;
		right: 30upx;
		top: 40upx;
		z-index: 10;
		font-size: 28upx;
	}
</style>
