<template>
	<view style="background: #F9FDFF;">
		<view class="main-inf">
			<view class="swiperBox">
				<u-swiper class="swiper" :height="210" :list="swiperData" :display-multiple-items="0"
					autoplay :circular="true" indicator indicatorMode="line" imgMode="scaleToFill"></u-swiper>
			
				<view class="station-no">NO.{{detaild_mean ? detaild_mean.id: ''}}</view>
			</view>
			<view class="station-box flex justify-between" style="position: relative;">
				<view>
					<view class="title margin-eight flex align-center">

						<view class="flex">
							<view class="details-status">{{handle_status()}}</view>
							<view>{{detaild_mean? detaild_mean.stationName:'--'}}</view>
						</view>
						<view class="posi_btn_add" v-if="is_version == '车队版' ">
							<button type="primary" class="btn_item" @click="handle_goaddform">新增预约单</button>
						</view>
					</view>
					<view class="text-sm address">
						<text>营业时间: {{detaild_mean? (detaild_mean.startTime + '-' + detaild_mean.endTime) :'--'}}</text>
					</view>
				</view>
			
			</view>
			<view class="station-box bat-soc-box">
				<view class="flex">
					<view class="bat-change">可换电池</view>
					<view class="bat-pic">{{swapBatTotal}}</view>
				</view>
				<view class="flex soc-box">
					<view class="bat-soc">
						<view class="bat-nine">{{hcBatTotal}}<text class="bat-unit">块</text></view>
						<view class="bat-capacity">90%以上</view>
					</view>
					<view class="bat-soc">
						<view class="bat-eight">{{mcBatTotal}}<text class="bat-unit">块</text></view>
						<view class="bat-capacity">80-90%</view>
					</view>
					<view class="bat-soc">
						<view class="bat-zero">{{lcBatTotal}}<text class="bat-unit">块</text></view>
						<view class="bat-capacity">0-80%</view>
					</view>
				</view>
			</view>
			
			<view class="station-box bat-soc-box">
				<view class="flex">
					<view class="bat-change">可充充电枪</view>
					<view class="bat-pic">{{swapBatTotal_charg}}</view>
				</view>
			</view>

			<!--  -->
			<view style="margin-top: 20rpx">
				<text class="title-name">换电收费标准:</text>
				<view class="station-box bat-soc-box" v-if="detaild_mean">
					<view class="color-font text-df margin-eight">
						<view class="view_content" style="margin-left: unset;">计费公式</view>
						<view class="view_content" style="margin-left: 20rpx;">{{detaild_mean.calculationFormula}}</view>
					</view>
				</view>
				<view class="station-box bat-soc-box" v-if="detaild_mean">
					<view class="color-font text-df margin-eight" v-for="(item,index) in detaild_mean.billList"
						:key="index">
						<view class="view_content" style="margin-left: unset;">计费规则: {{item.name}}</view>
						<view class="view_content" style="margin-left: 20rpx;">{{item.startTime}} - {{item.endTime}}
						</view>
						<view class="view_content">换电服务单价: - {{item.price / 100}} (元/度)</view>
						<view class="view_content">电池服务费: - {{item.batFee / 100}} (元)</view>
						<view class="view_content">平台服务费: - {{item.platformFee / 100}} (元)</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 20rpx">
				<text class="title-name">充电收费标准:</text>
				<view class="station-box bat-soc-box" v-if="detaild_mean">
					<view class="color-font text-df margin-eight" v-for="(item,index) in detaild_mean.outChargebillList"
						:key="index">
						<view class="view_content" style="margin-left: unset;">计费规则: {{item.name}}</view>
						<view class="view_content" style="margin-left: 20rpx;">{{item.startTime}} - {{item.endTime}}
						</view>
						<view class="view_content">充电服务单价: - {{item.price / 100}} (元/度)</view>
						<view class="view_content">电池服务费: - {{item.batFee / 100}} (元)</view>
						<view class="view_content">平台服务费: - {{item.platformFee / 100}} (元)</view>
					</view>
				</view>
			</view>
			<!-- <view class="goMap">2345</view> -->
			<view class="appointment">
				<view class="flex align-center">
					<view class="flex appoint-inf appoint-style" @click.stop="phone(detaild_mean.serviceTel)">
						<image class="appoint-image" src="../../../static/home/phone.svg"></image>
						<view>电话</view>
					</view>
					<view class="flex appoint-inf"
						@click.stop="goMap(detaild_mean.longitude,detaild_mean.latitude,detaild_mean.stationName,detaild_mean.stationLocation)">
						<image class="appoint-image" src="../../../static/home/planeImage.svg"></image>
						<view>导航</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	// console.log('========公用baseURL', config);
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const swiperData = ref([])

	const stationNo = ref()
	const distance = ref()
	const detailInf = reactive({
		showInf: []
	})

	const detaild_mean = ref()
	const distanceNum = ref()
	const price = ref()
	const batFee = ref()
	const platformFee = ref()
	const workTime = ref()
	const swapBatTotal = ref(0)
	const swapBatTotal_charg = ref(0)
	const hcBatTotal = ref(0)
	const mcBatTotal = ref(0)
	const lcBatTotal = ref(0)
	const hcBatTotal_charg = ref(0)
	const mcBatTotal_charg = ref(0)
	const lcBatTotal_charg = ref(0)
	const coverImg = ref()
	const stationName = ref()
	const stationLocation = ref()
	const stationNum = ref()
	const contactWay = ref()
	const show = ref(false)
	const valueDate = ref(false)
	const minute = ref([])
	const pickDay = ref()
	const orderShow = ref(false)
	const operationStatus = ref()
	const pickerRef = ref(null)
	const hoursList = ref(['00点', '01点', '02点', '03点', '04点', '05点', '06点', '07点', '08点', '09点', '10点', '11点', '12点',
		'13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点'
	])

	//判断立即预约的按钮
	const appointmentValue = ref(0)
	const cancelShow = ref(false)
	const appointmentId = ref()
	let appointmentFlagValue = ref('true')

	// 计算选中预约的时间
	const dayPick = ref()
	const currentTime = ref()
	const pickHours = ref()
	const pickMinutes = ref()
	const pickFutuerHours = ref()
	const orderTime = ref()

	const dateArray = ref([])
	const dateArrList = ref([])
	const settleType = ref()
	// 预约初始值
	const pickTimeValue = ref()
	const pickHoursInitial = ref()
	const pickMInuteInitial = ref()

	// to 后端
	let startToTime = ref()
	let endToTime = ref()


	const is_version = ref('个人版')
	onLoad((options) => {
		handle_detail(options)
		is_version.value = uni.getStorageSync("version")
	})
	onShow(() => {


	})

	const handle_goaddform = () => {
		uni.navigateTo({
			url: `/pages/order/appointorder/addform/addform?stationNo=${detaild_mean.value.stationNo}&swapBattertList=${JSON.stringify(detaild_mean.value.swapBattertList)}&stationName=${detaild_mean.value.stationName}`
		})
	}

	const handle_status = () => {
		if (detaild_mean.value) {
			switch (detaild_mean.value.status) {
				case 1:
					return '营业中';
				case 2:
					return '暂停营业';
				case 3:
					return '维护中';
				case 4:
					return '歇业中';
			}
		} else {
			return '暂停营业'
		}
	}

	const handle_detail = async (options) => {
		// console.log(options, '==========options');
		let distance = uni.getStorageSync("location")
		var station = JSON.parse(options.station);
		distanceNum.value = options.distance
		stationNo.value = station
		distance.value = station.distance
		appointmentId.value = options.appointmentId
		if (options.appointmentFlag) {
			appointmentFlagValue.value = options.appointmentFlag
		}
		// console.log(appointmentFlagValue.value, '==========appointmentFlagValue.value');
		await uni.$request({
			url: config.baseUrl + 'app-api/cloud/op/nearbyStationInfo/' + options.searchID
		}).then(res => {
			// detailInf.showInf = res.data.data
			detaild_mean.value = res.data.data
			swiperData.value = res.data.data.avatar
			// console.log(res, '===res===');
			let swapBatTotal_1 = 0
			let hcBatTotal_1 = 0
			let mcBatTotal_1 = 0
			let lcBatTotal_1 = 0
			for (var i = 0; i < detaild_mean.value.swapBattertList.length; i++) {
				let str = detaild_mean.value.swapBattertList[i]
				if (str.canSwapFlag == 1) {
					swapBatTotal_1++
				}
				if (str.soc > 0 && str.soc <= 80) {
					lcBatTotal_1++
				}
				if (str.soc > 80 && str.soc <= 90) {
					mcBatTotal_1++
				}
				if (str.soc > 90) {
					hcBatTotal_1++
				}
			}
			// console.log(swapBatTotal, 'swapBatTotal');
			// console.log(hcBatTotal, 'hcBatTotal');
			swapBatTotal.value = swapBatTotal_1
			hcBatTotal.value = hcBatTotal_1
			mcBatTotal.value = mcBatTotal_1
			lcBatTotal.value = lcBatTotal_1
			handle_dates_charg()
		})
	}
	const handle_dates_charg = () => {
		let array = detaild_mean.value.chargeList
		for(let item of array) {
			for(let item_son of item.chargeGunRespVOS) {
				if(item_son.chargeState == 0 || item_son.chargeState == 2) {
					swapBatTotal_charg.value++
				}
			}
		}
	}
	const phone = (val) => {
		// console.log(val, '=============');
		if (val == null) {
			uni.$u.toast('暂无联系方式')
			return
		}
		uni.makePhoneCall({
			phoneNumber: val //仅为示例
		});
	}
	const goMap = (longitude, latitude, name, address) => {
		uni.openLocation({
			latitude: Number(latitude),
			longitude: Number(longitude),
			name: name, //企业名称
			address: address, //详细地址
			success: function() {
				console.log('success');
			},
			fail: (err) => {
				console.log(err, 'err');
			}
		});
	}
</script>

<style lang="scss" scoped>
	.swiperBox {
		width: 100%;
		height: 420rpx;
		position: relative;
		// display: flex;
		// align-items: center;
	}

	.station-no {
		position: absolute;
		top: 0;
		left: 0;
		padding: 8rpx 32rpx;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
	}

	.station-box {
		padding: 32rpx;
		box-shadow: -2px 2px 8px 0px #7AA7D026;
		background-color: #fff;
	}

	.title {
		font-weight: 400;
		color: #333333;
		font-size: 36rpx;
	}

	.details-status {
		color: #fff;
		font-size: 24rpx;
		font-weight: 400;
		padding: 8rpx 16rpx;
		border-radius: 4px;
		margin-right: 8rpx;
		background: rgba(76, 145, 255, 1);
	}

	.address {
		color: #808080;
		position: relative;
		display: flex;
		align-items: center;
	}

	.address-image {
		width: 24rpx;
		height: 28rpx;
		margin-right: 16rpx;
	}

	.color-font {
		color: #333333;
	}

	.park {
		width: 28rpx;
		height: 29rpx;
		display: inline-block;
		background: url('/static/home/park.svg') no-repeat;
		background-size: 100% 100%;
	}

	.appointment {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #eee;
		padding: 16rpx 32rpx;
	}

	.app-btn {
		width: 330rpx;
		// height: 72rpx;
		// padding: 16rpx 0;

	}

	.appoint-image {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 4rpx;
	}

	.appoint-style {
		margin-right: 32rpx;
	}

	.appoint-inf {
		width: 72rpx;
		// justify-content: center;
		align-items: center;
		text-align: center;
		flex-direction: column;
		color: rgba(153, 153, 153, 1);
		font-size: 20rpx;
		font-weight: 400;
		letter-spacing: 1px;
	}

	.goMap {
		position: absolute;
		right: 0px;
	}

	.margin-eight {
		margin-bottom: 16rpx;
	}

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

	.title-name {
		color: #666666;
		font-size: 28rpx;
		font-weight: 400;
		margin: 40rpx 0 0 20rpx;
	}

	.view_content {
		color: #666666;
		font-size: 24rpx;
		font-weight: 400;
		margin: 8rpx 0 8rpx 40rpx;
	}

	.bat-soc-box {
		margin-top: 24rpx;
	}

	.bat-change {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;

	}

	.bat-pic {
		width: 64rpx;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0rpx 16rpx;
		border-radius: 0rpx 16rpx 0rpx 16rpx;
		background: linear-gradient(135deg, #A5C7FF 9.26%, #4C91FF 90.74%);
		text-align: center;
		color: #fff;
		margin-left: 8rpx
	}

	.bat-soc {
		width: 100%;
		border-right: 1px solid #CDCDCD;
		text-align: center;
	}

	.bat-soc:last-child {
		border: 0;
	}

	.bat-nine {
		color: #4C91FF;
		font-size: 40rpx;
		font-weight: 400;
	}

	.bat-unit {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-left: 8rpx;
	}

	.bat-capacity {
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;

	}

	.bat-eight {
		color: #FF7B0E;
		font-size: 40rpx;
		font-weight: 400;
	}

	.bat-zero {
		color: #00BBB7;
		font-size: 40rpx;
		font-weight: 400;
	}

	.soc-box {
		margin-top: 16rpx;
	}

	.main-inf {
		padding-bottom: 120rpx;
	}

	.price-spend {
		color: rgba(76, 145, 255, 1);

	}

	.model-inf {
		font-size: 28rpx;
		font-weight: 400;
		text-align: center;
		color: rgba(153, 153, 153, 1);


	}

	.time-right {
		margin-right: 50rpx;
	}

	// 
	.grid-price {
		font-family: PingFang SC;
		font-weight: 400;

		.grid-price-name {
			margin-bottom: 8rpx;
			color: #333333;
			font-size: 14px;
		}

		.grid-price-time {
			margin-bottom: 16rpx;
			color: #666666;
			font-size: 12px;
		}

		.grid-price-cost {
			color: #333333;
			font-size: 10px;

			.price-num {
				color: #4C91FF;
				font-size: 14px;
			}
		}
	}

	// 
	.replace-title {
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: 400;
		// line-height: 14px;
		color: #666666;
		margin-top: 8rpx;
		height: 34rpx;
		line-height: 34rpx;
	}

	.replace-unit-price {
		text-align: center;

		.replace-time {
			font-family: PingFang SC;
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;
			margin-bottom: 16rpx;
		}

		.replace-inf {
			font-family: PingFang SC;
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;
			margin-bottom: 8rpx;
			height: 34rpx;
			line-height: 34rpx;

			.replace-num {
				font-size: 24rpx;
			}

		}

	}

	//
	.replace-unit-reversal {
		display: flex;
		flex-direction: column-reverse;
	}

	.replace-inf:last-child {
		margin-bottom: 0;
	}

	.grid-price-pitch {
		background: linear-gradient(0deg, rgba(76, 145, 255, 0.1), rgba(76, 145, 255, 0.1)), linear-gradient(0deg, rgba(76, 145, 255, 0.1), rgba(76, 145, 255, 0.1));
		border-right: 1px solid #4C91FF;
		border-left: 1px solid #4C91FF;
	}

	.replace-unit-pitch {
		background: linear-gradient(0deg, rgba(76, 145, 255, 0.1), rgba(76, 145, 255, 0.1)), linear-gradient(0deg, rgba(76, 145, 255, 0.1), rgba(76, 145, 255, 0.1));
		border-right: 1px solid #4C91FF;
		border-left: 1px solid #4C91FF;
	}

	.posi_btn_add {

		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 30rpx;

		.btn_item {
			font-size: 24rpx;
		}

	}
</style>