<template>
	<view class="index" :style="{ overflow: showUserAgent ? 'hidden' : 'auto',
		 height: '100vh'}">
		<view class="top-bgc">
			<image src="../../static/common/bg.png" style="width: 100%" :mode="'widthFix'"></image>
		</view>
		<!-- 自定义导航栏开始 -->
		<uni-nav-bar :status-bar="true" :fixed="true" @clickLeft="handleClickLeft" @clickTitle="handleClickInput"
			@clickRight="handleClickRight" :backgroundColor="'transparent'" :border="false">
			<block v-slot:left>
				<view class="city u-f u-f-fdr u-f-aic u-f-jcfs">
					<image src="../.././static/common/location.png" class="city-location" />
					<view class="city-name">
						<text>{{ city }}</text>
					</view>
				</view>
			</block>
			<view class="u-f u-f-aic">
				<view class="input-view light-gray u-f u-f-fdr u-f-aic u-f-fwnw">
					<image class="search-icon" src="../.././static/common/search.png" :mode="'widthFix'"></image>
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="搜索"
						@confirm="confirm" />
				</view>
				<view class="info" @click.stop="handleClickRight">
					<text class="num fs18"
						v-if="messageNum!==0">{{messageNum > 99 ? messageNum + '+' : messageNum}}</text>
				</view>
			</view>
			<block v-slot:right>

			</block>
		</uni-nav-bar>
		<!-- 自定义导航栏结束 -->

		<view class="bg-navbar" :style="{height: paddingTop}"></view>

		<view :style="{height: paddingTop}"></view>

		<!-- 轮播图开始 -->
		<view class="swiper-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="false" :interval="0"
				:duration="0">
				<swiper-item v-for="item in swipers" :key="item.id" @click="tolink(item)">
					<view class="swiper-item">
						<image style="height: 290rpx;width: 100%;border-radius: 18rpx;" :mode="'aspectFill'"
							:lazy-load="true" :src="item.advertisImage"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图结束 -->

		<!-- 车辆信息展示开始 -->
		<view class="card-info u-f u-f-jcc">
			<view class="left" @click="goToAddCar">
				<view class="car-num u-f u-f-aic u-f-fdr fs32 fw400 mg-right-26">
					<text>{{ JSON.stringify(carInfo) !== '{}' ? carInfo.plateNo.slice(0, 2) + ' ' + carInfo.plateNo.slice(2): '添加爱车' }}</text>
					<image class="right-arrow" src="/static/common/big_gray_right_arrow.png" mode=""></image>
				</view>
				<view class="light-gray fs28">
					{{ JSON.stringify(carInfo) !== '{}' ? carInfo.vehicleBrand + ' ' +carInfo.year + ' ' +carInfo.vehicleModel + ' ' + carInfo.vehicleConfig + ' ' + (carInfo.carType === 1 ? '柴油版' : '能源版') : '添加您的爱车，享受尊享服'}}
				</view>
			</view>
			<view class="right u-f u-f-aic u-f-jcc">
				<image :src="carInfo.brandLogo" class="car-pic" v-if="JSON.stringify(carInfo) !== '{}'"
					mode="heightFix"></image>
				<image src="../.././static/common/default_car.png" class="default-car-pic" v-else></image>
			</view>
		</view>
		<!-- 车辆信息展示结束 -->

		<!-- 功能展示开始 -->
		<view class="func-show u-f u-f-aic u-f-fww">
			<view class="show-item u-f u-f-aic u-f-fdc" v-for="item in storeTypeInfoVOList" :key="item.id"
				@click="jumpFunShowDetail(item)">
				<image class="show-pic" :src="item.picture"></image>
				<text class="show-desc fs24">{{ item.name }}</text>
			</view>

		</view>
		<!-- 功能展示结束 -->

		<!-- 推荐门店开始 -->
		<view class="rec-shop">
			<view class="rec-show-title u-f u-f-jcsb" @click="goToShop">
				<view class="left fs32 fw700">
					<text style="font-weight: bold;">推荐门店</text>
				</view>
				<view class="right u-f u-f-aic">
					<view class="light-gray mg-right-10 fs24 fw400">更多</view>
					<image class="right-arrow" src="/static/common/big_gray_right_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="rec-show-desc u-f u-f-aic u-f-jcsb" @click="goToShopDetail">
				<view class="left u-f u-f-aic">
					<view class="lf-content">
						<image class="border-radius-9" mode="aspectFill" :src="recStore.storeLogo"
							style="width: 146rpx;height: 146rpx;"></image>
					</view>
					<view class="rt-content">
						<view class="shop-name fs28 fw400">{{recStore.storeName}}</view>
						<view class="u-f u-f-aic">
							<image style="width: 30rpx;height: 30rpx;" src="/static/common/star.png"
								v-for="i in recStore.score==0?5:recStore.score" :key="i" mode="">
							</image>
							<view style="color: #F2CB51;font-size: 24rpx;">{{recStore.score==0?5:recStore.score}}.0分
							</view>
						</view>
						<view class="mg-top-24 fs24 one-line-ellipsis">
							<text class="light-black">{{recStore.distance}}km | </text>
							<text class="light-gray">{{recStore.address}}</text>
						</view>
					</view>
				</view>
				<view class="right u-f u-f-fdc u-f-aife">
					<image class="plane" src="/static/common/plane.png" mode=""></image>
					<view class="total-sell fs24 fw400">总售 {{recStore.totalSales}}</view>
				</view>
			</view>
		</view>
		<!-- 推荐门店结束 -->

		<!-- 团购商品开始 -->
		<view class="group-bug-product" @click="jumpFunShowDetail({name: '团购商品'})"
			v-if="JSON.stringify(groupProduct) !== 'null'">
			<view class="product-title u-f u-f-jcsb fs32">
				<view class="left u-f">
					<view>团购商品</view>
					<view class="white-btn u-f u-f-aic fs24">本场还剩 {{groupProduct?groupProduct.remainingTime:''}}</view>
				</view>
				<view class="right">
					<view class="white-btn u-f u-f-aic fs24">
						<view class="mg-right-12">去逛逛</view>
						<image src="/static/common/hight_right_arrow.png" class="s-h-right-arrow"></image>
					</view>
				</view>
			</view>
			<view class="product-info u-f" v-if="groupProduct">
				<view class="left">
					<image :src="groupProduct?groupProduct.goodsImage:''"></image>
				</view>
				<view class="right">
					<view class="product-name fs28 fw400 one-line-ellipsis">{{groupProduct?groupProduct.goodsName:''}}
					</view>
					<view class="join-group-person">
						<text
							class="main-title-btn fs18 fw400">{{groupProduct?groupProduct.clusteringNum:''}}人可成团</text>
					</view>
					<view class="join-group-progress u-f u-f-aic">
						<view class="progress-wrap">
							<progress :percent="groupProductProgress" stroke-width="3" activeColor="#FF4502" />
						</view>
						<view class='join-group-person fs24 fw400'>已团{{groupProduct.groupNumbered}}人</view>
					</view>
					<view class="product-price u-f u-f-jcsb">
						<view class="left u-f u-f-aic">
							<view class="old-price fs24">
								<text>￥</text>
								<text
									class="fw600 fs28">{{groupProduct.groupBuyingPrice?groupProduct.groupBuyingPrice.split('.')[0]:''}}</text>
								<text>.{{groupProduct.groupBuyingPrice?groupProduct.groupBuyingPrice.split('.')[1]:''}}</text>
							</view>
							<view class="new-price fs24">
								<text>￥</text>
								<text>{{groupProduct.originalPrice}}</text>
							</view>
						</view>
						<view class="right u-f u-f-jcfe u-f-aic">
							<text class="main-color-small-btn fs26">
								去成团
							</text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 团购商品结束 -->

		<!-- 精品推荐开始 -->
		<view class="good-recomend">
			<view class="gr-title u-f u-f-aic u-f-jcc">
				<view class="left-line mg-right-16"></view>
				<view class="fw600 fs32 main-color mg-right-16">精品推荐</view>
				<view class="right-line"></view>
			</view>
			<view class="product-list u-f u-f-fww">
				<view v-for="item in storeGoodsList" :key="item.id" class="product-wrap u-f u-f-aic u-f-jcsb u-f-fww"
					@click="goPrductDetail(item)">
					<view class="product-card u-f u-f-fdc">
						<image style="width: 100%;height: 288rpx;border-radius: 18rpx 18rpx 0rpx 0rpx;"
							:mode="'scaleToFill'" :src="item.goodsImage"></image>
						<view class="pc-desc fw400 fs28 mg-top-10 one-line-ellipsis">
							{{item.goodsName}}
						</view>
						<view class="pc-price">
							<text class="fs24">￥</text>
							<text class="fs28 fw600">{{item.goodsPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 精品推荐结束 -->

		<!-- 广告栏开始 -->
		<view class="advertising" v-if="JSON.stringify(botPic) !== '{}'">
			<image mode="aspectFill" :src="botPic.advertisImage" style="border-radius: 9rpx;"></image>
		</view>
		<!-- 广告栏结束 -->

		<!-- 系统消息通知开始 -->
		<uni-popup :position="'middle'" :show="showNotify" @hidePopup="handleHideNotify">
			<view class="notify-message" @touchmove.stop="moveStop">
				<!-- <image class="bg-image" src="../.././static/common/sys-mes-nofity.png"
					style="width: 579rpx;height: 100%;" :mode="'widthFix'"></image> -->
				<view class="ct-info">
					<scroll-view scroll-y="true" :show-scrollbar="false" style="height: 580rpx;">
						<view>
							<!-- style="margin: 0 10rpx;" -->
							<rich-text :nodes="systemNotifyInfo.content"></rich-text>
						</view>
					</scroll-view>
				</view>
				<view class="check-detail color-white u-f u-f-aic u-f-jcc" @click="checkDetail">查看详情</view>
			</view>
		</uni-popup>
		<!-- 系统消息通知结束 -->

		<!-- 用户协议与隐私政策开始 -->
		<uni-popup :position="'bottom'" class="updatePopup" :show="showUserAgent" @hidePopup="handleAgentAgree(2)">
			<view class="sys-mes-nofity u-f u-f-fdc">
				<view class="gray-close fw70" @click="handleAgentAgree(2)">
					<image style="width: 100%;height: 100%;" src="../.././static/common/gray_close.png"></image>
				</view>
				<view class="top mg-bot-20">
					<text class="fw32 fw600 light-blac">{{userAgentInfo.ruleTitle}}</text>
				</view>
				<view class="content fs24 light-black">
					<scroll-view scroll-y="true" :show-scrollbar="false" style="height: 800rpx;">
						<view style="text-align: left;">
							<rich-text style="font-size: 24rpx;color: #333333;"
								:nodes="userAgentInfo.ruleContent"></rich-text>
							<view style="height: 100rpx;width: 100%"></view>
						</view>
					</scroll-view>
				</view>
				<view class="bot" style="background-color: #ffffff;">
					<view class="u-f u-f-jcc u-f-aic">
						<view class="u-f u-f-jcsb u-f-aic" style="width: calc(100% - 48rpx);">
							<view class="agree-btn" style="width: calc(50% - 10rpx);" @click="handleAgentAgree(1)">同意
							</view>
							<view class="disagree-btn" style="width: calc(50% - 10rpx);" @click="handleAgentAgree(2)">
								不同意</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!--  用户协议与隐私政策结束 -->

	</view>
</template>

<script>
	import uniNavBar from "../.././components/uni-nav-bar/uni-nav-bar.vue"
	import uniPopup from "../.././components/uni-popup/uni-popup.vue"
	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	export default {
		data() {
			return {
				swipers: [],
				cars: [],
				showPopup: false,
				paddingTop: 0,
				city: '定位中',
				lat: 0,
				lng: 0,
				recStore: {},
				groupProduct: {},
				storeGoodsList: [],
				storeTypeInfoVOList: [],
				carInfo: {},
				botPic: '',
				timer: null,
				showNotify: false,
				showUserAgent: false,
				userAgentInfo: {},
				systemNotifyInfo: {},
				messageNum: 0,
				value: 3
			}
		},
		components: {
			uniNavBar
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
		},
		computed: {
			groupProductProgress() {
				return this.groupProduct.groupNumbered / this.groupProduct.clusteringNum * 100
			}
		},
		onLoad() {
			this.getSwiper()
			this.getLocation()
			this.getRecInfo()
		},
		onShow() {
			if (this.User.token) {
				this.getCarInfo()
				this.getMessageNum()
				this.getUserInfo()
			}
			this.getBotPic()
			this.getCurCity()
			this.handleShowUserAgent()
			this.handleShowNotify();
			this.getRecStoreOne();
		},
		onShareAppMessage(res) {
			return {
				title: '蚂蚁车生活', // 分享出去的标题
				path: '/pages/index/index' // 分享出去的页面路径
			}
		},
		onShareTimeline() {
			return {
				title: '蚂蚁车生活', // 分享出去的标题
			}
		}, // 像这样不配置也行,都有默认值
		onHide() {
			clearInterval(this.timer)
		},

		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			//个人中心-个人信息
			getUserInfo() {
				this.$http.get('/api/client/userInfo/info').then(res => {
					this.userInfo = res.data.data
					this.User.setUserInfo(this.userInfo)
				})
			},
			async getSwiper() {
				let res = await this.$http.get('/api/client/index/carousel?type=2')
				let swiper = res.data.data
				this.swipers = swiper
			},

			//首页车辆
			async getCarInfo() {
				let res = await this.$http.get('/api/client/index/carInfo', )
				let carInfo = res.data.data
				if (carInfo && carInfo.id) {
					uni.setStorageSync('cartId', this.carInfo.id)
				}
				this.carInfo = carInfo || {}
			},

			async getRecInfo() {
				let res = await this.$http.get('/api/client/index/storeAndGoods')
				let {
					storeTypeInfoVOList,
					storeGoodsList,
					groupProduct
				} = res.data.data
				this.storeTypeInfoVOList = storeTypeInfoVOList;
				this.storeGoodsList = storeGoodsList;
				this.groupProduct = groupProduct;
				this.startCountdown()
			},
			async getLocation() {
				try {
					let res = await uni.getLocation({
						type: 'wgs84'
					})

					let lat = res.latitude
					let lng = res.longitude

					this.setLocation(lat, lng)
				} catch (e) {
					// console.error("获取位置信息失败：", e);
				}
			},
			async getRecStoreOne() {
				let data = {

				}
				let res = await this.$http.get('/api/client/index/recommendedStore', data)
				let recStore = res.data.data
				this.recStore = recStore
			},
			async getRecStore() {
				let data = {
					"lat": this.lat,
					"lng": this.lng
				}

				let res = await this.$http.get('/api/client/index/recommendedStore', data)
				let recStore = res.data.data
				this.recStore = recStore
			},
			async getCity() {
				let data = {
					"lat": this.lat,
					"lng": this.lng
				}

				let res = await this.$http.get('/api/client/index/getLocation', data)
				let cityInfo = res.data.data
				this.User.setCurCity(cityInfo)
			},
			async getBotPic() {
				let res = await this.$http.get('/api/client/index/carousel?type=4')
				let resData = res.data.data || []
				this.botPic = resData[0] || {}
			},
			async getUserAgent() {
				let res = await this.$http.get('/api/client/rule/selectRuleByType?ruleType=' + 'user_agreement')
				let resData = res.data.data || {}
				this.userAgentInfo = resData
				this.userAgentInfo.ruleContent = this.userAgentInfo.ruleContent

			},
			async getSystemNotify() {
				let res = await this.$http.get('/api/client/notice/pushNotice', {}, {
					token: true,
					checkToken: true
				})
				let resData = res.data.data || {}
				this.systemNotifyInfo = resData
				if (this.systemNotifyInfo.content) {
					this.systemNotifyInfo.content = this.systemNotifyInfo.content.replace(/\<img/gi,
						'<img style="max-width:100% !important;height:auto !important" ')
				}
				if (this.systemNotifyInfo.content.length != 0) {
					this.showNotify = true
				}

			},
			async getMessageNum() {
				let res = await this.$http.get('/api/client/index/messageNum', {}, {
					token: true,
					checkToken: true
				})
				let resData = res.data.data || 0
				this.messageNum = resData
			},
			confirm() {},
			handleClickLeft() {
				uni.navigateTo({
					url: '/pagesF/choice-city/choice-city'
				})
			},
			handleClickInput() {
				uni.navigateTo({
					url: '/pagesD/search/search'
				})
			},
			handleClickRight() {
				uni.navigateTo({
					url: '/pagesE/message-center/message-center'
				})
			},
			handleHidePopup() {
				this.showPopup = false;
			},
			checkDetail() {
				this.handleHideNotify()
				uni.navigateTo({
					url: '/pagesE/message-center/message-center'
				})
			},
			goToShopDetail() {
				uni.navigateTo({
					url: '/pagesC/shop-detail/shop-detail'
				})
			},
			goToAddCar() {
				if (JSON.stringify(this.carInfo) == '{}') {
					uni.navigateTo({
						url: '/pagesA/add-car/add-car'
					})
				} else {
					uni.navigateTo({
						url: '/pagesA/my-garage/my-garage'
					})
				}
			},
			tolink(item) {
				if (item.jumpType == 1) {
					//公众号
					uni.navigateTo({
						url: '/pages/link/link?url=' + item.jumpResources
					})
				} else if (item.jumpType == 2) {
					//小程序
					uni.navigateTo({
						url: item.jumpResources,
						fail: () => {
							uni.switchTab({
								url: item.jumpResources
							})
						}
					})

					// uni.navigateToMiniProgram({
					// 	shortLink: item.jumpResources,
					// 	envVersion: 'trial',
					// 	success(res) {
					// 		// 打开成功
					// 		console.log("跳转小程序成功！", res);
					// 	}
					// })


					// uni.navigateToMiniProgram({
					// 	appId: item.jumpResources, // 小程序appid
					// 	path: 'pages/index/index', // 打开的页面路径，可选
					// 	extraData: {
					// 		// 需要传递给小程序的数据，可选
					// 	},
					// 	success(res) {
					// 		// 打开成功的回调，可选
					// 		console.log('跳转成功');
					// 	},
					// 	fail(err) {
					// 		// 打开失败的回调，可选
					// 		console.log('跳转失败', err);
					// 	}
					// });
				} else if (item.jumpType == 4) {
					//链接
					uni.navigateTo({
						url: '/pages/link/link?url=' + encodeURIComponent(JSON.stringify(item.jumpResources))
					})
				} else if (item.jumpType == 5) {
					uni.navigateToMiniProgram({
						shortLink: item.jumpResources,
						success(res) {
							// 打开成功
							console.log("跳转小程序成功！", res);
						}
					})
				}
			},
			jumpFunShowDetail(item) {
				switch (item.name) {
					case "配件修换":
						uni.setStorageSync('isShowBindCarPop3', 1)
						this.User.navigate({
							url: "/pagesE/maintenance/maintenance?id=" + item.id
						}, "navigateTo", true);
						break;

					case "日常保养":
						uni.setStorageSync('isShowBindCarPop2', 1)
						this.User.navigate({
							url: "/pagesE/daily/daily?id=" + item.id
						}, "navigateTo", true);
						break;

					case "升级配置":
						uni.setStorageSync('isShowBindCarPop1', 1)
						this.User.navigate({
							url: "/pagesE/upgradeConfiguration/upgradeConfiguration?id=" + item.id
						}, "navigateTo", true);
						break;

					case "维修保养":
						this.User.navigate({
							url: "/pagesE/maintenance/maintenance?id=" + item.id
						}, "navigateTo", true);
						break;

					case "洗车美容":
						this.User.navigate({
							url: "/pagesF/car-beauty/car-beauty?id=" + item.id
						}, "navigateTo", true);
						break;
					case "加油充电":
						this.User.navigate({
							url: "/pagesF/add-oil/add-oil?id=" + item.id
						}, "navigateTo", true);
						break;
					case "保险救援":
						this.User.navigate({
							url: `/pagesA/insurance-rescue/insurance-rescue?id=${item.id}`
						}, "navigateTo", true);
						break;
					case "二手车":
						this.User.navigate({
							url: `/pagesA/ershou-car/ershou-car?id=${item.id}`
						}, "navigateTo", true);
						break;
					case "车检验车":
						this.User.navigate({
							url: `/pagesA/check-car/check-car?id=${item.id}`
						}, "navigateTo", true);
						break;
					case "团购商品":
						this.User.navigate({
							url: "/pagesC/tugou-goods/tugou-goods"
						}, "navigateTo", true);
						break;
				}
			},
			goToShop() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goPrductDetail(item) {
				this.User.navigate({
					url: "/pagesB/good-product-detail/good-product-detail?id=" + item.id + '&storeId=' + item
						.storeId
				});
			},
			getCurCity() {
				if (this.city !== this.User.curcity.name && this.User.curcity.name) {
					if (this.User.curcity.name.length >= 3) {
						this.city = this.User.curcity.name.substring(0, 3);
					} else {
						this.city = this.User.curcity.name || '';
					}
					this.setLocation(this.User.curcity.lat, this.User.curcity.lng)
				}
			},
			setLocation(lat, lng) {
				this.lat = lat;
				this.lng = lng;
				this.getRecStore();
				this.getCity();
			},
			goToShopDetail() {
				this.User.navigate({
					url: "/pagesC/shop-detail/shop-detail?id=" + this.recStore.storeId
				}, "navigateTo", true);
			},

			// 更新所有商品的倒计时
			startCountdown() {
				if (!this.groupProduct) {
					return
				}

				this.timer = setInterval(() => {
					// 解析剩余时间
					let timeParts = this.groupProduct.remainingTime.split(':');
					// console.log(timeParts);
					let hours = parseInt(timeParts[0], 10);
					let minutes = parseInt(timeParts[1], 10);
					let seconds = parseInt(timeParts[2], 10);

					// 如果时间还未结束
					if (hours > 0 || minutes > 0 || seconds > 0) {
						// 每秒减少1秒
						seconds -= 1;

						// 如果秒数变为负数，调整分钟和小时
						if (seconds < 0) {
							seconds = 59;
							minutes -= 1;
						}
						if (minutes < 0) {
							minutes = 59;
							hours -= 1;
						}

						// 更新倒计时
						this.groupProduct.remainingTime = this.formatTime(hours, minutes, seconds);
					}
				}, 1000);
			},

			// 格式化时间：将小时、分钟、秒格式化为 "时:分:秒"
			formatTime(hours, minutes, seconds) {
				return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			},
			// 格式化数字，确保两位数显示
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},
			splitPriceByDecimalPoint(priceStr) {
				// 确保传入的是字符串，并且包含小数点
				if (typeof priceStr !== 'string' || !priceStr.includes('.')) {
					return null;
				}

				// 使用split方法按小数点分割字符串
				const parts = priceStr.split('.');

				// 返回分割后的整数部分和小数部分
				return {
					integerPart: parts[0],
					decimalPart: parts[1]
				};
			},
			handleShowNotify() {
				if (this.User.token && this.User.agreeagent && !this.User.sysnotify) {
					this.getSystemNotify()
				}
			},
			handleHideNotify() {
				this.showNotify = false
				this.User.setSysNotify(true)
			},
			handleShowUserAgent() {
				if (this.User.token && !this.User.agreeagent) {
					this.showUserAgent = true
					uni.hideTabBar()
					this.getUserAgent()
				}
			},
			handleHideUserAgent() {
				this.showUserAgent = false
			},
			setAgreeAgent() {
				this.User.setAgreeAgent(true)
			},
			handleAgentAgree(num) {
				if (num == 1) {
					// 同意
					this.handleHideUserAgent()
					this.setAgreeAgent(true)
					uni.showTabBar()
					this.handleShowNotify()
				} else {
					// 不同意
					this.setAgreeAgent(false)
					this.User.navigate({
						url: "/pages/login/login"
					})
				}
			},
			moveStop() {}
		}
	}
</script>

<style>
	page {
		background-color: #FAFAF8;
	}
</style>

<style lang="scss" scoped>
	$nav-height: 68rpx;

	// .index :deep(.uni-navbar__header) {
	// 	min-width: 100%;
	// }

	.index :deep(.uni-navbar__header-btns-left) {
		min-width: 120rpx !important;
	}

	.index :deep(.uni-navbar__header-container) {
		// min-width: 160rpx !important;
		flex: 1;
	}

	.index :deep(.uni-navbar__header-btns-right) {
		width: 10rpx !important;
	}

	.index :deep(.input-view) {
		// width: 300rpx;
	}

	.location {
		color: red;
	}

	.city {
		.city-location {
			width: 30rpx;
			height: 30rpx;
			background-size: 100%;
			margin-right: 7rpx;
		}

		.city-name {
			color: #333333;
			display: block;
			font-size: 28rpx;
		}
	}

	.input-view {
		background-color: #ffffff;
		border: 0.5rpx solid #333333;
		height: 60rpx;
		line-height: $nav-height;
		border-radius: 34rpx;
		padding: 0 15px;

		.search-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.nav-bar-input {
		height: 100%;
		padding: 0 5px;
		font-size: 12px;
	}

	.info {
		width: 52rpx;
		height: 52rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		background-color: seashell;
		position: relative;
		background: url(../.././static/common/message.png) no-repeat center center;
		background-size: 100%;

		.num {
			position: absolute;
			right: -10rpx;
			top: -10rpx;
			width: 38rpx;
			height: 22rpx;
			line-height: 22rpx;
			background-color: #FF4502;
			text-align: center;
			vertical-align: middle;
			color: #ffffff;
			border-radius: 12rpx;
			border: 1rpx solid #ffffff;
		}
	}

	.swiper-wrap {
		margin: 20rpx 24rpx;

		.swiper {
			.swiper-item {

				border-radius: 18rpx;
			}
		}
	}

	.card-info {
		margin: 0 24rpx;
		margin-bottom: 22rpx;
		padding: 24rpx 20rpx;
		background: linear-gradient(180deg, #FFF0EA 0%, #FFFFFF 100%);
		box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(217, 217, 217, 0.2);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		border: 2rpx solid #FFFFFF;

		.left {
			flex: 3;

			.car-num {
				color: #333333;
				margin-bottom: 14rpx;

				.right-arrow {
					width: 11rpx;
					height: 19rpx;
					background-size: 100%;
					margin-left: 15rpx;
				}
			}
		}

		.right {
			flex: 1;

			.car-pic {
				width: 108rpx;
				height: 80rpx;
			}

			.default-car-pic {
				width: 250rpx;
				height: 130rpx;
			}
		}
	}

	.func-show {
		.show-item {
			flex: 25%;
			margin-bottom: 28rpx;

			.show-pic {
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 10rpx;
			}

			.show-desc {
				color: #333333;
			}
		}
	}

	.rec-shop {
		margin: 20rpx 24rpx;
		padding: 0 20rpx;
		background-color: #ffffff;
		border-radius: 18rpx;

		.rec-show-title {
			padding: 20rpx;
			border-bottom: 1rpx solid #F0F0F0;

			.left {
				color: #333333;
			}

			.right {
				.right-arrow {
					width: 12rpx;
					height: 19rpx;
					// background: url(../.././static/common/small_gray_right_arrow.png) no-repeat center center;
					background-size: 100%;
				}
			}
		}

		.rec-show-desc {
			padding: 20rpx;

			.left {
				.lf-content {
					margin-right: 10rpx;

					image {
						width: 146rpx;
						height: 146rpx;
					}
				}

				.rt-content {
					width: 350rpx;

					.shop-name {
						color: #333333;
						margin-bottom: 10rpx;
					}
				}
			}

			.right {
				width: 150rpx;
				text-align: center;

				.plane {
					width: 52rpx;
					height: 52rpx;
					background-size: 100%;
				}

				.total-sell {
					color: #999999;
					margin-top: 10rpx;
				}
			}
		}

	}

	.group-bug-product {
		padding: 20rpx;
		margin: 0 24rpx;
		background: linear-gradient(89deg, #FF4502 0%, #FF8903 100%);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin-bottom: 30rpx;

		.product-title {
			padding-bottom: 20rpx;

			.left {
				color: #ffffff;

				view {
					margin-right: 18rpx;
				}
			}

			.right {
				.white-btn {
					.s-h-right-arrow {
						width: 12rpx;
						height: 19rpx;
					}
				}
			}
		}

		.product-info {
			background-color: #ffffff;
			padding: 20rpx 16rpx 16rpx 30rpx;
			border-radius: 18rpx;

			.left {
				flex: 1;
				margin-right: 10rpx;

				image {
					width: 180rpx;
					height: 180rpx;
				}
			}

			.right {
				flex: 2;

				.product-name {
					color: #333333;
				}

				.join-group-person {
					.main-title-btn {
						padding: 6rpx 12rpx;
						background: #FFF6F3;
						border-radius: 9rpx 4rpx 9rpx 2rpx;
						border: 1rpx solid #FFD0BF;
						color: #FF4502;
						margin-top: 16rpx;
					}
				}

				.join-group-progress {
					margin-bottom: 28rpx;

					.progress-wrap {
						flex: 2;
						margin-right: 10rpx;
					}

					.join-group-person {
						color: #FF4502;
					}
				}

				.product-price {
					.left {
						.old-price {
							margin-right: 10rpx;
							color: #FF4502;
						}

						.new-price {
							color: #999999;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}

	.white-btn {
		background-color: #ffffff;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		color: #FF4502;
	}

	.main-color-small-btn {
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 24rpx;
		color: #ffffff;
	}

	.good-recomend {
		.gr-title {
			margin-bottom: 26rpx;

			.left-line {
				width: 165rpx;
				height: 4rpx;
				background: url(../.././static/common/l_recom.png) no-repeat center center;
			}

			.center-title {
				color: #FF4502;
				margin-right: 16rpx;
			}

			.right-line {
				width: 165rpx;
				height: 4rpx;
				background: url(../.././static/common/r_recom.png) no-repeat center center;
			}

		}

		.product-list {
			margin: 0 24rpx;

			.product-wrap {
				width: calc(50% - 10rpx);
				margin-bottom: 20rpx;
				margin-right: 15rpx;

				&:nth-child(2n) {
					margin-right: 0;
				}

				.product-card {
					flex: 1;
					border-radius: 18rpx;
					background-color: #ffffff;

					.pc-image {
						width: 340rpx;
						height: 340rpx;
						border-radius: 18rpx 0;
						background-color: #ffffff;
					}

					.pc-desc {
						color: #333333;
						padding: 0 10rpx;

					}

					.pc-price {
						margin: 10rpx 0;
						color: #FF4502;
						padding: 0 10rpx;
					}
				}
			}
		}
	}

	.sys-mes-nofity {
		height: 100%;
		padding-top: 37rpx;
		position: relative;
		width: 100%;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;

		.gray-close {
			position: absolute;
			right: 28rpx;
			top: 28rpx;
			width: 42rpx;
			height: 42rpx;
		}

		.content {
			padding: 10rpx 24rpx;
		}

		.bot {
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			padding-bottom: 18rpx;
			padding-top: 10rpx;
			margin-bottom: 40rpx;
		}
	}

	.advertising {
		margin: 20rpx 24rpx 24rpx 24rpx;
		padding-bottom: 24rpx;
		height: 262rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.index {
		position: relative;

		.top-bgc {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 420rpx;
			// background: linear-gradient( 180deg, #FFF0EA 0%, #FFFFFF 100%);
		}

		.bg-navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background-color: #FDEEE5;
			z-index: 10;
		}
	}

	.updatePopup :deep(.uni-popup-bottom) {
		height: 944rpx;
		border-radius: 40rpx 40rpx 0 0;
	}

	.agree-btn {
		padding: 18rpx 0;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		border-radius: 41rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.disagree-btn {
		padding: 17rpx 0;
		background: #FFFFFF;
		font-weight: 400;
		font-size: 28rpx;
		border-radius: 41rpx;
		border: 1rpx solid #707070;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.notify-message {
		position: relative;
		// width: 579rpx;
		// height: 758rpx;
		width: 624rpx;
		height: 672rpx;
		background: #FFF6F2;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
		}

		.ct-info {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 580rpx;
			// padding: 10rpx 20rpx;
		}

		.check-detail {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 92rpx;
			line-height: 92rpx;
			border-top: 1rpx solid #CFAD9F;
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: bold;
			font-size: 32rpx;
			color: #FF4502;
			width: 100%;
			// padding: 26rpx 204rpx;
			// background-color: #FF8555;
			// border-radius: 44rpx 44rpx 44rpx 44rpx;
		}
	}

	/* 弹框的CSS样式 */
	.rich-box {
		/* 设置弹框的样式 */
	}

	.rich-text {
		text-align: left !important;
		/* 设置文本居左 */
	}
</style>