<template>
	<view style="width: 100vw;height: 100vh;overflow: hidden;position: relative;">
		<view @click="goGuide" @touchmove.stop.prevent="guideMove" :style="{top:`${guideTop}px` }" class="guide flex ac jc">
			桩点指引
		</view>
		<view v-if="viewData" class="details_body flex column">
			<!-- 详情顶部 -->
			<view class="details_header">
				<view class="details_header_information flex ac">
					<view style="overflow: hidden;" class="oneflex">
						<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="stationItem_top_title">{{viewData.stationName}}</view>
						<view  style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="address">{{viewData.address}}</view>
						<view class=" stationItem_top_label_container  flex">
							<view v-for="(item,index) in  viewData['tags'] " :index='index'
								:style="{background:item.color}" class="stationItem_top_label">{{item.label}}</view>
						</view>
					</view>
					<view @click="navigation" class="stationItem_distance flex">
						<uni-icons style="margin-right: 10rpx;" type="paperplane-filled" color="#476ffa"
							size="15"></uni-icons>
						{{ tool.getnum(viewData.distance)}} KM
					</view>
				</view>
				<view class="details_header_label">
					<view v-for="(item,index) in ChargingStationLabels" :key="index"
						class="details_header_label_item flex ac">
						<image   mode="widthFix"   :src="item.logo"></image>
						<text class="oneflex">{{item.title}}</text>
					</view>
				</view>
			</view>
			<!-- 详情内容 -->
			<view class="details_center oneflex">
				<view class="details_center_title">充电桩</view>
				<view style="margin-bottom: 10rpx; align-items: flex-end;" class="flex ">
					<text class="oneflex">当前时段：{{viewData.currentTimeInterval}}</text>
					<text class="totalPrice">￥{{ tool.getnum(viewData.totalFee,3)}} /度</text>
					<text class="totalPrice_old">￥{{ tool.getnum(viewData.originalTotalFee,3)}} /度</text>
				</view>
				<view>
					<text>电费: <text class="blue">{{ tool.getnum(viewData.electricityFee,3) }}元/度</text> </text>
					<text style="margin-left: 41rpx;">服务费: <text class="blue">
							{{ tool.getnum(viewData.serviceFee,3)}}元/度</text></text>
				</view>
				<view class="details_center_label flex">
					<view @click="goChargingPorts('1')" class="details_center_label_item flex ac ">
						<view class="stationItem_bottom_label flex ac">
							<view class="stationItem_bottom_label_logo flex ac jc">快</view>
							<text>{{viewData.fastChargingIdleRatio}}</text>
						</view>
						<view class="flex ac">
							<text style="font-size: 22rpx;">详情</text>
							<uni-icons type="forward" color="#121836" size="15"></uni-icons>
						</view>
					</view>
					<view @click="goChargingPorts('2')" class="details_center_label_item flex ac ">
						<view class="stationItem_bottom_label flex ac">
							<view style="border-color: #36658DFF;color: #36658DFF;"
								class="stationItem_bottom_label_logo flex ac jc">慢</view>
							<text>{{viewData.slowChargingIdleRatio}}</text>
						</view>
						<view class="flex ac">
							<text style="font-size: 22rpx;">详情</text>
							<uni-icons type="forward" color="#121836" size="15"></uni-icons>
						</view>
					</view>
					<view @click="goChargingPorts('3')" class="details_center_label_item flex ac ">
						<view class="stationItem_bottom_label flex ac">
							<view style="border-color: #F67A22FF;color: #F67A22FF;"
								class="stationItem_bottom_label_logo flex ac jc">其他</view>
							<text>{{viewData.otherIdleRatio}}</text>
						</view>
						<view class="flex ac">
							<text style="font-size: 22rpx;">详情</text>
							<uni-icons type="forward" color="#121836" size="15"></uni-icons>
						</view>
					</view>
				</view>
				<view @click="goPeriodPrice" class="details_center_title" style="text-decoration: underline;">
					价格详情
				</view>
			</view>
			<!-- 底部内容 -->
			<view class="details_footer flex ac">
				<view class="flex oneflex  ">
					<view @click="collect" class="flex column ac">
						<image mode="heightFix" style="height: 45rpx;"
							:src="viewData.collected? '../../../static/scs.png':'../../../static/sc.png'"></image>
						<view class="label_text">收藏</view>
					</view>
					<view @click="freeTell" style="margin-left: 55rpx;" class="flex column ac">
						<image mode="heightFix" style="height: 45rpx;" src="../../../static/kf.png"></image>
						<view class="label_text">联系客服</view>
					</view>
				</view>
				<view @click="scanCode" class="details_footer_button flex ac jc ">扫码充电</view>
			</view>
		</view>
		<view v-else>
			<skeleton></skeleton>
		</view>
	</view>
</template>

<script>
	import station from '@/api/station.js'
	import skeleton from './skeleton.vue'
	export default {
		components: {
			skeleton
		},
		data() {
			return {
				user: uni.getStorageSync('user'),
				guideTop:120,
				viewData: null,
				ChargingStationLabels: [{
						logo: require('../../../static/w.png'),
						title: '60度/小时'
					}, {
						logo: require('../../../static/stop.png'),
						title: '24h内免费停车'
					},
					{
						logo: require('../../../static/24.png'),
						title: '24h营业'
					}
				]
			}
		},
		onLoad(e) { 
			if (e.data) {
				this.getDetails(JSON.parse(e.data))
			}
		},
		methods: {
			goGuide(){
				uni.navigateTo({
					url:`/ChargingStation/pages/guide/index?guideList=${ encodeURIComponent( JSON.stringify(this.viewData.guideList))}`
				})
			},
			guideMove(e){
				this.guideTop = e.touches[0].clientY
				// console.log(e.touches[0],'移动中')
			},
			navigation() { 
				this.tool.ReverseAddress(this.viewData.stationLat,this.viewData.stationLng).then(res=>{  
					let {address_component,formatted_addresses=null} = res.result;
					console.log(address_component,formatted_addresses,res,'address_component,formatted_addresses')
					uni.openLocation({
						scale:10,
						name:this.viewData.stationName,
						address:`${address_component.province}${address_component.city}${address_component.district}${formatted_addresses?.recommend||''}`,
						latitude: this.viewData.stationLat,
						longitude: this.viewData.stationLng,
						success: function() {
							console.log('success');
						}
					})
				}).catch(err=>{
					console.log(err,'address_component,formatted_addresses')
					uni.showToast({
						title:'导航地址获取失败',
						icon:'none'
					})
				})
				
			},
			collect() {
				const location = uni.getStorageSync('location');
				let {
					latitude = 39.90, longitude = 116.38
				} = location
				let {
					id,
					stationId
				} = this.viewData;
				station[this.viewData.collected ? 'cancelCollect' : 'collectStation']({
					xyStationId: id,
					stationId
				}).then(res => {
					console.log(res,'======collect')
					this.getDetails({
						id,
						stationLat: latitude,
						stationLng: longitude,
						tags: this.viewData['tags']
					})
				})
			},
			freeTell() {
				wx.makePhoneCall({
					phoneNumber: '4008565355', //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			getDetails(data) {
				station.getSiteDetails(data).then(res => {
					if (res.code == 20000) {
						this.viewData = res.data;
						this.viewData['tags'] = data['tags'];
						this.ChargingStationLabels[0].title = `${this.viewData.kilowattHour}/KW`;
						this.ChargingStationLabels[1].title = this.viewData.parkFee;
						this.ChargingStationLabels[2].title = this.viewData.businessHours;
					} else if (res.code == 42011) {
						uni.showToast({
							title: '登陆后可查看',
							icon: 'none',
							success() {
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							}
						})
					}
				})
			},
			async scanCode() {
				if(!this.user){ 
					uni.showModal({
						title: '提示',
						content: '登录后才可扫码下单哦',
						confirmText:'去登陆',
						success: function (res) {
							if (res.confirm) { 
								uni.reLaunch({
									url: '/pages/login/index'
								})
							} else if (res.cancel) { 
								// 取消
							}
						}
					});
					return 
				}
				let res = await this.tool.scanCode();
				if (res.result) {  
					let routingParameter =  this.tool.routingParameterGeneration({
						type:'qrCode',
						qrCode:encodeURIComponent(res.result),
						stationId:this.viewData.id,
					})
					uni.navigateTo({
						url: `/ChargingStation/pages/placeOrder/index${routingParameter}`
					})
				}
			},
			goPeriodPrice() { 
				uni.navigateTo({
					url: `/ChargingStation/pages/periodPrice/index?priceList=${JSON.stringify(this.viewData.priceList)}&now=${this.viewData.currentTimeInterval}`
				})
			},
			goChargingPorts(e) {
				uni.navigateTo({
					url: `/ChargingStation/pages/chargingPorts/index?equipmentType=${e}&id=${this.viewData.id}`
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
	@import '../../../components/stationItem/index.css';
</style>