<template>
	<view class="container">
		<navBar title="GIGESI 吉格斯" :navImg="navImg" :back="false" color="#333333" background="#FFFFFF" />

		<!-- 轮播和订购区 -->
		<view class="swiperAndBook">
			<view class="tab">
				<view class="item" v-for="(item,index) in tabList" :class="[currTabIndex==index?'itemA':'']"
					@click="currTabIndex=index">
					{{item}}
				</view>
			</view>
			<view class="bottomBtn">
				<u-swiper type='img' class="swiper" :list="bannerList" keyName="cover" indicator indicatorMode="line"
					:autoplay="true" height="996rpx" imgMode="scaleToFill" circular
					@change="e => currentNum = e.current">
					<view slot="indicator">
					</view>
				</u-swiper>

				<view class="bookingAndIndicator">
					<view class="btn" @click="toList">
						<text class="btnTxt">立即订购</text>
						<image src="@/static/index/halfRight.png" mode="" style="width: 24rpx;height: 8rpx;"></image>
					</view>
					<view class="indicatorBox">
						<view class="indicator">
							<view class="indicator__dot" style="" v-for="(item, index) in bannerList" :key="index"
								:class="[index === currentNum ?'indicator__dot--active':'']">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg" style="">
			<view class="controlPart" @click="toPage(1)">
				<view class="top">
					<view class="left">
						<image src="/static/index/part1_icon.png" mode="" style="width: 56rpx;height: 28rpx;"></image>
						<view class="title">
							智能控制系统
						</view>
					</view>
					<image src="/static/index/more.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view class="con">
					<image src="/static/index/img1.png" mode=""></image>
				</view>
			</view>

			<view class="controlPart" @click="toPage(2)">
				<view class="top">
					<view class="left">
						<image src="/static/index/part1_icon.png" mode="" style="width: 56rpx;height: 28rpx;"></image>
						<view class="title">
							网络规划-全屋WiFi
						</view>
					</view>
					<image src="/static/index/more.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view class="con">
					<image :src="picUrl+'/static/other/index_img2.png'" mode=""></image>
				</view>
			</view>

			<!-- 产品指南 -->
			<view class="productLead" @click="toPage(3)">
				<view class="top">
					<view class="left">
						<view class="bottomEng">
							PRODUCT GUIDE
						</view>
						<view class="bt">
							<view class="title">
								产品指南
							</view>
							<image src="/static/index/zhinan.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
						</view>
					</view>
					<image src="/static/index/more.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view class="con">
					<view class="item" v-for="(item,index) in leadList">
						<image :src="item.img" mode=""></image>
						<view class="bottom">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>


			<!-- 展厅地址 -->
			<view class="productLead">
				<view class="top">
					<view class="left">
						<view class="bottomEng">
							ADDRESS
						</view>
						<view class="bt">
							<view class="title">
								城市展厅
							</view>
							<image src="/static/index/addr.png" mode="" style="width: 26rpx;height: 36rpx;"></image>
						</view>
					</view>
					<image src="/static/index/more.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view class="conLast">

					<u-swiper type='def' class="swiper" :defList="bannerList1" keyName="img_url" indicator
						indicatorMode="line" :autoplay="true" previousMargin="30" nextMargin="30" height="490rpx"
						radius="40rpx" imgMode="scaleToFill" bgColor="rgba(255,255,255,0)" circular
						@change="e => currentNum1 = e.current" @click1="jumpLink">
						<view slot="indicator">
						</view>
						<view slot="defCon">
						</view>
					</u-swiper>
					<!-- 自定义轮播图指示器 -->
					<view class="indicatorBox1">
						<view class="indicator1">
							<view class="indicator1__dot1" style="" v-for="(item, index) in bannerList1" :key="index"
								:class="[index === currentNum1 ?'indicator1__dot1--active1':'']">
							</view>
						</view>
					</view>
				</view>
			</view>


			<u-loadmore style="" loadmoreText="已经到底啦" color="#CCCCCC" lineColor="#CCCCCC" line />
		</view>
	</view>
</template>

<script>
	import {
		getBannerDataReq,
		getAddressDataReq
	} from '@/api/index/index.js'
	export default {
		data() {
			return {
				picUrl: this.$picUrl,
				leadList: [{
						img: this.$picUrl + '/static/other/index_img3.png',
						name: '灯具指南'
					},
					{
						img: this.$picUrl + '/static/other/index_img4.png',
						name: '安装指南'
					},
					{
						img: this
							.$picUrl + '/static/other/index_img3.png',
						name: '灯具指南'
					}
				],
				bannerList: [
					this.$picUrl + '/static/other/noMain_img3.png',
					this.$picUrl + '/static/other/noMain_img3.png',
					this.$picUrl + '/static/other/noMain_img3.png',
				],
				bannerList1: [
				],
				currentNum: 0,
				currentNum1: 0,

				tabList: ['无主灯', '主灯', '吸顶灯'],
				currTabIndex: 0,

				navImg: require('@/static/index/logo.png')
			}
		},
		async onLoad() {
			let res = await getBannerDataReq()
			if (res.code == 0) {
				this.bannerList = res.data
				console.log('顶部轮播图数据', this.bannerList);
			} else {
				this.$toast(res.message)
			}

			let res1 = await getAddressDataReq()
			if (res1.code == 0) {
				this.bannerList1 = res1.data
				console.log('地址轮播图数据', this.bannerList1);
			} else {
				this.$toast(res1.message)
			}
		},
		methods: {
			toList() {
				if (this.currTabIndex == 0) {
					uni.navigateTo({
						url: '/pages/index/customNoMian_step1/index'
					})
				} else if (this.currTabIndex == 1) {
					uni.navigateTo({
						url: '/pages/index/customMian_step1/index'
					})
				} else {

				}
			},
			toPage(i) {
				if (i == 2) {
					uni.navigateTo({
						url: '/pages/index/fullHouseWifi/index'
					})
				} else if (i == 1) {
					uni.navigateTo({
						url: '/pages/index/aiControlSys/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/productLead/index'
					})
				}
			},

			async testReq() {
				let res = await getBannerDataReq()
				this.$toast(res.msg)
				console.log('返回值', res);
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>