<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" @click="onView('FreeService')">
			<image class="free-img" src="@/static/index/index_banner_free.png" mode="widthFix" />
		</view>
		<!--  金法产品 -->
		<view class="block">
			<view class="block-title">
				<view class="title"> 金法产品</view>
				<!-- <view class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"/></view> -->
			</view>
            <scroll-view class="the-tabs" scroll-x="true" >
                <block v-for="(item, index) in theTabs" :key="index">
                    <view class="the-tabs-item" :class="{'active': item.category_id == theTabId}" @click="onTheTab(item)">{{item.title}}</view>
                </block>
                <view class="the-tabs-acitve-block" :style="theTabStyle"></view>
            </scroll-view>
			<scroll-view 
                class="the-flex" 
                scroll-x="true" 
                scroll-with-animation="true" 
                :scroll-into-view='defaultViewId'
            >
                    <view class="the-flex-item"
                        v-for="item in jfList"
                        :key="item.service_id"
                        :id='"_tabs"+item.service_id'
                        @click="sevicesClick(item.service_id)"
                    >
                        <image class="cover" :src="item.cover" mode="aspectFill" />
                        <view class="title nowrap">{{item.title}}</view>
                        <view class="price nowrap"><text>￥</text>{{item.price}}<text class="ding" v-if="item.type">定金</text></view>
                    </view>
			</scroll-view>
		</view>
		<!-- 综法产品 -->
		<view class="block">
			<view class="block-title">
				<view class="title">综法产品</view>
			</view>
			<view class="zong-list">
				<view class="zong-list-item" @click="onView('Individual')">
					<image class="cover" src="@/static/synthesize/img_00.png" mode="aspectFill" />
					<view class="colum-flex">
						<view>
							<view class="title nowrap">个人全年法律</view>
							<view class="subtitle">咨询服务 抖火法律</view>
						</view>
						<view class="price nowrap"><text>￥</text>365.00/年</view>
					</view>
				</view>
				<view class="zong-list-item" @click="onView('Entrust')">
					<image class="cover" src="@/static/synthesize/img_01.png" mode="aspectFill" />
					<view class="colum-flex">
						<view>
							<view class="title nowrap">案件委托</view>
							<view class="subtitle">咨询服务 抖火法律</view>
						</view>
						<view class="price nowrap"><text>￥</text>200元起</view>
					</view>
				</view>
				<view class="zong-list-item" @click="onView('Enterprise')">
					<image class="cover" src="@/static/synthesize/img_02.png" mode="aspectFill" />
					<view class="colum-flex">
						<view>
							<view class="title nowrap">企业全年法律</view>
							<view class="subtitle">咨询服务 抖火法律</view>
						</view>
						<view class="price nowrap"><text>￥</text>3650.00起/年</view>
					</view>
				</view>
				<view class="zong-list-item" @click="onView('Service')">
					<image class="cover" src="@/static/synthesize/img_03.png" mode="aspectFill" />
					<view class="colum-flex">
						<view>
							<view class="title nowrap">拓展服务</view>
							<view class="subtitle">咨询服务 抖火法律</view>
						</view>
						<view class="price nowrap"><text>￥</text>500元起</view>
					</view>
				</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="widthFix"></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 { region } from '@/apis/interfaces/address.js'
    import { categories, jf, zf, index } from '@/apis/interfaces/index.js'
	export default {
		data() {
			return {
				theTabs		: [
					{ category_id: '', title: '全部' }
				],
				theTabId	: '',
				theTabStyle	: {
					left: '0%'
				},
				bannerArr	: [],
                notice		: [],
                jfList:[],
                defaultViewId:'',
                zfList:[],
				// 首次进入弹窗
				timeData	: {},
				first		: 1,
				showAdTime  : 0,
				showAdImg	: true,
				layAdImg	: ''
			}
		},
        onLoad() {
            this.getCategory()
            this.getJf()
            this.getIndex()
            this.getZf()
        },
		methods: {
            // 获取金法列表
            getJf(){
                let params = {
                    category_id:this.theTabId
                }
                jf(params).then(res=>{
                    if(res.length>0){
                        setTimeout(()=>{
                            this.defaultViewId = '_tabs'+res[0].service_id
                        },300)
                    }
                    this.jfList = res
                }).catch(err=>{
                    uni.showToast({
                        title:err.message,
                        icon:'none',
                        mask:true,
                        duration:2000
                    })
                })
            },
            // 点击金法产品跳转金法详情
            sevicesClick(id){
                uni.navigateTo({
                    url:'/pages/index/introduces?id='+id
                })
            },
            // 获取综法列表
            getZf(){
                zf().then(res=>{
                    // this.jfList = res
                }).catch(err=>{
                    uni.showToast({
                        title:err.message,
                        icon:'none',
                        mask:true,
                        duration:2000
                    })
                })
            },//  获取综法列表
            // 首页轮播图及公告
            getIndex(){
                index().then(res=>{
                    this.bannerArr = res.bannners
                    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
                    })
                })
            },
            // 获取金法分类列表
            getCategory(){
                categories().then(res=>{
                    this.theTabs = this.theTabs.concat(res)
                }).catch(err=>{
                    uni.showToast({
                        title:err.message,
                        icon:'none',
                        mask:true,
                        duration:2000
                    })
                })
            },
            // 金法产品筛选
            onTheTab(e){
            	if(e.category_id != this.theTabId){
            		let index = this.theTabs.findIndex(val => val.category_id === e.category_id)
            		this.theTabStyle = {
            			left: index * 25 + '%'
            		}
                    this.theTabId = e.category_id
                    this.getJf()
            	}
            },
			// 选择城市节点
			onCityPicker(e){
				this.getRegion(e.value);
			},
            // 点击轮播图
            swiperClick(e){
                // console.log(this.bannerArr[e])
            },
            // 点击轮播图跳转自由服务包
            onView(name){
				this.$Router.push({ name })
            },
			// 获取城市数据
			getRegion(id){
				region({
					parent_id: id
				}).then(res => {
					console.log(res)
				})
			},
			// 关闭弹窗广告
			onRemoveAd(){
				this.first = 0;
				this.showAdImg = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		background-color: white;
		padding-top: 20rpx;
	}
	// ad弹窗广告
	.ad-lay{
		width: 70vw;
		position: relative;
		.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{
			width: 70vw;
			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 $padding - 10 $padding ;
		.free-img{
			width: 100%;
		}
	}
	// 综法
	.zong-list{
		padding: 0 $padding 20rpx;
		margin-bottom: 30rpx;
		&-item{
			position: relative;
			margin-bottom: 30rpx;
			padding-left: 210rpx;
			height: 180rpx;
			.cover{
				position: absolute;
				left: 0;
				top: 0;
				width: 180rpx;
				height: 180rpx;
			}
			.colum-flex{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 180rpx;
				.title{
					font-size: 34rpx;
					color: #111111;
					line-height: 40rpx;
					margin-bottom: 10rpx;
					@extend .nowrap;
				}
				.subtitle{
					font-size: 28rpx;
					color: gray;
					line-height: 40rpx;
					@extend .nowrap;
				}
				.price{
					font-weight: bold;
					color: #d51959;
					font-size: 36rpx;
					line-height: 40rpx;
					text{
						font-size: 80%;
					}
					@extend .nowrap;
				}
			}
		}
	}
	// 经法
	.the-tabs{
		background: #ececec;
		margin: 0 $margin;
		height: 60rpx;
		border-radius: 35rpx;
		display: flex;
		position: relative;
        white-space: nowrap;
        width: calc(100% - 60rpx);
		&-item{
			position: relative;
			z-index: 2;
			width: 25%;
			line-height: 60rpx;
			text-align: center;
			font-size: 26rpx;
			color: #454545;
			transition: all .4s;
            display: inline-block;
			&.active{
				color: white;
			}
		}
		&-acitve-block{
            display: inline-block;
			width: 25%;
			height: 60rpx;
			background: linear-gradient( to right, #d51959, #ec7247);
			border-radius: 35rpx;
			position: absolute;
			left: 0;
			transition: all .4s;
		}
	}
	.the-flex{
		padding: $padding 20rpx;
        box-sizing: border-box;
        white-space: nowrap;
        
		&-item{
			width: calc(33.33% - 20rpx);
			margin: 0 10rpx;
            display: inline-block;
			.cover{
                width: 100%;
                height: 200rpx;
				border-radius: 10rpx;
			}
			.title{
				font-size: 28rpx;
				color: #111111;
				padding: 10rpx 0;
				line-height: 40rpx;
			}
			.price{
				line-height: 40rpx;
				font-weight: bold;
				color: #d51959;
				font-size: 38rpx;
				text{
					font-size: 80%;
				}
                .ding{
                    font-size: 64%;
                    margin-left: 4rpx;
                    position: relative;
                    bottom: 2rpx;
                }
			}
		}
	}
	// 模块
	.block{
		background-color: white;
		border-radius: $radius;
		margin: 0 $margin $margin;
		.block-title{
			padding: 0 $padding;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				font-weight: bold;
				color: #111111;
				font-size: 36rpx;
			}
			.more{
				background-color: #ececec;
				font-size: 28rpx;
				height: 50rpx;
				border-radius: 25rpx;
				width: 120rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
				line-height: 50rpx;
				text-align: center;
				color: #454545;
				.more-icon{
					display: inline-block;
				}
			}
		}
	}

</style>
