<template>
	<div class="container" style="background: #fff;">
		<menu-modal></menu-modal>

		<div class="main-container" id="scroll-area">
			<!-- 顶部轮播图 -->
			<banner
				:list="bannerList"
				:looptime="looptime"
				:width="width"
				:height="height"
				:background="background"
				:color="color"
				:fontSize="fontSize"
				@prev="prev"
				@next="next"
				@change="changeBanner"
				@click="bannerClick"
				class="mb-50"
			></banner>

			<!-- 精选房车游 -->
			<div class="flex-fdc-jcc" style="background: #fff;">
				<div class="choiceness">
					<div class="tc title">
						精选房车游
						<span style="font-size: 16px;margin: 0 5px;">●</span> 说走就走的房车之旅
					</div>
					<div class="flex-aic-jcb more-container">
						<div style="width: 1070px;text-align: center">
							<div class="line-title"></div>
						</div>
						<nuxt-link to="/tour?tagIds=">
							<div>
								MORE
								<!-- <img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" /> -->
								<i class="iconfont iconsingle_arrow"></i>
							</div>
						</nuxt-link>
					</div>

					<div class="choiceness-type">
						<p style="text-align:center;font-size:22px;font-weight: bold;padding-top:22px">房车游</p>
						<ul>
							<li v-for="(item,index) in hotCircuit" :key="index">
								<nuxt-link :to="'/tour?tagIds='+item.id">{{item.name}}</nuxt-link>
							</li>
						</ul>
						<img class="idnexCar" src="https://mgmt.dfangche.com/xxfccn/image/home/indexCar.png" alt />
					</div>
					<div class="choiceness-content">
						<div class="flex-aic-jca min-win-hc" style="justify-content: space-between;">
							<div :class="{'tour-t':true,tourActive:isTourActive == 1}" @click="choose(1)">
								<div>
									<div class="tour-t-s">01</div>
									<div class="tour-t-s-b"></div>
								</div>
								<div style="margin-left: 12px;">
									<div class="tour-t-s-t">热门路线</div>
									<div class="ft-12">打造轻松的房车旅行</div>
								</div>
							</div>
							<div :class="{'tour-t':true,tourActive:isTourActive == 2}" @click="choose(2)">
								<div>
									<div class="tour-t-s">02</div>
									<div class="tour-t-s-b"></div>
								</div>
								<div style="margin-left: 12px;">
									<div class="tour-t-s-t">特色旅游</div>
									<div class="ft-12">特色旅游线路</div>
									<!-- <div class="ft-12">个性化服务</div> -->
								</div>
							</div>
							<div :class="{'tour-t':true,tourActive:isTourActive == 3}" @click="choose(3)">
								<div>
									<div class="tour-t-s">03</div>
									<div class="tour-t-s-b"></div>
								</div>
								<div style="margin-left: 12px;">
									<div class="tour-t-s-t">新开辟路线</div>
									<div class="ft-12">欣新领队全程陪同</div>
									<!-- <div class="ft-12">打造轻松的房车旅行</div> -->
								</div>
							</div>
							<div :class="{'tour-t':true,tourActive:isTourActive == 4}" @click="choose(4)">
								<div>
									<div class="tour-t-s">04</div>
									<div class="tour-t-s-b"></div>
								</div>
								<div style="margin-left: 12px;">
									<div class="tour-t-s-t">推荐路线</div>
									<div class="ft-12">全天为您服务</div>
									<!-- <div class="ft-12">全天为您服务</div> -->
								</div>
							</div>
						</div>
						<!-- 热门线路 -->
						<div
							style="position: relative;margin-top: 14px;"
							v-show="tourList.length>0 && isTourActive == isTourActive"
						>
							<div style="display: flex;">
								<nuxt-link
									:to="/tourDetails/+ hotlist[isTourActives][0].id"
									v-if="hotlist[isTourActives].length>0"
								>
									<div class="tour-t-l-00">
										<img :src="hotlist[isTourActives][0].imgUrl" style="width: 454px;height: 348px;" />
										<div class="show-detail" style="width: 454px;height: 348px;">
											<p class="tour-t-l-00-title">{{hotlist[isTourActives][0].name}}</p>
											<span class="tour-detail" style="border: 1px solid #fff;">
												查看详情
												<i class="iconfont iconsingle_arrow"></i>
											</span>
										</div>
									</div>
								</nuxt-link>

								<div
									style="margin-left: 9px;width: 518px;justify-content: space-between;display: flex;margin-bottom: 5px;"
								>
									<nuxt-link
										:to="/tourDetails/+ hotlist[isTourActives][1].id"
										v-if="hotlist[isTourActives].length>1"
									>
										<div class="tour-t-r-01">
											<img :src="hotlist[isTourActives][1].imgUrl" style="width: 226px;height: 160px;" />
											<div class="show-detail" style="width: 226px;height: 160px;">
												<p class="tour-t-l-00-title">{{hotlist[isTourActives][1].name}}</p>
												<span class="tour-detail" style="border: 1px solid #fff;">
													查看详情
													<i class="iconfont iconsingle_arrow"></i>
												</span>
											</div>
										</div>
									</nuxt-link>
									<nuxt-link
										:to="/tourDetails/+ hotlist[isTourActives][2].id"
										v-if="hotlist[isTourActives].length>2"
									>
										<div class="tour-t-r-02">
											<img :src="hotlist[isTourActives][2].imgUrl" style="width: 226px;height: 160px;" />
											<div class="show-detail" style="width: 226px;height: 160px;">
												<p class="tour-t-l-00-title">{{hotlist[isTourActives][2].name}}</p>
												<span class="tour-detail" style="border: 1px solid #fff;">
													查看详情
													<i class="iconfont iconsingle_arrow"></i>
												</span>
											</div>
										</div>
									</nuxt-link>
								</div>
							</div>
							<div style="display: flex;margin-top: 5px;">
								<div style="width: 455px;justify-content: space-between; display: flex;">
									<nuxt-link
										:to="/tourDetails/+ hotlist[isTourActives][3].id"
										v-if="hotlist[isTourActives].length>3"
									>
										<div class="tour-t-l-03">
											<img :src="hotlist[isTourActives][3].imgUrl" style="width: 222px;height: 160px;" />
											<div class="show-detail" style="width: 222px;height: 160px;">
												<p class="tour-t-l-00-title">{{hotlist[isTourActives][3].name}}</p>
												<span class="tour-detail" style="border: 1px solid #fff;">
													查看详情
													<i class="iconfont iconsingle_arrow"></i>
												</span>
											</div>
										</div>
									</nuxt-link>
									<nuxt-link
										:to="/tourDetails/+ hotlist[isTourActives][4].id"
										v-if="hotlist[isTourActives].length>4"
									>
										<div class="tour-t-l-04">
											<img :src="hotlist[isTourActives][4].imgUrl" style="width: 224px;height: 160px;" />
											<div class="show-detail" style="width: 224px;height: 160px;">
												<p class="tour-t-l-00-title">{{hotlist[isTourActives][4].name}}</p>
												<span class="tour-detail" style="border: 1px solid #fff;">
													查看详情
													<i class="iconfont iconsingle_arrow"></i>
												</span>
											</div>
										</div>
									</nuxt-link>
								</div>
								<nuxt-link
									:to="/tourDetails/+ hotlist[isTourActives][5].id"
									v-if="hotlist[isTourActives].length>5"
								>
									<div class="tour-b-r-05">
										<img
											:src="hotlist[isTourActives][5].imgUrl"
											style="width: 459px;height: 348px;position: absolute; top: 170px;left: 463px;"
										/>
										<div class="show-detail" style="width:459px">
											<p class="tour-t-l-00-title">{{hotlist[isTourActives][4].name}}</p>
											<span class="tour-detail" style="border: 1px solid #fff;">
												查看详情
												<i class="iconfont iconsingle_arrow"></i>
											</span>
										</div>
									</div>
								</nuxt-link>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 热门房车,多款房车任你选择 -->
			<div class="flex-fdc-jcc hot-car" style="margin-top:80px;padding-bottom:80px">
				<div class="tc title" style="color: #fff;">
					热门房车
					<span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择
				</div>
				<div class="flex-aic-jcb more-container" style="width:1120px">
					<div style="width: 1120px;text-align: center">
						<div class="line-title"></div>
					</div>
					<nuxt-link to="vehicle?types=">
						<div>
							MORE
							<i class="iconfont iconsingle_arrow"></i>
						</div>
					</nuxt-link>
				</div>
				<div class="min-win">
					<ul class="v-type-ul">
						<li class="v-type" :class="tabIndex == 0 ? 'hotActiveBtn' : ''" @click="chooseHot(0)">房车租赁</li>
						<li
							style="margin-right:40px;"
							class="v-type"
							:class="tabIndex == 1 ? 'hotActiveBtn' : ''"
							@click="chooseHot(1)"
						>房车会员</li>
					</ul>

					<div class="left" v-if="tabIndex == 0">
						<ul>
							<li>
								<div class="pic-show">
									<img :src="vehicleList0[0].url" alt />
									<p>
										<span>1</span>
										<span>上汽大通</span>
									</p>
								</div>
								<ul class="left-content">
									<li :class="vehicleList0[0].id == 0 ? 'hotActiveTitle' : ''" @click="hotTitleClick(0)">外观</li>
									<li :class="vehicleList0[0].id == 1 ? 'hotActiveTitle' : ''" @click="hotTitleClick(1)">外观</li>
									<li :class="vehicleList0[0].id == 2 ? 'hotActiveTitle' : ''" @click="hotTitleClick(2)">内饰</li>
									<li :class="vehicleList0[0].id == 3 ? 'hotActiveTitle' : ''" @click="hotTitleClick(3)">内饰</li>
								</ul>
							</li>
							<li>
								<div class="pic-show">
									<img :src="vehicleList0[1].url" alt />
									<p>
										<span>2</span>
										<span>格林卡诺C2</span>
									</p>
								</div>
								<ul class="left-content">
									<li :class="vehicleList0[1].id == 0 ? 'hotActiveTitle' : ''" @click="hotTitleClick1(0)">外观</li>
									<li :class="vehicleList0[1].id == 1 ? 'hotActiveTitle' : ''" @click="hotTitleClick1(1)">外观</li>
									<li :class="vehicleList0[1].id == 2 ? 'hotActiveTitle' : ''" @click="hotTitleClick1(2)">内饰</li>
									<li :class="vehicleList0[1].id == 3 ? 'hotActiveTitle' : ''" @click="hotTitleClick1(3)">内饰</li>
								</ul>
							</li>
							<li style="margin-top:20px">
								<div class="pic-show">
									<img :src="vehicleList0[2].url" alt />
									<p>
										<span>3</span>
										<span>齐星依维柯</span>
									</p>
								</div>
								<ul class="left-content">
									<li :class="vehicleList0[2].id == 0 ? 'hotActiveTitle' : ''" @click="hotTitleClick2(0)">外观</li>
									<li :class="vehicleList0[2].id == 1 ? 'hotActiveTitle' : ''" @click="hotTitleClick2(1)">外观</li>
									<li :class="vehicleList0[2].id == 2 ? 'hotActiveTitle' : ''" @click="hotTitleClick2(2)">内饰</li>
									<li :class="vehicleList0[2].id == 3 ? 'hotActiveTitle' : ''" @click="hotTitleClick2(3)">内饰</li>
								</ul>
							</li>
							<li style="margin-top:20px">
								<div class="pic-show">
									<img :src="vehicleList0[3].url" alt />
									<p>
										<span>4</span>
										<span>奔驰斯宾特</span>
									</p>
								</div>
								<ul class="left-content">
									<li :class="vehicleList0[3].id == 0 ? 'hotActiveTitle' : ''" @click="hotTitleClick3(0)">外观</li>
									<li :class="vehicleList0[3].id == 1 ? 'hotActiveTitle' : ''" @click="hotTitleClick3(1)">外观</li>
									<li :class="vehicleList0[3].id == 2 ? 'hotActiveTitle' : ''" @click="hotTitleClick3(2)">内饰</li>
									<li :class="vehicleList0[3].id == 3 ? 'hotActiveTitle' : ''" @click="hotTitleClick3(3)">内饰</li>
								</ul>
							</li>
						</ul>
					</div>
					<div style="margin-top:40px" class="right" v-else>
						<ul>
							<li>
								<img :src="memberList[0].bigIcon" :class="{miniPic1:!grade.common}" alt />
								<p>{{memberList[0].name}}</p>
								<p>{{memberList[0].price}}</p>
								<p></p>

								<div v-if="grade.common == true" class="membership-rules">
									<p>1、尊享欣新房车荟永久8折租车；</p>
									<p>2、尊享欣新房车荟任意款房车5天（A型房车与奔驰房车除外），价值7500元；</p>
									<p>3、尊享欣新房车举办的各种沙龙讲座及户外活动。</p>
									<button @click="PurchaseBtn">购买会员 ></button>
								</div>
								<div v-else class="purchase">
									<div>
										<img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat_app.jpg" alt />
										<span>
											微信扫码进入小程序购买
											<br />[欣新房车助手]
										</span>
									</div>
									<div>
										<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" alt />
										<span>
											扫码下载app购买
											<br />[滴房车](仅安卓)
										</span>
									</div>
									<p class="annotation">注:均在会员中心进行购买</p>
								</div>
							</li>

							<li>
								<img :src="memberList[1].bigIcon" :class="{miniPic2:!grade.gold}" alt />
								<p>{{memberList[1].name}}</p>
								<p>{{memberList[1].price}}</p>
								<p></p>

								<div v-if="grade.gold == true" class="membership-rules">
									<p>1、尊享欣新房车荟永久7折租车；</p>
									<p>2、尊享欣新房车荟任意款房车12天（A型房车与奔驰房车除外），价值18000元；</p>
									<p>3、尊享欣新房车举办的各种沙龙讲座及户外活动。</p>
									<button @click="PurchaseBtn1">购买会员 ></button>
								</div>
								<div v-else class="purchase">
									<div>
										<img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat_app.jpg" alt />
										<span>
											微信扫码进入小程序购买
											<br />[欣新房车助手]
										</span>
									</div>
									<div>
										<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" alt />
										<span>
											扫码下载app购买
											<br />[滴房车](仅安卓)
										</span>
									</div>
									<p class="annotation">注:均在会员中心进行购买</p>
								</div>
							</li>
							<li>
								<img :src="memberList[2].bigIcon" :class="{miniPic3:!grade.diamond}" alt />
								<p>{{memberList[2].name}}</p>
								<p>{{memberList[2].price}}</p>
								<p></p>

								<div v-if="grade.diamond == true" class="membership-rules">
									<p>1、尊享欣新房车荟永久6折租车；</p>
									<p>2、尊享欣新房车荟任意款房车28天（A型房车与奔驰房车除外），价值42000元；</p>
									<p>3、尊享欣新房车举办的各种沙龙讲座及户外活动。</p>
									<button @click="PurchaseBtn2">购买会员 ></button>
								</div>
								<div v-else class="purchase">
									<div>
										<img src="https://mgmt.dfangche.com/xxfccn/image/home/webchat_app.jpg" alt />
										<span>
											微信扫码进入小程序购买
											<br />[欣新房车助手]
										</span>
									</div>
									<div>
										<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" alt />
										<span>
											扫码下载app购买
											<br />[滴房车](仅安卓)
										</span>
									</div>
									<p class="annotation">注:均在会员中心进行购买</p>
								</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="embellish-1"></div>
				<div class="embellish-2"></div>
				<div class="embellish-3"></div>
			</div>

			<!-- 最新活动●从这里启程 -->
			<div class="flex-fdc-jcc activity-container" style="padding-bottom: 30px;">
				<div class="tc title" style="color: #000;">
					最新活动
					<span style="font-size: 16px;margin: 0 5px;">●</span> 从这里启程
				</div>
				<div class="flex-aic-jcb more-container">
					<div style="width: 1120px;text-align: center">
						<div class="line-title"></div>
					</div>
					<nuxt-link to="/activity">
						<div>
							MORE
							<i class="iconfont iconsingle_arrow"></i>
						</div>
					</nuxt-link>
				</div>
				<div style="position: relative;">
					<div class="swiper-containerActivity">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(item,index) in activityList" :key="index">
								<div class="left">
									<nuxt-link :to="'activityList/'+item[0].id">
										<div style="overflow: hidden;height: 320px;">
											<img :src="item[0].banner" :alt="item[0].title" />
										</div>

										<h3>{{item[0].title}}</h3>

										<p>活动时间:{{item[0].startTime}} - {{item[0].endTime}}</p>
										<p>活动地点:{{item[0].province}}{{item[0].city}}{{item[0].town}}{{item[0].address}}</p>
									</nuxt-link>
								</div>
								<div v-for="(val,key) in item.slice(1)" :key="key">
									<ul class="right">
										<li>
											<nuxt-link :to="'activityList/'+val.id">
												<h3>{{val.title}}</h3>
											</nuxt-link>
											<p>活动时间:{{val.startTime}} - {{val.endTime}}</p>
											<p>活动地点:{{val.province}}{{val.city}}{{val.town}}{{val.address}}</p>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-button-prev swiper-button-black" style="margin: 0 0 0 -60px;">
						<img
							style="width: 20px;height: 20px;"
							src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png"
						/>
					</div>
					<div class="swiper-button-next swiper-button-black" style="margin: 0 -60px 0 0;">
						<img
							style="width: 20px;height: 20px;"
							src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
						/>
					</div>
				</div>
			</div>

			<!-- 新闻动态 -->
			<div class="flex-fdc-jcc" style="background: #fff;padding-bottom: 30px;">
				<div class="tc title">
					新闻动态
					<span style="font-size: 16px;margin: 0 5px;">●</span> 最新资讯与你分享
				</div>
				<div class="flex-aic-jcb more-container">
					<div style="width: 1120px;text-align: center">
						<div class="line-title"></div>
					</div>
					<nuxt-link to="/news">
						<div>
							MORE
							<i class="iconfont iconsingle_arrow"></i>
						</div>
					</nuxt-link>
				</div>
				<div class="flex-aic-jcb-warp min-win" style="width:1120px">
					<div class="left">
						<nuxt-link :to="'newsList/'+newsList[0].id">
							<h3>{{newsList[0].title}}</h3>

							<p>{{newsList[0].epitome}}</p>
							<div style="overflow: hidden;width: 478px;height: 278px;">
								<img :src="newsList[0].coverImage" alt />
							</div>
						</nuxt-link>
					</div>
					<ul class="right">
						<li v-for="(item,index) in newsList.slice(1)" :key="index">
							<nuxt-link :to="'newsList/'+item.id">
								<span>{{item.title}}</span>
								<span>{{item.addTime.substring(0,10)}}</span>
							</nuxt-link>
						</li>
					</ul>
					<!-- <div class="item-c flex-aic" v-for="item in newsList" :key="item.id">
						<nuxt-link :to="'/newsList/'+item.id" class="flex-aic">
							<img :src="item.coverImage" class="item-c-img" :alt="item.title" />
							<div class="item-c-r">
								<div class="ellipsis new-tt">{{item.title}}</div>
								<div class="desc ellipsis2">{{item.epitome}}</div>
								<div class="time">{{item.addTime.substring(0,10)}}</div>
							</div>
						</nuxt-link>
					</div>-->
				</div>
			</div>

			<!-- 城市覆盖区域 -->
			<div class="map-container" style="margin-top:80px">
				<img style="width: 100%;" src="https://mgmt.dfangche.com/xxfccn/image/home/scope-bg.jpg" />
				<div class="city-covers">
					<div class="introduce">
						<h3>欣新房车是一家专业从事房车销售，房车租赁,房车旅游路线策划，房车托管及房车产业配套与服务一体化的企业。</h3>
						<p>将以全新的商业模式与经营理念，让房车生活走向大众，我们将竭诚为消费者提供舒适,便捷,轻松,快乐的房车生活。</p>
						<p>欣新房车全国覆盖</p>
						<ul>
							<li>
								<p>{{cityNum}}+</p>
								<p>城市</p>
							</li>
							<li>
								<p>{{comppanyNum}}+</p>
								<p>子公司</p>
							</li>
						</ul>
						<span class="look-info">
							<nuxt-link to="company" style="color:#fff">
								查看详情
								<i class="iconfont iconsingle_arrow" style="position: relative;left: 5px;top: 2px;"></i>
							</nuxt-link>
						</span>
					</div>
					<img
						src="https://mgmt.dfangche.com/xxfccn/image/home/map_new.jpg"
						style="width:654px;float:right"
						alt
					/>
				</div>
			</div>

			<!-- 房车营地,欣新房车集团 -->
			<div class="campsite" style="margin:80px auto">
				<div class="left">
					<div class="left-title">
						<span>房车营地</span>

						<nuxt-link to="campsite?types=" style="float:right;color:#fff">
							<span>
								MORE
								<i class="iconfont iconsingle_arrow"></i>
							</span>
						</nuxt-link>
					</div>
					<div style="overflow: hidden;width: 330px;height: 190px;margin: 15px auto;">
						<img src="https://mgmt.dfangche.com/xxfccn/image/home/yindi.png" alt />
					</div>
					<ul>
						<li v-for="(item,index) in campsiteList" :key="index">
							<nuxt-link :to="'campsiteDetails/'+item.id">{{item.name}}</nuxt-link>
						</li>
					</ul>
				</div>
				<div class="right">
					<div class="left-title">
						<span>欣新房车集团</span>
						<nuxt-link to="company" style="float:right;color:#fff">
							<span>
								MORE
								<i class="iconfont iconsingle_arrow"></i>
							</span>
						</nuxt-link>
					</div>
					<div style="padding:15px">
						<!-- <img src="./../assets/images/headquarters.png" alt /> -->
						<div style="overflow: hidden;display:inline-block" class="head-img">
							<img :src="companyList[0].cover" alt style="width:336px;height:124px" />
						</div>
						<div class="adress">
							<p>
								<nuxt-link to="company">{{companyList[0].name}}</nuxt-link>
							</p>
							<p>
								<span class="iconfont iconyidongduanicon-"></span>
								{{companyList[0].leaderContactInfo}}
							</p>
							<p>
								<span class="iconfont iconditu"></span>
								{{companyList[0].address}}
							</p>
						</div>
						<ul class="company-address">
							<li v-for="(item,index) in companyList.slice(1)" :key="index">
								<nuxt-link to="company">
									<span>{{item.name}}</span>
									<span class="iconfont iconyidongduanicon-"></span>
									{{item.leaderContactInfo}}
									<span class="iconfont iconsingle_arrow"></span>
								</nuxt-link>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- <go-top></go-top> -->
		<footer-modal></footer-modal>
	</div>
</template>

<script>
import axios from '../plugins/axios'
import banner from '../components/banner'
import bannerActivity from '../components/bannerActivity'
import menuModal from '../components/menu'
import footerModal from '../components/footer'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
// import GoTop from '../components/goTop'
// import '../assets/index.css'
export default {
	transition: 'bounce',

	components: {
		menuModal,
		footerModal,
		banner,
		bannerActivity
		// GoTop
	},
	data() {
		return {
			grade: {
				common: true,
				gold: true,
				diamond: true
			},
			vehicleList0: [
				{
					id: 0,
					url:
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg'
				},
				{
					id: 0,
					url:
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg'
				},
				{
					id: 0,
					url:
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg'
				},
				{
					id: 0,
					url:
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg'
				}
			],
			hotActiveTitle: '0',
			isTourActive: '1',
			isTourActives: 'first',
			isActive: '川藏游',
			items: [],
			curId: 0,
			items1: {},
			curId1: 0,
			looptime: 4000, // 循环时间
			width: 400,
			height: 200,
			background: 'red',
			color: '#fff',
			fontSize: '70px',
			cityNum: 0, //分公司城市
			comppanyNum: 0, //分公司
			items2: [],
			industryList: [],
			hasIndustry: !1,
			tabIndex: 0, //当前选中车型
			preIndex: 0 //当前轮播选中图
		}
	},
	mounted: function() {},
	created() {
		if (typeof window !== 'undefined') {
			window.addEventListener('scroll', this.handleScroll)
		}
	},
	async asyncData({ env }) {
		function formatDate(date, fmt) {
			if (/(y+)/.test(fmt)) {
				fmt = fmt.replace(
					RegExp.$1,
					(date.getFullYear() + '').substr(4 - RegExp.$1.length)
				)
			}
			let o = {
				'M+': date.getMonth() + 1,
				'd+': date.getDate(),
				'h+': date.getHours(),
				'm+': date.getMinutes(),
				's+': date.getSeconds()
			}
			for (let k in o) {
				if (new RegExp(`(${k})`).test(fmt)) {
					let str = o[k] + ''
					fmt = fmt.replace(
						RegExp.$1,
						RegExp.$1.length === 1 ? str : padLeftZero(str)
					)
				}
			}
			return fmt
		}
		function padLeftZero(str) {
			return ('00' + str).substr(str.length)
		}
		function timestamp2Date(timestamp) {
			let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
		}
		function timestamp2DateNoTime(timestamp) {
			let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			return formatDate(date, 'yyyy-MM-dd')
		}
		function group(array, subGroupLength) {
			let index = 0
			let newArray = []
			while (index < array.length) {
				newArray.push(array.slice(index, (index += subGroupLength)))
			}

			return newArray
		}
		try {
			// 首页活动
			const { data } = await axios.get(
				'/api/uccn/summitActivity/app/unauth/home?limit=10'
			)
			let cc = data.data
			cc.map(function(item) {
				item.startTime = timestamp2DateNoTime(item.startTime)
				item.endTime = timestamp2DateNoTime(item.endTime)
			})
			group(cc, 5)
			//首页banner
			let tempBannerData = await axios.get(
				'/api/app/banner/app/unauth/findBannerlist?type=0&platform=1'
			)
			let banner = tempBannerData.data.data
			//首页新闻
			let newsData = await axios.get(
				'/api/uccn/article/app/unauth/homePage/1'
			)
			let news = newsData.data.data

			// 首页seo
			let headData = await axios.get(
				'/api/uccn/seo/app/unauth/officialWebsite/1'
			)
			let head = headData.data.data
			//热门路线
			const hotCircuit = await axios.get(
				'/api/uccn/app/unauth/tour/tagList'
			)
			//会员图标
			const memberData = await axios.get(
				'api/uccn/member_level/app/unauth/list'
			)
			let memberList = memberData.data.data
			console.log(memberList)

			//营地
			const campsiteData = await axios.get(
				'api/uccn/app/unauth/campsite/shops?pageNo=1&pageSize=6'
			)
			let campsites = campsiteData.data.data.data

			//公司地址
			const companyData = await axios.post(
				'api/uccn/app/unauth/branch_company/page',
				{ page: 1, limit: 9 }
			)
			let company = companyData.data.data.data

			//热门路线
			let params = {}
			const hotApi = await axios.post(
				'/api/tour/website/app/unauth/tour',
				{ type: 1, limit: 6 }
			)
			let hotData = hotApi.data.data
			params.first = hotApi.data.data

			//特色旅游
			const second = await axios.post(
				'/api/tour/website/app/unauth/tour',
				{ type: 2, limit: 6 }
			)
			params.second = second.data.data

			//新开辟路线
			const third = await axios.get(
				'/api/tour/website/app/unauth/tour/new'
			)
			params.third = third.data.data

			//推荐路线
			let fourth = await axios.get(
				'/api/uccn/app/unauth/tour/shopList?page=1&limit=6'
			)
			let tour = fourth.data.data
			params.fourth = tour
			return {
				hotlist: params,
				companyList: company,
				activityList: group(cc, 5),
				bannerList: banner,
				newsList: news,
				tourList: tour,
				headList: head,
				memberList: memberList,
				campsiteList: campsites,
				hotCircuit: hotCircuit.data.data.slice(0, 7)
			}
		} catch (e) {
			console.log('interface timeout or format error =&gt; ', e)
			return {}
		}
	},
	methods: {
		//购买普通会员
		PurchaseBtn() {
			this.grade.common = false
		},
		//购买黄金会员
		PurchaseBtn1() {
			this.grade.gold = false
		},
		//购买钻石会员
		PurchaseBtn2() {
			this.grade.diamond = false
		},
		hotTitleClick(index) {
			this.vehicleList0[0].id = index
			switch (index) {
				case 0:
					this.vehicleList0[0].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg'
					break
				case 1:
					this.vehicleList0[0].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg'
					break
				case 2:
					this.vehicleList0[0].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg'
					break
				case 3:
					this.vehicleList0[0].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg'
					break
				default:
					break
			}
		},
		hotTitleClick1(index) {
			this.vehicleList0[1].id = index
			switch (index) {
				case 0:
					this.vehicleList0[1].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg'
					break
				case 1:
					this.vehicleList0[1].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg'
					break
				case 2:
					this.vehicleList0[1].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg'
					break
				case 3:
					this.vehicleList0[1].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg'
					break
				default:
					break
			}
		},
		hotTitleClick2(index) {
			this.vehicleList0[2].id = index
			switch (index) {
				case 0:
					this.vehicleList0[2].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg'
					break
				case 1:
					this.vehicleList0[2].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg'
					break
				case 2:
					this.vehicleList0[2].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg'
					break
				case 3:
					this.vehicleList0[2].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg'
					break
				default:
					break
			}
		},
		hotTitleClick3(index) {
			this.vehicleList0[3].id = index
			switch (index) {
				case 0:
					this.vehicleList0[3].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg'
					break
				case 1:
					this.vehicleList0[3].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg'
					break
				case 2:
					this.vehicleList0[3].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg'
					break
				case 3:
					this.vehicleList0[3].url =
						'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg'
					break
				default:
					break
			}
		},
		chooseHot(index) {
			this.tabIndex = index
			if (index == 0) {
				this.grade = {
					common: true,
					gold: true,
					diamond: true
				}
			}
		},
		choose(item) {
			this.isTourActive = item
			console.log(item)

			switch (item) {
				case 1:
					this.isTourActives = 'first'
					break
				case 2:
					this.isTourActives = 'second'
					break
				case 3:
					this.isTourActives = 'third'
					break
				case 4:
					this.isTourActives = 'fourth'
					break
				default:
					break
			}
			// console.log(this.isTourActives);
		},
		// selectStyle(item) {
		// 	this.$nextTick(function() {
		// 		this.isActive = item
		// 	})
		// },
		handleScroll: function() {
			let scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop
			// 设备/屏幕高度
			let scrollObj = document.getElementById('scroll-area') // 滚动区域
			if (scrollObj) {
				let scrollHeight = scrollObj.scrollHeight // 滚动条的总高度
				let _t = this
				//滚动条到底部的条件
				if (scrollHeight - scrollTop < 1600) {
					//          _t.cityNum = 0;
					//          _t.comppanyNum = 0;
					var t = setInterval(function() {
						_t.cityNum = _t.cityNum + 20
						if (_t.cityNum >= 500) {
							_t.cityNum = 500
							clearInterval(t)
						}
					}, 100)

					let c = setInterval(function() {
						_t.comppanyNum = _t.comppanyNum + 35
						if (_t.comppanyNum >= 700) {
							_t.comppanyNum = 700
							clearInterval(c)
						}
					}, 100)
				}
				// else {
				// 	_t.cityNum = 0
				// 	_t.comppanyNum = 0
				// }
			}
		},
		/**
		 * 车型切换
		 */
		changeVehicle(index) {
			let t = this
			this.tabIndex = index
			if (index == 0) {
				this.vehicleList0 = [
					{
						id: 1,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg',
						name: '上汽大通',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg'
					},
					{
						id: 2,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg',
						name: '上汽大通',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg'
					},
					{
						id: 3,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg',
						name: '上汽大通',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg'
					},
					{
						id: 4,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg',
						name: '上汽大通',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg'
					}
				]
			} else if (index == 1) {
				this.vehicleList0 = [
					{
						id: 1,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg',
						name: '格林卡诺',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg'
					},
					{
						id: 2,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg',
						name: '格林卡诺',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg'
					},
					{
						id: 3,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg',
						name: '格林卡诺',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg'
					},
					{
						id: 4,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg',
						name: '格林卡诺',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg'
					}
				]
			} else if (index == 2) {
				this.vehicleList0 = [
					{
						id: 1,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg',
						name: '齐星依维柯',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg'
					},
					{
						id: 2,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg',
						name: '齐星依维柯',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg'
					},
					{
						id: 3,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg',
						name: '齐星依维柯',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg'
					},
					{
						id: 4,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg',
						name: '齐星依维柯',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg'
					}
				]
			} else if (index == 3) {
				this.vehicleList0 = [
					{
						id: 1,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg',
						name: '奔驰斯宾特',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg'
					},
					{
						id: 2,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg',
						name: '奔驰斯宾特',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg'
					},
					{
						id: 3,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg',
						name: '奔驰斯宾特',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg'
					},
					{
						id: 4,
						url:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg',
						name: '奔驰斯宾特',
						sUrl:
							'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg'
					}
				]
			}
		},
		/**
		 * 缩略图点击切换大图
		 */
		changeImgIndex(index) {
			this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true)
		},
		// 点击下一页回调
		prev() {},
		// 点击下一页回调
		next() {},
		// 鼠标移入状态点回调
		changeBanner() {},
		bannerClick(e) {
			debugger
		}
	},
	mounted() {
		let t = this
		// t.changeVehicle(0)
		this.swiperTabG = new Swiper('.gallery-thumbs', {
			spaceBetween: 10,
			slidesPerView: 4,
			freeMode: true,
			watchSlidesVisibility: true,
			watchSlidesProgress: true
		})
		this.swiperTabT = new Swiper('.gallery-top', {
			spaceBetween: 10,
			loop: true,
			autoplay: {
				delay: 2500,
				disableOnInteraction: false
			},
			on: {
				slideChangeTransitionEnd: function() {
					t.preIndex = this.activeIndex - 1
					if (t.preIndex == 4) {
						t.$refs.mySwiper.swiper.slideTo(1, 1000, true)
						t.preIndex = 0
					} else if (t.preIndex == -1) {
						t.preIndex = 3
					}
				}
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
			thumbs: {
				swiper: t.swiperTabG
			}
		})
		var swipers = new Swiper('.swiper-containerActivity', {
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
			pagination: '.swiper-pagination',
			loop: true,
			paginationClickable: true,
			hashnav: true,
			hashnavWatchState: true
		})
	},
	head() {
		return {
			title: this.headList.title,
			meta: [
				{
					hid: 'keywords',
					name: 'keywords',
					content: this.headList.keywords
				},
				{
					hid: 'description',
					name: 'description',
					content: this.headList.description
				}
			]
		}
	}
}
</script>
