<template>
	<view class="page flex-col">
		<view class="w750 flex-col align-center">
			<view class="swiper1 flex-col">
				<view class="swiper">
					<u-swiper height="322rpx" :list="list" keyName="swiperPicture" :autoplay="true" circular
						radius="20"></u-swiper>
				</view>
			</view>

			<view class="image-wrapper_2 flex-row justify-between">
				<image class="thumbnail_1" :src="imagesUrl+'signup.png'"
					@click="goPage('/subSchoolPages/registration/registration')" />

				<image class="thumbnail_2" :src="imagesUrl+'study.png'"
					@click="goPage('/subSchoolPages/appointment/appointment?tab=0')" />
			</view>

			<view class="w700 flex-row align-center justify-between padding-left padding-right radius"
				style="margin:20rpx auto 0;height: 180rpx;background-image: linear-gradient(-81deg,rgba(255, 255, 255, 1) 0,rgba(255, 255, 255, 1) 0,rgba(225, 235, 255, 1) 100%,rgba(225, 235, 255, 1) 100%);"
				@click="this.$tab.navigateTo('/subNoticePages/list/list?noticeType=6')">
				<u--image :src="imagesUrl+'notice.png'" width="127rpx" height="123rpx"></u--image>
				<view class="margin-top" style="width: 480rpx;">
					<u-notice-bar :text="notice" direction="column" speed="250" color="#000" bgColor="none" icon="false"
						fontSize="32rpx" :customStyle="{}"></u-notice-bar>
					<text class="text-lg text-bold">{{notice.noticeTitle}}</text>
				</view>
			</view>

			<view
				class="w700 flex-row align-center justify-between padding-left padding-right bg-white radius margin-top"
				style="height: 120rpx;">
				<view class="flex-row align-center" @click="goPage('/subSchoolPages/appointment/appointment?tab=1')">
					<image :src="imagesUrl+'flower.png'" mode="widthFix" style="width: 33rpx;margin-right:10rpx">
					</image>
					<text class="text-group_3">预约练车</text>
				</view>
				<view class="flex-row align-center" @click="goPage('/subSchoolPages/star/star')">
					<u-icon name="thumb-up-fill" color="#fe6178" size="56rpx"></u-icon>
					<text class="text-group_3">明星教练</text>
				</view>
			</view>

			<view class="section_6 flex-row" @click="$map.openMap('蓝安驾校', schoolLatitude, schoolLongitude)">
				<view class="image-wrapper_1 flex-col">
					<image class="label_1" :src="imagesUrl+'location.png'" />
				</view>
				<text class="text_6">{{ schoolAddress }}</text>
			</view>
		</view>
		<view class="group_4 flex-col justify-between align-center">
			<view style="width: 700rpx; margin: 20rpx 0;">
				<u-tabs :list="tabs" :scrollable="false" lineColor="transparent" :activeStyle="{
				        color: '#fff',
						background: 'linear-gradient(104deg, rgba(44, 142, 211, 1) 0,rgba(44, 142, 211, 1) 0,rgba(39, 85, 148, 1) 100%,rgba(39, 85, 148, 1) 100%)',
						borderRadius: '23px',
						padding:'10rpx 25rpx',
						fontSize:'25rpx'
				    }" :inactiveStyle="{
				        color: '#000',
						padding:'10rpx',
						fontSize:'25rpx',
						padding:'5rpx 20rpx',
				    }" @click="changeTab">
				</u-tabs>
			</view>

			<view class="margin-xs">
				<view class="flex-col text-black align-start w700 padding-left padding-right margin-bottom"
					v-show="currIndex == 0">
					<text class="text-bold text-xxl margin-bottom">报名须知</text>
					<text class="text-xl margin-bottom-xs text-bold">• 初次申领C1/C2/D驾照需符合以下条件:</text>
					<text class="margin-bottom-xs text-lg margin-left-sm">1.身份证 (18-70岁)</text>
					<text class="margin-bottom-xs text-lg margin-left-sm">2.体检表(驾校可办理)</text>
					<text class="margin-bottom-xs text-lg margin-left-sm">3.相片(驾校可办理)</text>
					<text class="text-xl margin-bottom-xs text-bold">• 增驾学员需符合以下条件:</text>
					<text class="margin-bottom-xs text-lg margin-left-sm">1.身份证 (18-70岁)</text>
					<text class="margin-bottom-xs text-lg margin-left-sm">2.体检表(驾校可办理)</text>
					<text class="margin-bottom-xs text-lg margin-left-sm">3.相片(驾校可办理)</text>
					<text class="margin-bottom-xs text-lg margin-left-sm">4.泸州以外的驾驶证需要先转入泸州市。</text>
					<text class="margin-bottom-xs text-lg margin-left-sm">5.上个记分周期未扣满12分。</text>

					<text class="text-xl margin-bottom-xs text-bold">• 报名后需要下载两个APP软件:</text>
					<text class="margin-bottom-xs text-lg margin-left-sm">1.驾考宝典 2.交管12123</text>
				</view>
				<view class="flex-col text-black align-center w700 padding-left padding-right margin-bottom"
					v-show="currIndex == 1">
					<text class="text-bold text-xxl margin-bottom">学车流程</text>
					<view class="flex-col align-center process-view">
						<text class="process text-bold text-lg margin-bottom">报名缴费</text>
						<text class="process text-bold text-lg margin-bottom">体检、面签</text>
						<text class="process text-bold text-lg margin-bottom">报名资格审核</text>
						<text class="process text-bold text-lg margin-bottom">入班</text>
						<text class="process text-bold text-lg margin-bottom">科目一理论视频学习</text>
						<text class="process text-bold text-lg margin-bottom">科目一考试</text>
						<text class="process text-bold text-lg margin-bottom">科目二场地驾驶技能训练</text>
						<text class="process text-bold text-lg margin-bottom">科目二考试</text>
						<text class="process text-bold text-lg margin-bottom">科目三实际道路训练+科目四理论视频学习</text>
						<text class="process text-bold text-lg margin-bottom">科目三考试</text>
						<text class="process text-bold text-lg margin-bottom">科目四考试</text>
						<text class="process text-bold text-lg margin-bottom">领证</text>
					</view>
				</view>
				<view class="flex-col text-black align-center w700 padding-left padding-right margin-bottom"
					v-show="currIndex == 2">
					<text class="text-bold text-xxl margin-bottom">报名方法 (C1/C2证)</text>
					<view class="padding text-xl radius margin-bottom"
						style="background-color:  rgba(235, 243, 255, 1);">
						<text>1.携带身份证，联系所选教练，由教练带至驾校报名办公室办理报名手续。</text>
					</view>
					<view class="padding text-xl radius margin-bottom "
						style="background-color:  rgba(235, 243, 255, 1);">
						<text> 2.携带身份证，直接到驾校报名办公室办理报名手续。驾校将根据您的工作性质、性别、需求安排最合适的教练。</text>
						<text style="display: block;"> 办公室联系电话:18715738834</text>
					</view>
					<view class="padding text-xl radius" style="background-color:  rgba(235, 243, 255, 1);">
						<text> 3.在驾校页面，点击下方宣传图片后，填写信息直接报名！信息提交后，驾校工作人员会尽快联系你。驾校将根据您的工作性质、性别、需求安排最合适的教练。</text>
					</view>

				</view>
			</view>
		</view>
		<view class="zhongji">
			<image class="image_12" :src="imagesUrl+'jxtel.png'" @click="call">
				<view class="baizi">{{tel}}</view>
		</view>
		<image class="image_4" :src="imagesUrl+'user_level.png'" @click="goPage('/pages/tabBar/mine/rules')" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tel: '',
				imagesUrl: getApp().globalData.config.imagesUrl,
				baseUrl: getApp().globalData.config.baseUrl,
				constants: {},
				list: [],
				currIndex: 0,
				tabs: [{
					name: '报名须知'
				}, {
					name: '学车流程',
				}, {
					name: '报名方法'
				}],
				schoolAddress: '',
				schoolLatitude: '',
				schoolLongitude: '',
				notice: ''

			};
		},
		onLoad() {
			this.getSwpier();
			this.getConfig()
			this.getNotice()
		},
		methods: {
			// 获取轮播图
			async getSwpier() {
				const res = await this.$request({
					url: '/system/swiper/listWx',
					data: {
						moudleName: '驾校'
					}
				})
				for (let i = 0; i < res.rows.length; i++) {
					res.rows[i].swiperPicture = getApp().globalData.config.baseUrl + res.rows[i].swiperPicture;
					res.rows[i].title = res.rows[i].swiperName
				}
				this.list = res.rows
			},
			// 获取配置:电话
			async getConfig() {
				const res = await this.$request({
					url: '/system/shopconfig/listWx'
				})
				console.log('电话', res.rows[0]);
				this.schoolAddress = res.rows[0].schoolAddress
				this.schoolLatitude = res.rows[0].schoolLatitude;
				this.schoolLongitude = res.rows[0].schoolLongitude;
				this.tel = this.addHyphenEveryThreeChars(res.rows[0].schoolTel)
			},
			addHyphenEveryThreeChars(str) {
				let modifiedPhoneNumber = str.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
				return modifiedPhoneNumber;
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.tel, //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);

					}
				})
			},
			changeTab(item) {
				this.currIndex = item.index
			},
			goPage(path) {
				this.$tab.navigateTo(path)
			},
			// 获取公告
			async getNotice() {
				const res = await this.$request({
					url: '/system/notice/listWx',
					data: {
						noticeType: 6,
						pageSize: 5
					}
				})
				let notice = []
				for (let i = 0; i < res.rows.length; i++) {
					notice.push(
						res.rows[i].noticeTitle
					)
				}
				this.notice = notice;
			},
			// 打开公告
			openNoticePop(noticeTitle, noticeContent, createTime) {
				this.noticePopShow = true
				this.currNotice = {
					noticeTitle,
					noticeContent,
					createTime
				}
			}

		},
	};
</script>
<style scoped lang="scss">
	@import './index.rpx.css';

	.nickname-pop {
		width: 680rpx;
		padding: 70rpx 50rpx 0rpx;
		background: #242a38;
		border-radius: 10rpx;
	}

	.nickname-input {
		width: 100%;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nickname-label {
		font-size: 30rpx;
		display: block;
		margin-bottom: 5rpx;
		text-align: center;
		color: #d2c3af;
	}

	.input-style {
		border-bottom: 1px solid #d2c3af;
		display: block;
		width: 100%;
		height: 60rpx;
		color: #d2c3af;
	}

	.button-style {
		width: 600rpx;
		margin: 40rpx auto;
	}

	.zhongji {
		width: 100%;
		height: 120px;
		position: relative;

		image {
			position: absolute;
			transform: translate(-50%);
			left: 50%;

		}
	}

	.baizi {
		position: absolute;
		transform: translate(-50%);
		left: 50%;
		top: 35px;
		// left: 25%;
		font-size: 26px;
		text-shadow: 0px 0px 7px #42464C;
		font-family: HuXiaoBo-NanShen;
		font-weight: 600;
		z-index: 99;
		color: white;
		font-style: italic
	}

	.image_12 {
		width: 95%;
		height: 204rpx;
		margin: 0 auto;
	}

	.process-view {
		background-image: linear-gradient(to bottom, #79baff 50%, #79baff 50%);
		background-position: center;
		background-size: 8px 100%;
		/* 调整条纹的高度 */
		background-repeat: repeat-y;

	}

	.process {
		display: block;
		border-radius: 20rpx;
		background: #d8e7fd;
		color: #2163bd;
		padding: 10rpx 30rpx;
	}
</style>