<template>
	<view class="moreFunctionsIndex">
		<u-navbar title="更多功能" leftIconColor="#000" rightIcon='../../static/common/white_left_arrrow.png' placeholder
			leftIconSize='38rpx' autoBack="true">
		</u-navbar>
		<view class="card">
			<view class="cardList">
				<view class="cardItem" v-for="(item,index) in list" :key="index" @click="skipPages(item.path,index)">
					<image :src="item.icon" mode="" class="iconImg"></image>
					<view class="liLabel">
						{{item.label}}
					</view>
					<view class="Rup">
						<view class="Rtime" v-if="index==4">
							{{ServiceData.cusServiceStartTime}}-{{ServiceData.cusServiceEndTime}}
						</view>
						<image src="../../static/common/sg_right_arrow.png" class="rupImg" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<uni-popup :position="'middle'" :show="showBindCarPop" @hidePopup="handleHidePopup">
			<view class="sys-mes-nofity">
				<div class="sys-mes-nofityheader"></div>
				<image class="sys-mes-nofityImage" src="/static/chepai.png" mode=""></image>
				<view class="mg-top-38 fs28 deep-gray">您还未绑定爱车，请前往绑定</view>
				<div class="btns">
					<div class="quxiao" @click="showBindCarPop = false">
						取消
					</div>
					<div class="bangding" @click="handleBindCar">
						去绑定
					</div>
				</div>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import mode1 from '../../static/mode/mode1.png'
	import mode2 from '../../static/mode/mode2.png'
	import mode3 from '../../static/mode/mode3.png'
	import mode4 from '../../static/mode/mode4.png'
	import mode5 from '../../static/mode/mode5.png'
	import mode6 from '../../static/mode/mode6.png'
	import mode7 from '../../static/mode/mode7.png'
	export default {
		data() {
			return {
				carInfo: {},
				list: [{
						icon: mode1,
						label: "车况报告",
						path: "/pages/VehicleConditionReport/VehicleConditionReport"
					},
					{
						icon: mode2,
						label: "养护记录",
						path: "/pages/RecordOfMaintenance/RecordOfMaintenance"
					},
					// {
					// 	icon: mode3,
					// 	label: "保养手册",
					// 	path: "/pages/maintenanceManual/maintenanceManual"
					// },
					{
						icon: mode4,
						label: "合作加盟",
						path: "/pages/joinInCooperation/joinInCooperation"
					},
					{
						icon: mode5,
						label: "联系客服",
						path: "/pages/contactTheCustomerService/contactTheCustomerService"
					},
				],
				ServiceData: "",
				showBindCarPop: false,
			}
		},
		onShow() {
			this.getCustomerServiceData()
			this.getCarInfo()
		},
		methods: {
			handleHidePopup() {
				this.showBindCarPop = false
			},
			handleBindCar() {
				uni.navigateTo({
					url: '/pagesA/add-car/add-car'
				})
			},
			async getCarInfo() {
				let res = await this.$http.get('/api/client/index/carInfo')
				this.carInfo = res.data.data
				if (this.carInfo != null) {
					this.showBindCarPop = false
				}
			},
			getCustomerServiceData() {
				this.$http.get('/api/client/userInfo/customerService').then(res => {
					this.ServiceData = res.data.data
				})
			},
			skipPages(url, index) {
				if (this.carInfo == null && (index == 0 || index == 1)) {
					this.showBindCarPop = true
					return
				}
				uni.navigateTo({
					url: url
				})
			}
		},
	}
</script>

<style lang="scss">
	.moreFunctionsIndex {
		background-color: #fafbff;
		min-height: 100vh;

		.card {
			margin: auto;
			margin-top: 40rpx;
			padding: 40rpx 25rpx;
			width: 702rpx;
			height: 1055rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			box-sizing: border-box;

			.cardList {
				.cardItem {
					display: flex;
					align-items: center;
					margin-bottom: 46rpx;

					.iconImg {
						width: 41rpx;
						height: 41rpx;
					}

					.liLabel {
						margin-left: 20rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					.Rup {
						display: flex;
						align-items: center;
						margin-left: auto;

						.Rtime {
							margin-right: 26rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
						}

						.rupImg {
							width: 9rpx;
							height: 17rpx;
						}
					}
				}
			}
		}

		.sys-mes-nofity {
			// padding: 0 90rpx;
			// padding-bottom: 50rpx;
			// background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
			border-radius: 14rpx;
			position: relative;
			width: 624rpx;
			height: 618rpx;
			background: #FFFFFF;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			overflow: hidden;

			.sys-mes-nofityheader {
				height: 108rpx;
				background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
				border-radius: 14rpx 14rpx 0rpx 0rpx;
			}

			.sys-mes-nofityImage {
				width: 589rpx;
				height: 296rpx;
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.quxiao {
					width: 233rpx;
					height: 67rpx;
					background: #999999;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
					line-height: 67rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.bangding {
					width: 232rpx;
					height: 67rpx;
					background: #FF4502;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 67rpx;
					text-align: center;
				}
			}

			.btnview {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 67rpx;
				text-align: center;

				.no {
					width: 233rpx;
					height: 67rpx;
					background: #999999;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
					margin: 0 24rpx;
				}

				.ok {
					width: 232rpx;
					height: 67rpx;
					background: #FF4502;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
					margin: 0 24rpx;
				}
			}

			.deep-gray {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: bold;
				font-size: 28rpx;
				color: #FF4502;
				text-align: center;
				padding-top: 34rpx;
				padding-bottom: 49rpx;
				margin: 0;
			}

			.backcorol {
				width: 624rpx;
				height: 108rpx;
				background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
				border-radius: 14rpx 14rpx 0rpx 0rpx;
			}

			image {
				width: 589rpx;
				height: 296rpx;
				display: block;
				margin: 0 auto;
			}


			.top {
				border-radius: 14rpx;
				height: 148rpx;
			}

			.bot {
				margin-top: 72rpx;

				.confirm {
					padding: 10rpx 60rpx;
					border-radius: 30rpx;
					color: #ffffff;
					background-color: #FF4502;
				}
			}
		}


	}
</style>