<template>
	<view class="container">
		<customNavBar mode="home" :fixed="true" :placeholder="true" :safeAreaInsetTop="true"></customNavBar>
		<view class="" v-show="!isScan">
			<!-- 头部气瓶背景文字 -->
			<u-sticky>
				<bgAndNotice></bgAndNotice>
			</u-sticky>

			<!-- 线上订气 -->
			<view class="xsdqCardCss">
				<view class="leftTopIconCss" @click="goToScan">
					<u-image src="@/static/images/gas-icon/gasicon.png" width="30px" height="30px"></u-image>
				</view>
				<view class="xsdqContentCss">
					<view class="text-black text-lg">
						线上订气更快捷、更安全
					</view>
					<view class="dqTimeCss" v-if="hasLogin">
						预计下次订气时间：{{ $formatTime(nextDqsjTime,'YYYY年MM月DD号') || ""}}
					</view>
					<view class="dqBtnCss w100 flex justify-between" :style="{'marginTop':hasLogin?'0px':'30px'}">
						<view class="" style="width: 45%;">
							<u-button color="#2666FE" shape="circle" @click="getPhone">
								<u-image src="@/static/images/home/phone-white.png" width="20px" height="20px"
									v-if="hasLogin"></u-image>
								<view class="text-lg margin-left-sm">
									电话订气
								</view>
							</u-button>
						</view>
						<view class="" style="width: 45%;">
							<u-button color="#EE651F" shape="circle" @click="goBuyGas">
								<u-image src="@/static/images/home/bag.png" width="20px" height="20px"
									v-if="hasLogin"></u-image>
								<view class="text-lg margin-left-sm">
									{{hasLogin?'线上订气':'去订气'}}
								</view>
							</u-button>
						</view>
					</view>
				</view>
			</view>
			<!-- 维修&气瓶查询 -->
			<view class="wxOrqpcxContentCss">
				<view class="wxCardCss" @click="goToRepairReportPage">
					<view class="text-lg">
						维修/报修
					</view>
					<view class="text-grey">
						选择预约、上门
					</view>
					<view class="toolIconCss">
						<u-image src="@/static/images/home/repair.png" width="50px" height="50px"
							shape="circle"></u-image>
					</view>
				</view>
				<view class="wxCardCss" @click="openScan">
					<view class="text-lg">
						气瓶查询
					</view>
					<view class="text-grey">
						气瓶溯源、跟踪
					</view>
					<view class="toolIconCss">
						<u-image src="@/static/images/home/scan.png" width="50px" height="50px"
							shape="circle"></u-image>
					</view>
				</view>
			</view>

			<!-- 气瓶详情(可左右切换轮播) -->
			<view class="qpDetailCss">
				<gasSwiper></gasSwiper>
			</view>

			<!-- 使用常识 -->
			<view class="commonSenseCss">
				<useCommonSense></useCommonSense>
			</view>
		</view>
		<u-popup :show="phoneShow" mode="center" @close="phoneClose" :round="10" :customStyle="{width:'90%'}">
			<view class="phonePopCss">
				<view class="flex justify-end themeColor" @click="goToOtherGas">
					其他气站电话
				</view>
				<view class="flex flex-direction">
					<view class="text-xl text-bold">
						当前拨打电话
					</view>
					<view class="margin-top">
						{{this.callPhone || ""}}
					</view>
					<view class="flex justify-end margin-top-lg margin-bottom-sm">
						<view class="margin-lr-sm" @click="phoneClose">
							<u-button :customStyle="{height:'30px'}">取消</u-button>
						</view>
						<view>
							<u-button color="#EE651F" :customStyle="{height:'30px'}" @click="hanldeCall">呼叫</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<ScanCode ref="scanCode" v-show="isScan" @scanCode="getCode" @close="closeScanWindow"></ScanCode>
		<!-- app不支持$route -->
		<!-- <TabBar :currentPagePath="this.$route.meta.pagePath"></TabBar> -->
		<TabBar :currentPagePath="'pages/home/home'"></TabBar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import bgAndNotice from '@/components/bgAndNotice/bgAndNotice.vue'
	import gasSwiper from './components/gasSwiper/gasSwiper.vue'
	import customNavBar from '@/components/customNavBar/customNavBar.vue'
	import useCommonSense from '@/components/useCommonSense/useCommonSense.vue'
	export default {
		components: {
			customNavBar,
			gasSwiper,
			bgAndNotice
		},
		data() {
			return {
				hasLogin: this.$auth.getToken(),
				current: 0,
				isScan: false,
				nextDqsjTime: "",
				phoneShow: false,
				callPhone: "",
			}
		},
		computed: {
			...mapGetters({
				adsName: 'adsName',
				adsId: 'adsId'
			})
		},
		onLoad() {
			console.log("home");
			if (this.hasLogin) {
				this.getdqsj();
			}
		},
		onShow() {
			this.$store.dispatch('GetInfo');
			this.$store.dispatch('GetDefaultAds').then(res => {
				console.log("有默认地址", res);
			}).catch(e => {
				console.log("无默认地址", e);
				if (!this.adsId) { //接口没有默认地址且左上角未选择地址则采用定位选择
					this.getLocaltion();
				}
			});
			this.isScan = false;
		},
		methods: {
			getLocaltion() {
				console.log("获取定位===========>");
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					timeout: 6,
					isHighAccuracy:true,
					// geocode: true,
					success: async (res) => {
						console.log("方式1,无地址定位获取", res);
						// let address = res.address;
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						// console.log("App直接返回地址", address);
						// // #ifdef APP
						// let appData = {
						// 	adsId: "",
						// 	adsJd: res.longitude,
						// 	adsWd: res.latitude,
						// 	adsName: address.city
						// }
						// that.$store.dispatch('GetDefaultAds', appData)
						// // #endif

						let result = await this.$loadCity(res.longitude, res.latitude);
						console.log("h5逆地址", result);
						let H5data = {
							adsId: "",
							adsJd: res.longitude,
							adsWd: res.latitude,
							adsName: result.city
						}
						that.$store.dispatch('GetDefaultAds', H5data)
					},
					fail(e) {
						console.log(e);
						uni.$u.toast('定位失败');
					}
				});
				// const timer = setTimeout(() => {
				// 	uni.$u.toast('定位失败');
				// 	clearTimeout(timer)
				// }, 6000)
			},
			async getDcit() {
				let query = [{
					key: 'NAME_',
					value: '订单类型'
				}]
				console.log(query);
				let queryJson = JSON.stringify(query);
				console.log(queryJson);
				const result = await this.$api.dictApi.getDict(query);
				console.log("字典数据", result);
			},
			async getdqsj() {
				const result = await this.$api.loginApi.getUserInfo({yhlx:'hy'});
				let {
					code,
					value
				} = result;
				this.nextDqsjTime = code == 200 ? value.stats.xcdqsj : null;
			},
			goToScan() {
				// uni.navigateTo({
				// 	url: '/pages/scan/scanCode'
				// })
			},
			goBuyGas() {
				uni.navigateTo({
					url: '/pages/home/storeList'
				})
			},
			phoneOpen() {

			},
			phoneClose() {
				this.phoneShow = false
			},
			hanldeCall() {
				uni.makePhoneCall({
					phoneNumber: this.callPhone, // 电话号码
					success: function() {
						console.log('拨号成功');
					},
					fail: function(err) {
						console.log('拨号失败：', err);
					}
				})
			},
			goToOtherGas() {
				uni.navigateTo({
					url: "/pages/home/otherGasStationsPhone"
				})
			},
			async getPhone() {
				// 经纬度获取联系电话
				let fJd = this.$store.state.user.adsJd;
				let fWd = this.$store.state.user.adsWd;
				if (!fJd || !fWd) {
					uni.$u.toast('定位出错');
					return;
				}
				let query = {
					page: 1,
					size: 10,
					jd: fJd,
					wd: fWd
				}
				let result = await this.$api.memberApi.getCzPage(query);
				let {
					code,
					value
				} = result;
				if (code === 200) {
					let records = value.records;
					if (!records.length) {
						uni.$u.toast('未查询到相关气站');
						return;
					}
					this.callPhone = records[0].qzdh;
					this.phoneShow = true;
					// this.$modal.confirm(this.callPhone, '呼叫号码', {
					// 	confirmText: "呼叫"
					// }).then(() => {
					// 	uni.makePhoneCall({
					// 		phoneNumber: this.callPhone, // 电话号码
					// 		success: function() {
					// 			console.log('拨号成功');
					// 		},
					// 		fail: function(err) {
					// 			console.log('拨号失败：', err);
					// 		}
					// 	});
					// }).catch(() => {
					// 	console.log("取消");
					// });
				}
			},
			goToRepairReportPage() {
				uni.navigateTo({
					url: '/pages/home/repairReport'
				})
			},
			openScan() {
				// 组件模式打开
				// this.isScan = true;
				// this.$refs.scanCode.open();
				uni.navigateTo({
					url: "/pages/scan/scanCode"
				})
			},
			async getCode(code) {
				let query = {
					qptm: code
				}
				const result = await this.$api.gasApi.getDetailByQuery(query);
				let {
					state,
					message
				} = result;
				if (!state) {
					uni.$u.toast(message)
					return;
				}
				uni.navigateTo({
					url: '/pages/mine/appList/gasInformation/gasInformation?qptm=' + code
				})
			},
			closeScanWindow() {
				console.log("触发关闭");
				this.isScan = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 线上订气
	.xsdqCardCss {
		position: relative;
		margin: 10px;
		background: #fff;
		border-radius: 10px;

		.leftTopIconCss {
			position: absolute;
			top: 10px;
			left: 10px;
		}

		.xsdqContentCss {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 20px;

			.dqTimeCss {
				margin: 20px 10px;
				font-size: 16px;
				display: flex;
				justify-content: center;
				background: #fff;
				color: #EA5604;
				padding: 5px 30px;
				border-radius: 15px;
				box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
			}
		}

		.dqBtnCss {
			// width: 250px;
			padding: 0 15px;
			margin-bottom: 20px;
		}
	}

	// 维修&气瓶查询
	.wxOrqpcxContentCss {
		display: flex;
		justify-content: space-between;
		margin: 10px;

		.wxCardCss {
			background: #fff;
			width: 48%;
			height: 100px;
			padding: 10px;
			border-radius: 15px;
			position: relative;
		}

		.toolIconCss {
			position: absolute;
			bottom: 0;
			right: 0;
			margin: 5px;
		}
	}

	// 气瓶详情
	.qpDetailCss {
		margin: 10px;
	}

	// 使用常识
	.commonSenseCss {
		margin: 10px;
		border-radius: 15px;
		background: #ffffff;
		// padding-bottom: 50px
	}

	.phonePopCss {
		width: 100%;
		padding: 20px 20px 10px 20px;
	}
</style>