<template>
	<view class="content">
		<view class="header">
			<view class="banner">
				<u-swiper
					class="banner-swiper"
					:list="bannerArr"
					:indicator="true"
                    keyName="cover"
					previousMargin="20"
					nextMargin="20"
					circular
					radius="10"
					bgColor="#ffffff"
					height="100%"
                    @click='swiperClick'
				/>
			</view>
			<view class="notice">
				<view class="notice-title">
					<image class="notice-icon" src="@/static/index/index_notice.png" mode="widthFix" /> 公告
				</view>
				<u-notice-bar
					icon=""
					:text="notice"
                    url=''
                    linkType='navigateTo'
                    fontSize="14"
					direction="column"
					bgColor="#fff"
					color="#111111"
				/>
				<view class="notice-more">更多<u-icon class="more-icon" size="20rpx" color="#999" name="arrow-right" /></view>
			</view>
		</view>
		<!-- 自由服务包 -->
		<view class="free" v-if="free.has_free" @click="onView('FreeService')">
			<image class="free-img" :src="free.cover" mode="widthFix" />
		</view>
		
		<view class="block">
			<view class="module" :style="{'background-color':item.bg_color,'color':item.text_color}" v-for="(item, index) in bigfiveArr" :key="index">
				<view class="moduleCont" @click="onNav('businessList', item.children)">
					<view class="moduleCont-text">
						<view class="moduleCont-text-name">{{item.title}}</view>
						<view class="nowrap moduleCont-text-tips">{{item.subtitle}}</view>
					</view>
					<image class="moduleCont-img" :src="item.cover" mode="widthFix"></image>
				</view>
				<view class="moduleInfo" @click="moduleClick(index)">
					<view class="moduleInfo-text" :class="{active : item.schemesShow}">{{item.remark}}</view>
					<image class="moduleInfo-more" :class="{active : item.schemesShow}" src="@/static/imgs/basic_down.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		
		<!-- 弹窗 -->
		<u-popup :show="showAdImg" mode="center" bgColor="transparent">
			<view class="ad-lay">
				<view class="ad-down">
					<u-count-down
						ref="adCountDown"
						:time="showAdTime"
						:autoStart="false"
						@change="timeData = $event"
						@finish="showAdImg = false">
						<view>
							自动关闭<text>{{ timeData.seconds }}</text>S
						</view>
					</u-count-down>
				</view>
				<image class="ad-img" :src="layAdImg" mode="heightFix"></image>
				<view class="ad-btn">
					<u-icon
						class="ad-btn-icon"
						name="close-circle"
						color="white"
						size="36px"
						@click="onRemoveAd"
					></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
    import { index, bigfive } from '@/apis/interfaces/index.js'
	export default {
		data() {
			return {
				bannerArr	: [],
                notice		: [],
				// 首次进入弹窗
				timeData	: {},
				first		: 1,
				showAdTime  : 0,
				showAdImg	: true,
				layAdImg	: '',
				appMenus	: {
					cases	: [],
					service	: []
				},
				free		: {
					has_free: false,
					cover	: ""
				},
				bigfiveArr  : [], //五大板块
				moduleShow  : false //展开默认
			}
		},
        onLoad() {
            this.getIndex();
			
			this.bigfiveIndex();
        },
		methods: {
            // 首页轮播图及公告
            getIndex(){
                index().then(res=>{
                    this.bannerArr = res.bannners
					this.appMenus  = res.app_menus
					this.free	   = res.free
                    let list = []
                    res.notices.map(item=>{
                        let params = item.user.name + ' ' + item.user.text
                        list.push(params)
                    })
                    this.notice = list
					let { is_lay_ad, lay_ad_img, times } = res.layad
					if(is_lay_ad) this.layAdImg = lay_ad_img
					if(this.first === 1 && is_lay_ad){
						this.showAdImg  = true
						this.showAdTime = times * 1000
						this.$nextTick(() => {
							this.$refs.adCountDown.start()
						})
					}
                }).catch(err=>{
                    uni.showToast({
                        title:err.message,
                        icon:'none',
                        mask:true,
                        duration:2000
                    })
                })
            },
			
			// 最新五大板块
			bigfiveIndex(){
			    bigfive({parent_id: 0}).then(res=>{
					let esArr = res
					esArr.forEach((item, index) => {
						item.schemesShow = false
					})
					this.bigfiveArr = esArr
			    }).catch(err=>{
			        uni.showToast({
			            title:err.message,
			            icon:'none',
			            mask:true,
			            duration:2000
			        })
			    })
			},
			
			// 点击查看全部
			moduleClick(index) {
				this.bigfiveArr[index].schemesShow = !this.bigfiveArr[index].schemesShow
			},
			
			// 跳转
			onNav(name, children){
				this.$Router.push({name, params:{children:encodeURIComponent(JSON.stringify(children))}})
			},
            
            // 点击轮播图
            swiperClick(e){
                // console.log(this.bannerArr[e])
            },
            // 点击轮播图跳转自由服务包
            onView(name){
				this.$Router.push({ name })
            },
			// 关闭弹窗广告
			onRemoveAd(){
				this.first = 0;
				this.showAdImg = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		background-color: white;
		padding-top: 20rpx;
	}
	// ad弹窗广告
	.ad-lay{
		position: relative;
		text-align: center;
		.ad-down{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 1;
			background: rgba(0, 0, 0, .5);
			font-size: 20rpx;
			padding: 10rpx 20rpx;
			line-height: 30rpx;
			border-radius: 24rpx;
			color: white;
			.ad-down-u{
				display: inline-block;
				line-height: 30rpx;
			}
		}
		.ad-img{
			height: 75vh;
			border-radius: 20rpx;
		}
		.ad-btn{
			text-align: center;
			margin-top: 30rpx;
			.ad-btn-icon{
				display: inline-block;
			}
		}
	}
	// 轮播图
	.banner{
		position: relative;
		width: 100%;
		padding-top: 43%;
		.banner-swiper{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
	}
	// 公告
	.notice{
		background: white;
		padding: $padding;
		display: flex;
		flex-direction: row;
		align-items: center;
		.notice-title{
			background-color: #ececec;
			color: #000;
			height: 60rpx;
			line-height: 60rpx;
			width: 130rpx;
			text-align: center;
			font-size: 26rpx;
			font-weight: bold;
			border-radius: 20rpx;
			.notice-icon{
				width: 32rpx;
				vertical-align: middle;
				margin-bottom: 8rpx;
				margin-right: 10rpx;
				display: inline-block;
			}
		}
		.notice-more{
			font-size: 24rpx;
			height: 50rpx;
			border-radius: 25rpx;
			box-sizing: border-box;
			line-height: 50rpx;
			text-align: center;
			color: #999999;
			.more-icon{
				display: inline-block;
			}
		}
	}
	// 自由服务包
	.free{
		padding: $padding $padding 0 $padding;
		.free-img{ width: 100%; vertical-align: top; }
	}
	
	// 模块
	.block {padding: $padding;box-sizing: border-box;width: 100%;}
	.module {border-radius: $radius;padding: $padding - 10 $padding $padding $padding + 10;box-sizing: border-box; margin-bottom: $margin;}
	.module.moduleRed {background-color: #fff1f2;color: #c92453;}
	.module.moduleYellow {background-color: #fff7f2;color: #ff7b29;}
	.module.moduleBlue {background-color: #eaf4f3;color: #0dc8b3;}
	.module.moduleGreen {background-color: #eff5ee;color: #1fba05;}
	.module.modulePurple {background-color: #f2eef5;color: #a13dec;}
	.moduleCont {display: flex;}
	.moduleCont-text {width: calc(100% - 170rpx);}
	.moduleCont-text-name {font-weight: bold; font-size: $title-size + 12; padding: 20rpx 0 10rpx;}
	.moduleCont-text-tips {font-size: $title-size + 2;}
	.moduleCont-img {width: 170rpx;}
	.moduleInfo {color: #666666;font-size: $title-size-m; line-height: 48rpx; display: flex;}
	.moduleInfo-text {width: calc(100% - 28rpx); padding-right: 20rpx; box-sizing: border-box; height: 60rpx;overflow: hidden;}
	.moduleInfo-text.active {height: auto;}
	.moduleInfo-more {width: 24rpx; margin-top: 15rpx; transition: .2s;}
	.moduleInfo-more.active {transform: rotate(180deg);}
	
</style>
