<template>
	<view class="page flex-col">
		<view class="block_2 justify-center">
			<view class="iconGrid">
				<u-grid :col="4">
					<u-grid-item v-for="(item, index) in icons" :key="index" @click="goModule(item.path)">
						<image :src="item.img" class="iconImage" />
						<view class="iconText">{{item.iconText}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="swiper" @click="goModule('/subLoginPages/pages/Login')">
			<u-swiper height="306rpx" :list="list" keyName="swiperPicture" showTitle :autoplay="true" circular
				radius="20"></u-swiper>
		</view>

		<view class="block_4 flex-col">
			<view class="group_1 flex-row justify-between">
				<view class="text-wrapper_1 flex-col">
					<u--image :showLoading="false" :src="imagesUrl+'car.png'" width="336rpx" height="158rpx"
						@click="goModule('/subCarPages/index/index')"></u--image>


				</view>
				<view class="text-wrapper_2 flex-col">
					<u--image :showLoading="false" :src="imagesUrl+'inspection.png'" width="336rpx" height="158rpx"
						@click="goModule(123)"></u--image>

				</view>
			</view>
			<view class="group_2 flex-row justify-between">
				<view class="text-wrapper_3 flex-col">
					<u--image :showLoading="false" :src="imagesUrl+'school.png'" width="336rpx" height="158rpx"
						@click="goModule('/subSchoolPages/index/index')"></u--image>

				</view>
				<view class="text-wrapper_4 flex-col">
					<u--image :showLoading="false" :src="imagesUrl+'repair.png'" width="336rpx" height="158rpx"
						@click="goModule('/subRepairPages/index/index')"></u--image>

				</view>
			</view>


			<view class="group_3 flex-row" @click="$map.openMap('蓝安集团', groupLatitude, groupLongitude)">
				<view class="image-text_5 flex-row justify-between">
					<image class="label_5" :src="imagesUrl+'location.png'" />
					<text class="text-group_5">{{ groupAddress }}</text>
				</view>
			</view>
			<image @click="goModule('/pages/tabBar/mine/rules')" class="image_3" :src="imagesUrl+'user_level.png'"
				style="margin-bottom: 20px;" />
		</view>
		<contact-bar barName="index"></contact-bar>

		<u-popup :show="popShow" mode="center" @close="close" bgColor="transparent">
			<view class="flex-col align-center">
				<image :src="imagesUrl+'pop.png'" mode=""></image>
				<view style="position: absolute;width: 400rpx; top: 130rpx;color:#836642">
					<rich-text :nodes="notice.noticeContent"></rich-text>
				</view>
				<view @click="close" style="position: absolute;bottom: 10rpx;">
					<u--image :showLoading="false" :lazyLoad="false" :src="imagesUrl+'closeBtn.png'" width="221rpx"
						height="56rpx"></u--image>
				</view>
			</view>

		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.config.baseUrl,
				imagesUrl: getApp().globalData.config.imagesUrl,
				notice: null,
				popShow: false,
				icons: [{
						iconText: '蓝安二手车',
						img: '/static/images/icon/car.png',
						path: '/subCarPages/index/index'
					},
					{
						iconText: '蓝安检测',
						img: '/static/images/icon/inspection.png',
						 path: 123
						// path: '/subInspectionPages/index/index'
					},
					{
						iconText: '蓝安汽修',
						img: '/static/images/icon/repair.png',
						path: '/subRepairPages/index/index'
					},
					{
						iconText: '蓝安保险',
						img: '/static/images/icon/insurance.png',
						path: '/subInsurancePages/index/index'
					},
					{
						iconText: '蓝安救援',
						img: '/static/images/icon/rescue.png',
						path: '/subRescuePages/index/index'
					},
					{
						iconText: '蓝安驾校',
						img: '/static/images/icon/school.png',
						path: '/subSchoolPages/index/index'
					},
					{
						iconText: '使用手册',
						img: '/static/images/icon/sysc.png',
						path: 'sysc'
					},

				],
				list: [],
				groupAddress: null,
				groupLatitude: null,
				groupLongitude: null
			};
		},
		mounted() {
			this.getSwpier()
			this.getConfig()
			this.getNotice()
		},
		onShow() {
			
		},
		onLoad(query) {
			// 弹窗 缓存已读状态
			const isReadIndexPop = uni.getStorageSync('isReadIndexPop');
			this.popShow = !isReadIndexPop;
			if (query) {
				try {
					const url = decodeURIComponent(query.q) // 获取到二维码原始链接内容
					let inviteId = url.split("?id=")[1]
					uni.setStorageSync('inviteId', inviteId);
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		methods: {
			// js 触发的函数:置空即可
			moveHandle: function() {},
			//去支付
			getRechrge() {
				uni.navigateTo({
					url: '/pages/tapBar/mine/Recharge'
				})
			},
			// 获取公告
			async getNotice() {
				const res = await this.$request({
					url: '/system/notice/listWx',
					data: {
						noticeType: 5
					}
				})
				this.notice = res.rows[0];
			},
			// 获取轮播图
			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
				console.log(res.rows);
			},

			// 获取配置:电话与位置、坐标
			async getConfig() {
				const res = await this.$request({
					url: '/system/shopconfig/listWx'
				})
				this.groupAddress = res.rows[0].groupAddress;
				this.groupLatitude = res.rows[0].groupLatitude;
				this.groupLongitude = res.rows[0].groupLongitude;
			},

			goModule(path) {
				if(path ==123){
					wx.navigateToMiniProgram({
										appId: 'wx5eeea06aeaae4f89',
										path: 'pages/detection/MerchantDetails?id=19',
										extraData: {
											foo: 'bar'
										},
										envVersion: 'release',
										success(res) {
											// 打开成功
										}
									})
				}
				if (path == 'sysc') {
					uni.downloadFile({
					  url: 'https://www.nuoyunr.com/lanan/profile/upload/2023/08/19/sysc.pdf',
					  success: function (res) {
					    var filePath = res.tempFilePath;
					    uni.openDocument({
					      filePath: filePath,
					      showMenu: true,
					      success: function (res) {
					        console.log('打开文档成功');
					      }
					    });
					  }
					});
					return
				}
				if(path == '/subInspectionPages/index/index'){
						this.getmsg()
				}
				if(path == '/subRepairPages/index/index'){
						this.getmsg()
				}
				
				this.$tab.navigateTo(path)
				
			},
			getmsg(){
				uni.requestSubscribeMessage({
					tmplIds: ["cof8YMGzXf2vR98PoDWfZTAmCkKSOhlpxO9bgArX5y0", ],
					success(res) {
						console.log(res);
						//消息订阅调起成功，返回值'accept'、'reject'、'ban'分别代表用户对此条订阅是同意、拒绝、后台禁用
					},
					fail(err) {
						console.log(err);
						//消息订阅调起失败
					},
					complete() {
						// 无论确定还是取消，只要点击按钮后都会执行
					},
				})
			},
			close() {
				
				this.popShow = false
				uni.setStorageSync('isReadIndexPop', true)
			}
		},
	};
</script>
<style>
	.page {
		background-color: rgba(238, 238, 238, 1);
		width: 750rpx;
	}

	.box_1 {
		background-color: rgba(244, 244, 244, 1);
	}

	.block_1 {
		background-color: rgba(36, 42, 56, 1);
		width: 750rpx;
		height: 40rpx;
	}

	.block_2 {
		background-color: rgba(36, 42, 56, 1);
		width: 750rpx;
		padding: 40rpx 0 140rpx;
	}

	.text_1 {
		width: 119rpx;
		height: 30rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 29rpx 0 0 314rpx;
	}

	.grid_1 {
		width: 707rpx;
		height: 250rpx;
		flex-wrap: wrap;
		margin: 86rpx 0 140rpx 57rpx;
	}

	.list-items_1 {
		position: relative;
		width: 110rpx;
		height: 98rpx;
		margin: 0 89rpx 58rpx 0;
	}

	.list-items_1:nth-child(4n) {
		margin-right: 0;
	}

	.list-items_1:nth-last-child(-n + 2) {
		margin-bottom: 0;
	}

	.image_1 {
		position: absolute;
		left: 19rpx;
		top: 0;
		width: 67rpx;
		height: 52rpx;
	}

	.image_2 {
		position: absolute;
		left: -4rpx;
		top: 0;
		width: 52rpx;
		height: 52rpx;
	}

	.text_2 {
		width: 110rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 22rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin-top: 76rpx;
	}

	.block_3 {
		box-shadow: 0px -3px 2px 0px rgba(232, 232, 232, 1);
		background-color: rgba(255, 255, 255, 1);
		width: 749rpx;
		height: 98rpx;
		margin: 872rpx 0 3100rpx 0;
	}

	.image-text_1 {
		width: 41rpx;
		height: 65rpx;
		margin: 19rpx 0 0 99rpx;
	}

	.label_1 {
		width: 36rpx;
		height: 37rpx;
		margin-left: 2rpx;
	}

	.text-group_1 {
		width: 41rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(53, 121, 213, 1);
		font-size: 21rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin-top: 8rpx;
	}

	.image-text_2 {
		width: 45rpx;
		height: 68rpx;
		margin: 17rpx 0 0 128rpx;
	}

	.label_2 {
		width: 36rpx;
		height: 40rpx;
		margin-left: 4rpx;
	}

	.text-group_2 {
		width: 45rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(169, 169, 169, 1);
		font-size: 22rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin-top: 7rpx;
	}

	.image-text_3 {
		width: 45rpx;
		height: 67rpx;
		margin: 18rpx 0 0 127rpx;
	}

	.label_3 {
		width: 30rpx;
		height: 36rpx;
		margin-left: 7rpx;
	}

	.text-group_3 {
		width: 45rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(169, 169, 169, 1);
		font-size: 22rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin-top: 10rpx;
	}

	.image-text_4 {
		width: 44rpx;
		height: 65rpx;
		margin: 20rpx 95rpx 0 125rpx;
	}

	.label_4 {
		width: 28rpx;
		height: 34rpx;
		margin-left: 9rpx;
	}

	.text-group_4 {
		width: 44rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		color: rgba(169, 169, 169, 1);
		font-size: 22rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin-top: 9rpx;
	}

	.block_4 {
		position: absolute;
		left: 0;
		top: 500rpx;
	}

	.group_1 {
		width: 700rpx;
		height: 158rpx;
		margin: 200rpx 0 0 25rpx;
	}

	.text-wrapper_1 {
		height: 158rpx;

		background-size: 100% 100%;
		width: 336rpx;
	}

	.text_3 {
		position: relative;
		top: -46rpx;
		left: 20rpx;
		overflow-wrap: break-word;
		color: rgba(62, 31, 1, 1);
		font-size: 20rpx;
		white-space: nowrap;
	}

	.text-wrapper_2 {
		height: 157rpx;

		background-size: 100% 100%;
		width: 336rpx;
	}

	.text_4 {
		width: 180rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(1, 23, 62, 1);
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 90rpx 0 0 21rpx;
	}

	.group_2 {
		width: 700rpx;
		height: 157rpx;
		margin: 23rpx 0 0 25rpx;
	}

	.text-wrapper_3 {
		height: 157rpx;

		background-size: 100% 100%;
		width: 336rpx;
	}

	.text_5 {
		width: 300rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(1, 33, 62, 1);
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 90rpx 0 0 21rpx;
	}

	.text-wrapper_4 {
		height: 157rpx;

		background-size: 100% 100%;
		width: 336rpx;
	}

	.text_6 {
		width: 220rpx;
		height: 19rpx;
		overflow-wrap: break-word;
		color: rgba(62, 31, 1, 1);
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 90rpx 0 0 21rpx;
	}

	.image_3 {
		width: 700rpx;
		height: 122rpx;
		margin: 0rpx 0 0 25rpx;
	}

	.group_3 {
		box-shadow: 0px 0px 17px 0px rgba(237, 237, 237, 1);
		background-color: rgba(255, 255, 255, 1);
		border-radius: 11px;
		width: 700rpx;
		height: 90rpx;
		margin: 26rpx 0 26rpx 25rpx;
	}

	.image-text_5 {
		width: 475rpx;
		height: 39rpx;
		margin: 26rpx 0 0 24rpx;
	}

	.label_5 {
		width: 32rpx;
		height: 39rpx;
	}

	.text-group_5 {
		width: 422rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(72, 72, 72, 1);
		font-size: 32rpx;
		font-weight: bold;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
		margin-top: 5rpx;
	}

	.group_4 {
		background-color: rgba(169, 169, 169, 1);
		border-radius: 22px;
		width: 700rpx;
	}

	.iconGrid {
		width: 700rpx;
	}

	.icons {
		padding: 10rpx;
	}

	.iconImage {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 5rpx;
	}

	.iconText {
		color: #FFF;
		margin-bottom: 20rpx;
		font-size: 16px;
		font-weight: bold;
	}

	.swiper {
		width: 700rpx;
		margin: 0 auto;
		position: relative;
		top: -100rpx
	}
</style>