<template>
	<view class="content">
		<view class="cu-bar search topNav" :style="{'padding-top':padTop+'px'}">

			<view class="">

			</view>
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input class="searchPoint" type="text" v-model="search_value" label-width="200" :placeholder="$t('index.Search_appointment_history')"
					confirm-type="search"  />
			</view>

		</view>
		<!-- 轮播图部分 -->
		<view class="swiperCard" v-if="swiperData.swiperList.length!=0">
			<view class="navStyle">
				<u-swiper class="swiper" :radius="8" :height="150" :list="swiperData.swiperList"
					:display-multiple-items="0" autoplay :circular="true" indicator indicatorMode="line"
					imgMode="scaleToFill" bgColor="rgba(255,255,255,0)"></u-swiper>
			</view>
		</view>

		<view class="section">
			<!--  -->
			<view class="card-nav">
				<view class="bg-white navStyle shadow-warp">
					<view class="flex">

						<view class="flex-sub panel bg-white radius text-center align-center column" @click="subscribe">
							<view class='subscribeImg'>
								<!-- <view class="cu-tag badge">{{recordNum}}</view> -->
							</view>

							<text>{{$t('index.Go_appointment')}}</text>
								<!-- alt+鼠标单击跳转/悬浮查看中文 -->
						</view>
					</view>
				</view>
			</view>


			<view v-if="noneShow" class="none-box">
				<image class="image-none" src="../../static/home/nothing.png" :alt="$t('index.change_station_present')" mode='scaleToFill' />
			</view>
			<view v-if="!noneShow">
				<view class="cu-card" v-for="(item,index) in homeData.stationList" :key='item.id'>
					<view class="cu-item shadow">
						<view class="flex card-box flex-wrap">
							<!-- <view class="flex"> -->
							<view class="stateImg">
								<image src="../../static/home/nullImgXs.svg" class="titleImg" mode="scaleToFill"
									style="width: 100%;height: 100%;">
									<view class="cu-tag badge">{{ item.status == 1 ? $t('index.Success') :
									 item.status == 2 ? $t('index.cancel') : item.status == 3 ? $t('index.failure') 
									 : '--'}}</view>
								</image>
							</view>
							<view class="stateFlex">
								<view>
									<view class="titleName"> {{item.carNo ? item.carNo : '--'}} </view>
								</view>
								<view>
									<view class="addressInf">
										{{item.vin}}
									</view>
								</view>
								<view class="flex justify-between">
									<view class="flex align-end">
										<image class="battery-num" src="../../static/home/batteryNum.svg"
											mode="scaleToFill"></image>
										<view class="bat-use">{{item.swapFinishTime}}</view>
										<!-- <view class="bat-total">/{{item.batteryVo.batTotal}}</view> -->
									</view>
									<view class="cu-capsule round">
										<view class="flex align-end">
											<image class="planeIcon" src="../../static/home/planeIcon.svg" mode="">
											</image>
											<!-- <view class="planeNum">{{ Math.round(item.distance * 10) / 10 }}km</view> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="homeData.stationList.length>3" :status="status" line :loading-text="loadingText"
					:loadmore-text="loadmoreText" :nomore-text="nomoreText" :marginTop='20' />
				<view></view>
			</view>
			<!--  -->
			<uv-modal ref="popup" :title="$t('index.Make_appointment')" @confirm="handle_confirm" @cancel="handle_cancel">
				<view class="slot-content" style="width: 100%;">
					<view class="">
						<view class="flex solid-bottom padding-tb-lg justify-between" @click="getGender_car">
							<view class="orderNumber">{{$t('index.License_plate')}}</view>
							<view class="flex">
								{{appoitmodel.carNo}}
								<!-- <u-input border="none" v-model.trim="appoitmodel.carNo" placeholder=""
									inputAlign='right'></u-input> -->
								<uv-picker ref="popup_pick_car" :columns="canSwapFlag_car_list" keyName="carNo"
									@confirm="confirmGender_carNo"></uv-picker>
								<text class="lg text-gray cuIcon-right center-div"
									style="vertical-align: bottom;"></text>
							</view>
						</view>
						<view class="flex solid-bottom padding-tb-lg justify-between" @click="getGender">
							<view class="orderNumber">{{$t('index.Optional_position')}}</view>
							<view class="flex">
								{{appoitmodel.name}}
								<!-- <u-input border="none" v-model.trim="appoitmodel.name" placeholder=""
									inputAlign='right'></u-input> -->
								<!-- 	<u-picker :show="charg_show" :columns="canSwapFlag_list" :keyName="name"
									@confirm="confirmGender" @cancel="cancelGender" :immediateChange='true'> </u-picker> -->
								<uv-picker ref="popup_pick" :columns="canSwapFlag_list" keyName="name"
									@confirm="confirmGender"></uv-picker>
								<text class="lg text-gray cuIcon-right center-div"
									style="vertical-align: bottom;"></text>
								<!-- <text> > </text> -->
							</view>
						</view>
					</view>
				</view>
			</uv-modal>
		</view>
	</view>
	<view class="mainBg"></view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	// import {
	// 	log
	// } from '../../static/mqtt/dist/mqtt.min.js';
	// console.log('========公用baseURL', config);
	// import qqmapsdk from '../../static/utils/lib/qqmap-wx-jssdk.js';
	// const QQMapWX = require('../../static/utils/lib/qqmap-wx-jssdk.js');
	// const img =require('../../static/home/backBg.png')
	import {
		reactive,
		ref,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,

	} from "@dcloudio/uni-app";
	// const instance = getCurrentInstance();
	// const { proxy }= getCurrentInstance();//如全局挂在request需要导入使用import {getCurrentInstance} from "vue";
 import { useI18n } from 'vue-i18n'//zz
    const { t } = useI18n()//zz
	const search_value = ref('')
	const appoitmodel = ref({
		name: '',
		carNo: '',
		vin: '',
		customerId: uni.getStorageSync("userInfo").id
	})
	const swiperData = reactive({
		swiperList: [],
	})
	const padTop = ref() //有无刘海屏头部的padding值
	const homeData = ref({
		stationList: [
			// 	{
			// 	id: 0,
			// 	cover: '',
			// 	operationStatus: 1,
			// 	stationName: '测试站点',
			// 	stationLocation: '',
			// 	batteryVo: {
			// 		swapBatTotal: 20,
			// 		batTotal: 10
			// 	},
			// 	longitude: '',
			// 	latitude: '',
			// 	distance: 30
			// },
		],
		stationBeing: [],
	})
	const noneShow = ref(false)
	swiperData.swiperList = [
		'https://cemicloud.cn/service-file/version/2023-10/d2579e5507fd7f066c0dab2777b21c14/%E6%9C%AA%E6%A0%87%E9%A2%98-2.jpg',
		'https://cemicloud.cn/service-file/version/2023-10/d2579e5507fd7f066c0dab2777b21c14/%E6%9C%AA%E6%A0%87%E9%A2%98-2.jpg',
	]

	// 加载更多的数据
	const status = ref('loadmore')
	const loadingText = ref(t('index.Trying_load'))
	const loadmoreText = ref(t('index.Pull_load_more'))
	const nomoreText = ref(t('index.Pull_load_more'))

	const page = ref(1) //触底加载增加的页数
	let totalPages = ref()
	let longiNum = ref()
	let latiNum = ref()
	var qqmapsdk
	const cityRes = ref()
	const radios = reactive([{
			checked: true
		},
		{
			checked: false
		},
		{
			checked: false
		}
	]);
	let recordNum = ref(0)
	const notification = ref('')
	const goShift = ref(false)
	onLoad(async () => {
		//获取胶囊按钮位置信息
		const menuButton = uni.getMenuButtonBoundingClientRect();
		let navBarHeight = menuButton.top;
		padTop.value = navBarHeight
		// qqmapsdk = new QQMapWX({
		// 	key: config.iMapKey
		// })

		// getLocation() //获取位置信息

	})
	onShow(async () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: t('index.login_first'),
				duration: 2000,
				icon: 'error'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '../../pagesCenter/login/enter'
				})
			}, 1000)
			return;
		}
		handle_charge()
		handle_car()
		getList()
	})

	const canSwapFlag_list = ref([])
	const handle_charge = async () => {
		await uni.$request({
			url: config.baseUrl_charg + 'api/Charge/GetChargMonitorChargBinData',
		}).then(res => {
			// console.log(res, '充电仓信息');
			let array = res.data.data
			let new_array = []
			for (var i = 0; i < array.length; i++) {
				if (array[i].amtLock != 1 && array[i].status != 0 && array[i].canSwapFlag != 0) {
					new_array.push(array[i])
				}
			}
			canSwapFlag_list.value[0] = new_array
		})
	}

	const canSwapFlag_car_list = ref([])
	const handle_car = async () => {
		await uni.$request({
			url: config.baseUrl + 'api/AppCustomerVehicle/CustomerVehiclePage',
			method: 'POST',
			data: {
				customerId: uni.getStorageSync("userInfo").id
			}
		}).then(res => {
			// console.log(res, '车牌');
			let array = res.data.rows
			canSwapFlag_car_list.value[0] = array
			// console.log(canSwapFlag_car_list, '车牌');
		})
	}

	const charg_show = ref(false)
	const confirmGender = (e) => {
		// console.log(e,'e');
		appoitmodel.value.binNos = e.value[0].no
		appoitmodel.value.name = e.value[0].name
	}
	const confirmGender_carNo = (e) => {
		// console.log(e, 'e');
		appoitmodel.value.carNo = e.value[0].carNo
		appoitmodel.value.vin = e.value[0].vin
	}
	const popup_pick = ref(null)
	const popup_pick_car = ref(null)
	const getGender = () => {
		// console.log(canSwapFlag_list,'can');
		// charg_show.value = true
		popup_pick.value.open()
	}
	const getGender_car = () => {
		popup_pick_car.value.open()
	}
	const cancelGender = () => {
		charg_show.value = false
	}

	const getList = async () => {
		await uni.$request({
			url: config.baseUrl + "api/AmtOrderInfo/Page",
			method: 'POST',
			data: {
				customerId: appoitmodel.value.customerId
			},
		}).then(res => {
			homeData.value.stationList = res.data.data.rows
			console.log(homeData.value.stationList, '-----');
		}).catch((err) => {
			console.log(err, 'err');
			// uni.showToast({
			// 	title: '加载失败',
			// 	duration: 2000,
			// 	icon: 'error'
			// });
		})
	}
	const searchPeo = () => {
		//跳转获取搜索地址
		uni.navigateTo({
			url: './searchDestination/searchDestination'
		})

	}
	const popup = ref(null)
	const subscribe = () => {
		popup.value.open()
	}
	const handle_confirm = async () => {
		if (appoitmodel.value.carNo == '') {
			uni.showToast({
				title: t('index.license_plate_cannot_empty'),
				duration: 2000,
				icon: 'error'
			});
			reset_appint()
			return
		} else if (appoitmodel.value.name == '') {
			uni.showToast({
				title: t('index.position_cannot_empty'),
				duration: 2000,
				icon: 'error'
			});
			reset_appint()
			return
		} else {
			await uni.$request({
				url: config.baseUrl + "api/AmtOrderInfo/add",
				method: 'POST',
				data: appoitmodel.value
			}).then(res => {
				// console.log(res, '预约');
				if (res.data.isSuccess) {
					uni.showToast({
						title: t('index.Reservation_successful'),
						duration: 1000,
					})
					getList()
					handle_charge()
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'error'
					});
				}
			}).catch((err) => {
				uni.showToast({
					title: t('index.Failed_appointment'),
					duration: 2000,
					icon: 'error'
				});
			})
			reset_appint()

		}

	}
	const reset_appint = () => {
		appoitmodel.value.carNo = ''
		appoitmodel.value.name = ''
		appoitmodel.value.vin = ''
		popup.value.close()
	}
	const handle_cancel = () => {}
</script>

<style lang="scss" scoped>
	.content {
		// position: relative;
		// background-color: #4C91FF;
		// background: linear-gradient(180deg, #4C91FF 0%, #3698FD 11.35%, #73CBFD 21.65%, #94EBFF 37.35%, #EAF4F8 97.71%) no-repeat;
	}

	.mainBg {
		width: 100vw;
		position: fixed;
		top: 0;
		height: 100vh;
		background: linear-gradient(180deg, #a4c9d3 0%, #a4c9d3 11.35%, #a4c9d3 21.65%, #ffffff 37.35%, #a4c9d3 97.71%);
		z-index: -1;
	}

	.topNav {}

	.cu-bar {
		padding-bottom: 16rpx;
		color: #fff;
		justify-content: flex-start;

		.search-form {
			width: 664rpx;
			// width: 334rpx;
			background-color: #E2E2E2;
			flex: 0;
		}

		.searchPoint {
			width: 360rpx;
			// width: 334rpx;
			height: 36rpx;
		}
	}

	.tabList {
		.stateStyle {
			padding: 8rpx 16rpx;
			color: #808A96;
			background-color: #E2E2E2;
			margin-left: 16rpx;
			font-size: 28rpx;
		}
	}

	.section {
		// background-color: #EAF4F8;
		// background: linear-gradient(180deg, #4C91FF 0%, #3698FD 11.35%, #73CBFD 21.65%, #94EBFF 37.35%, #EAF4F8 97.71%) ;
		// border-radius: 10px 10px 0 0;
		// padding-top: 20rpx;
		// position: relative;
		// top: -10rpx; 
	}


	.titleName {
		color: #333333;
		font-weight: 400;
		font-size: 36rpx;
		// letter-spacing: 1px;
	}

	.addressInf {
		width: 442rpx;
		color: #666666;
		font-size: 28rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		// margin:16rpx 0 0rpx 0;
	}

	.listInf {
		width: 490rpx;
		flex-direction: column;
		justify-content: space-between;
		height: 178rpx;
	}

	.mapBtn {
		height: 178rpx;
		align-items: flex-end;
		// background-color: greenyellow;
	}

	.goMap {
		width: 24rpx;
		height: 24rpx;
		background: url('/static/home/goMap.svg') no-repeat;
		background-size: 100% 100%;
	}

	.moreLocal {
		margin-left: 10rpx;
	}

	.regionName {
		letter-spacing: 3rpx;
	}

	.stateImg {
		width: 164rpx;
		height: 164rpx;
		background-color: #eee;
		border-radius: 8rpx;

		.titleImg {
			border-radius: 8rpx;
		}
	}


	.searchImg {
		width: 72rpx;
		height: 72rpx;
		background: url('../../static/home/search.svg') no-repeat;
		background-size: 100% 100%;
	}

	.chargeImg {
		width: 72rpx;
		height: 72rpx;
		background: url('../../static/home/pay.svg') no-repeat;
		background-size: 100% 100%;
	}

	.subscribeImg {
		width: 72rpx;
		height: 72rpx;
		background: url('../../static/home/subscribe.svg') no-repeat;
		background-size: 100% 100%;
		position: relative;

		.cu-tag {
			background-color: #F2634F;
			font-size: 24rpx;
			font-weight: 400;
		}

		.cu-tag.badge {
			border: 1px solid #fff;
			right: -17rpx;
			height: 34rpx;
		}

	}

	.wrap {
		width: 100%;
		// display: flex;
		// justify-content: center;
		// align-item: center;
		// height: 100%; /* 设置容器的高度为100% */

	}

	// .swiper {
	//   width: 100%;
	//   height: 100%;
	// }
	.stateFlex {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 16rpx;
	}

	.cu-card>.cu-item {
		margin: 0 32rpx 16rpx 32rpx;
	}

	.stateImg .cu-tag.badge {
		width: 100rpx;
		height: 40rpx;
		top: 0rpx;
		left: 0rpx;
		right: 90rpx;
		padding: 8rpx 0rpx;
		background-image: linear-gradient(to right bottom, #A5C7FF, #2690FB);
		border-radius: 4px;
		font-size: 24rpx;
		text-align: center;
	}

	.bg-blue {
		background-image: linear-gradient(to right bottom, #A5C7FF, #2690FB);
	}

	.stateImg .cu-tag .bgPlane {
		padding: 0rpx 8rpx;
		background: rgba(255, 255, 255, 0);
	}

	.column {
		display: flex;
		flex-direction: column;
	}

	.card-nav {
		padding: 32rpx;

		.navStyle {
			border-radius: 16rpx;
		}
	}

	.swiperCard {
		margin: 16rpx 32rpx 0rpx 32rpx;
	}

	.cu-bar .search-form {
		background-color: #fff;
	}

	.cu-card .cu-item,
	.radius {
		border-radius: 16rpx;
	}

	.none-box {
		width: 100vw;
		display: flex;
		justify-content: center;

		.image-none {
			width: 320rpx;
			height: 452rpx;
		}
	}

	.battery-num {
		width: 20rpx;
		height: 32rpx;
	}

	.bat-use {
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 1px;
		color: #333333;
		margin-left: 16rpx;
		line-height: 28rpx;
	}

	.bat-total {
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 1px;
		color: #333333;
		line-height: 26rpx;
	}

	.card-box {
		padding: 32rpx;
		box-shadow: -2px 2px 8px 0px #7AA7D026;

	}

	.planeIcon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.planeNum {
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #4C91FF;

	}

	.panel {
		padding: 32rpx;
	}

	.notification {
		margin-top: 16rpx;

		::v-deep .u-notice-bar {
			border-radius: 16rpx;
		}

		::v-deep .u-icon text {
			color: #808080 !important;
		}
	}
</style>