+<template>
	<view class="content">
		<view class="header">
			<image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
			<view class="info-block">
				<view class="box-pack-between ft32 item flex-y-center flex-grow-1" style="margin: 0;">
					<text>{{info.nick_name}}</text>
					<view class="ft24 item-off flex">
						<view class="flex-grow-1 flex-center" @click="bindcheck" :data-index="index" v-for="(item,index) of switch_list"
						 :key="index" :class="index==act_index?'act':''">{{item.name}}</view>
					</view>
				</view>

				<view class="flex-center item-content">
					<view class="flex-grow-1 ">
						<view class="ft38 mab-24">
							{{!info.scanned?0:info.scanned}} <text class="ft24">次</text>
						</view>
						<view class="ft24">
							剩余换量次数
							<!-- <image class="wen" src="../../static/images/wen.png" mode=""></image> -->
						</view>
					</view>
					<view class="line"></view>
					<view class="flex-grow-1">
						<view class="ft38 mab-24">
							{{!info.success?0:info.success}} <text class="ft24">次</text>
						</view>
						<view class="ft24">
							成功换量次数
							<!-- <image class="wen" src="../../static/images/wen.png" mode=""></image> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="main-home">
				<!-- <form @submit="Submit"> -->
				<view class="">
					<view class="box-pack-between ft32 main-item">
						<view>换量规则
							<!-- <image class="wen" src="../../static/images/wen1.png" mode=""></image> -->
						</view>
						<view @click="rule" class="flex-center add-home ft24">
							设置
						</view>
					</view>
					<view class="item-bg" v-if="open_time.length>0">
						<view v-for="(item,index) of open_time" :key="index" class="item-bg-time">
							<view class="flex-center">
								{{item}}
							</view>
						</view>
					</view>
				</view>

				<view class="">
					<view class="box-pack-between ft32 main-item">
						<view>换量记录池</view>
						<view class="flex-center add-home ft24" @click="addEnable">
							添加
						</view>
					</view>
				</view>

				<no-none v-if='list_add.length<=0'></no-none>

				<view class="item-bg" v-for="(item,index) in list_add" :data-index='index' :key="item.id" v-if="list_add.length>0">
					<view class="item flex-row box-pack-between">
						<view class="flex-grow-1 flex-y-center">
							<image src="../../static/images/icon_game.png" mode="aspectFit" class="type-img" v-if="item.type == 7"></image>
							<image src="../../static/images/icon_6.png" mode="aspectFit" class="type-img" v-if="item.type == 4"></image>
							<image src="../../static/images/icon_5.png" mode="aspectFit" class="type-img" v-if="item.type == 3"></image>
							<image src="../../static/images/icon_2.png" mode="aspectFit" class="type-img" v-if="item.type == 2"></image>
							<image src="../../static/images/icon_4.png" mode="aspectFit" class="type-img" v-if="item.type == 1"></image>
							<image src="../../static/images/icon_7.png" mode="aspectFit" class="type-img" v-if="item.type == 6"></image>
							<view class="info">
								<view class="title text-1" v-if="item.mid_title">{{item.mid_title}}</view>
								<view class="title text-1" v-if="item.description">{{item.description}}</view>
								<view class="title text-1" v-if="item.create_time">{{item.create_time}}</view>
							</view>
						</view>
						<image class="del" :data-index="index" :data-id="item.id" @click="del" src="../../static/images/del.png" mode=""></image>
					</view>
				</view>

				<view class="box-pack-between">
					<view class="box-pack-between ft32 main-item">
						<view>加入区域换量</view>
					</view>
					<view class="flex-center ft24">
						<switch :checked="is_area_exchange=='Y'?true:false" @change="switch1" style="transform:scale(0.7)" />
					</view>
				</view>

				<view  @click="chooseLocation" class="item-bg box-pack-between" v-if="is_area_exchange=='Y'?true:false">
					<view class="flex-center">
						<image class="maps" src="../../static/images/map.png" mode=""></image>
						<text>{{address_data}}</text>
					</view>
					<view class="flex-center coh ft28 item-bg-right" >
						<view class="iconfont iconzhongxindingwei" :class="route?'rotate':''"></view>
						重新定位
					</view>
				</view>

			</view>
		</view>

		<!-- </form> -->
		<block v-if="is_auth">
			<view class="model"></view>
			<view class="model flex-center">
				<view class="model_cotent">
					<view class="model_cotent_title">提示</view>
					<view class="model_cotent_qd">需要您授权打开地理位置</view>
					<button class="model_cotent_shezhi" @click="openSetting">去设置</button>
				</view>
			</view>
		</block>
	</view>
	<!--</view>
	</view> -->
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	export default {
		data() {
			return {
				info: {},
				switch_list: [{
					name: "开启换量"
				}, {
					name: "关闭换量"
				}, ],
				act_index: 0,
				open_time: [],
				list_add: [],
				// address_map: {
				// 	province:"",
				// 	city:"",
				// 	district:"",
				// },
				address_data: "",
				latitude: "",
				longitude: "",
				is_area_exchange: "",
				route: false,
				is_auth: false,
				// longitude: "113.269043",
				// latitude: "23.110049",
			}
		},

		onLoad(e) {
			
		},
		
		onShow() {
			this.ExchangePool();
			this.getExchange();
		},

		methods: {

			nav(e) {
				uni.navigateTo({
					url: "form"
				})
			},

			chooseLocation(e) {
				// #ifdef MP-WEIXIN 
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						this.address_data = res.address;
						this.ExchangeJoinArea();
					}
				});
					// #endif
				// #ifdef H5
				uni.navigateTo({
					url:"./iframe"
				})
				// #endif
			},

			getLocation(e) {
				this.route = true;
				setTimeout(() => {
					this.route = false;
				}, 1500)
				// #ifdef H5
				getWXSign().then(res => {
					console.log('wx_getLocation');
					this.$wx.getLocation({
						type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: (res) => {
							console.log('wx_getLocation', res);
							this.location(res.latitude, res.longitude);
							this.latitude = res.latitude;
							this.longitude = res.longitude;
							this.is_auth = false;
						},
						fail: (err) => {
							console.log(err, "err")
							// this.getauth(err);
							if (err.errMsg === "getLocation:fail auth deny" ||
								err.errMsg === "getLocation:fail auth deny" || err.errMsg ===
								"getLocation:fail authorize no response") {
								// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
								this.is_auth = true;
							}
						}
					});
				})
				// #endif
				// #ifdef MP-WEIXIN 
				uni.getLocation({
					type: 'gcj02 ',
					success: (res) => {
						console.log('getLocation', res);
						this.location(res.latitude, res.longitude);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.is_auth = false;
					},
					fail: (err) => {
						console.log(err, "err")
						// this.getauth(err);
						if (err.errMsg === "getLocation:fail auth deny" ||
							err.errMsg === "getLocation:fail auth deny" || err.errMsg ===
							"getLocation:fail authorize no response") {
							// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
							this.is_auth = true;
						}
					}
				});
				// #endif
			},

			openSetting(e) {
				uni.openSetting({
					success(settingdata) {
						console.log("settingdata", settingdata)
						if (settingdata.authSetting['scope.userLocation']) {} else {
							uni.showModal({
								title: '提示',
								content: '获取权限失败，将无法进定位哦~',
								showCancel: false,
							})
						}
					},
					fail(failData) {
						console.log("failData", failData)
					},
					complete(finishData) {
						console.log("finishData", finishData)
					}
				})
			},

			switch1(e) {
				this.is_area_exchange = e.detail.value ? 'Y' : 'N',
				this.ExchangeJoinArea();
			},

			ExchangeJoinArea(e) {
				this.request({
					url: "exchange/ExchangeJoinArea",
					data: {
						token: uni.getStorageSync("token"),
						is_area_exchange: this.is_area_exchange,
						longitude: this.longitude,
						latitude: this.latitude,
						address:this.address_data,
					},
				}).then(res => {
					if (res.code === '200' && res.message == '加入成功') {
						// if(this.is_area_exchange=="Y"x){
						this.is_area_exchange = "Y";
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						// }
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.is_area_exchange = "N";
					}
				}).catch((res) => {
					console.log(res, "res")
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.is_area_exchange = "N";
				})
			},

			// 坐标解析
			location(latitude, longitude) {
				let appkey = 'SOUBZ-3EQWO-FVRWG-SFXV2-O3WYO-VJBMP';
				// #ifdef H5
				console.log('location_locationObj');
				let locationObj = latitude + "," + longitude;
				let url = 'https://apis.map.qq.com/ws/geocoder/v1?get_poi=1&output=jsonp';
				this.$jsonp(url, {
					key: appkey,
					location: locationObj
				}).then(res => {
					// let address_component = res.result.address;
					this.address_data =res.result.address;
					 // address_component.province + address_component.city + address_component.district;
				}).catch(err => {
					console.log(err, "appkey")
				})
				// #endif	
				// #ifdef APP-PLUS||MP-WEIXIN
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' + appkey,
					data: {},
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						this.address_data  = res.data.result.address;
						// this.address_data = address_component.province + address_component.city + address_component.district;
					},
				})
				// #endif
			},

			addEnable(e) {
				this.request({
					url: "user/funeng_list",
					data: {
						page: this.page,
						token: uni.getStorageSync("token"),
						type:1,
					},
					showLoading: true,
				}).then(res => {
					if (res.code === '200' && res.data.length > 0) {
						uni.navigateTo({
							url: "./record?type=1"
						})
					} else {
						uni.showToast({
							title: "没有记录",
							icon: 'none'
						})
					}
				})
			},

			rule(e) {
				var arr = JSON.stringify(this.arr)
				uni.navigateTo({
					url: "./rule?arr=" + arr + "&id=" + this.info.id
				})
			},

			getExchange() {
				this.request({
					url: "funeng/getExchange",
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {

						this.info = res.data;

						this.arr = res.data.open_time;

						this.open_time = res.data.open_time;

						this.is_area_exchange = res.data.is_area_exchange;

						this.act_index = res.data.is_exchange == "Y" ? 0 : 1;

						this.latitude=res.data.latitude;
						this.longitude= res.data.longitude;
						this.address_data=res.data.address;
						
						if(!res.data.latitude&&!res.data.longitude&&!res.data.address){
							this.getLocation();
						}
						
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			ExchangePool() {
				this.request({
					url: "funeng/ExchangePool",
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.list_add = res.data
					}
				}).catch((res) => {

				});
			},

			bindcheck(e) {
				var index = e.currentTarget.dataset.index;
				this.act_index = index;
				this.request({
					url: "funeng/trunExchange",
					data: {
						status: index == 1 ? 'N' : 'Y',
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			del(e) {
				let id = e.currentTarget.dataset.id,
					index = e.currentTarget.dataset.index;
				uni.showModal({
					title: '提示',
					content: '确定要删除此记录吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.request({
								url: "funeng/delExchangePool",
								data: {
									token: uni.getStorageSync("token"),
									power_id: id,
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code === '200') {
									this.list_add.splice(index, 1)
									uni.showToast({
										title: "删除成功",
										icon: 'none'
									})
								}
							}).catch((res) => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		},
	}
</script>
<style>
	.item-bg-right {
		min-width: 207rpx;
	}

	.coh .rotate {
		transition: all 1.2s ease-out 0s;
		transform: rotate(360deg);
	}

	.info-block {
		width: 670rpx;
		margin: 0 auto;
	}

	.info-block .item {
		padding: 30rpx 0 70rpx 0;
	}

	.item-off {
		width: 252rpx;
		height: 54rpx;
		border-radius: 8rpx;
		color: #ffff;
		border: 2rpx solid #3387ff;
		background: rgba(255, 255, 255, 0.2);
	}

	.item-off .act {
		background: #fff;
		color: #3387ff;
		border-radius: 8rpx;
	}

	.item-content {
		text-align: center;
	}

	.header {
		width: 100%;
		height: 324rpx;
		position: relative;
	}

	.header .bg-img {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 324rpx;

	}

	.header .info-block {
		/* padding: 0 40rpx 0 48rpx; */
		height: 198rpx;
		color: #FFFFFF;
	}

	.header .info-block .title {
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
		line-height: 50rpx;
	}

	.header .info-block .desc {
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
		line-height: 40rpx;
		margin-top: 8rpx;
	}

	.line {
		width: 2rpx;
		height: 46rpx;
		opacity: 0.5;
		background: #ffffff;
	}

	.mab-24 {
		margin-bottom: 24rpx;
	}

	.wen {
		width: 22rpx;
		height: 22rpx;
		margin-left: 8rpx;
	}

	.main-home {
		width: 670rpx;
		margin: 0 auto;
	}

	.main-item {
		margin: 20rpx 0 32rpx 0;
	}

	.add-home {
		color: #FFFFFF;
		width: 126rpx;
		height: 54rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
	}

	.item-bg .mar64:last-child {
		margin-bottom: 0rpx;
	}

	.item-bg {
		width: 670rpx;
		background: #f6f8fe;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding: 36rpx 32rpx;
		margin-bottom: 20rpx;
	}

	.item-bg-time {
		width: 180rpx;
		height: 66rpx;
		background: #ffffff;
		border-radius: 8rpx;
		display: inline-block;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.item {
		margin: 20rpx 0;
	}

	.info {
		width: 501rpx;
	}

	.item-bg .item-bg-time:nth-child(3n) {
		margin-right: 0rpx;
	}

	.item-bg-time .flex-center {
		height: 100%;
	}

	.type-img {
		display: block;
		flex: none;
		width: 40rpx;
		height: 40rpx;
		margin-right: 26rpx;
	}

	.del {
		width: 32rpx;
		height: 32rpx;
	}

	.maps {
		min-width: 31rpx;
		width: 31rpx;
		height: 31rpx;
		margin-right: 10rpx;
	}

	.iconzhongxindingwei {
		margin-right: 10rpx;
	}


	.model {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.model_cotent {
		width: 600rpx;
		/* height: 300rpx; */
		text-align: center;
		border-radius: 16rpx;
		background: #fff;
	}

	.model_cotent_title {
		font-size: 34rpx;
		font-weight: 700;
		margin: 40rpx 0 40rpx 0;
	}

	.model_cotent_qd {
		font-size: 30rpx;
		padding-bottom: 65rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.model_cotent_shezhi {
		margin: 0;
		font-weight: 700;
		font-size: 30rpx;
		color: #4e6ef2;
		padding: 15rpx 0;
		background-color: #fff;
		border-radius: none;
		border: none;
	}
</style>
