<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>
            <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)"
                    >
						<view class="cover" :style="'background-image: url(' + item.cover + ');'"></view>
                        <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>
			<scroll-view 
				class="the-flex"
				style="padding-top: 0;"
				scroll-x="true" 
				scroll-with-animation="true" 
				:scroll-into-view='defaultViewId'
			>
				<block v-for="(item, index) in appMenus.service" :key="index">
					<view class="the-flex-item"
						@click="onView(item.page)"
					>
						<view class="cover" :style="'background-image: url(' + item.cover + ');'"></view>
						<view class="title nowrap">{{item.title}}</view>
						<view class="price nowrap"><text>￥</text>{{item.price}} <text v-if="item.limit != null">/{{item.limit}}</text></view>
					</view>
				</block>
			</scroll-view>
		</view>
		<!-- 诉讼委托类 -->
		<view class="block">
			<view class="block-title">
				<view class="title">诉讼委托咨询类</view>
			</view>
			<view class="lawsuit">
				<block v-for="(item, index) in appMenus.cases" :key="index">
					<view class="lawsuit-item" @click="onView(item.page)">
						<view class="lawsuit-cover" :style="'background-image: url(' + item.cover + ');'"></view>
						<view class="lawsuit-text">
							<view class="lawsuit-title nowrap">{{item.title}}</view>
							<view class="lawsuit-price">￥{{item.price}}<text v-if="item.limit != null">{{item.limit}}</text></view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 增收赋能类 -->
		<view class="block">
			<view class="block-title">
				<view class="title">增收赋能咨询类</view>
			</view>
			<scroll-view 
				class="the-flex"
				style="padding-top: 0;"
				scroll-x="true" 
				scroll-with-animation="true" 
				:scroll-into-view='defaultViewId'
			>
				<view class="the-flex-item" v-for="(item, index) in empowerArr" :key="index" @click="onEmpower(item.id)">
					<view class="cover" :style="'background-image: url(' + item.cover + ');'"></view>
					<view class="title nowrap">{{item.title}}</view>
					<view class="price nowrap"><text>￥</text>{{item.price}}</view>
				</view>
			</scroll-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 { region } from '@/apis/interfaces/address.js'
    import { categories, jf, index } from '@/apis/interfaces/index.js'
	import { lists } from '@/apis/interfaces/empower.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	: '',
				appMenus	: {
					cases	: [],
					service	: []
				},
				// 增收赋能列表
				empowerArr	: []
			}
		},
        onLoad() {
            this.getCategory()
            this.getJf()
            this.getIndex()
			// 增收赋能
			this.getEmpower()
        },
		methods: {
			// 查看增收赋能详情
			onEmpower(id){
				this.$Router.push({
					name	: 'EmpowerInfo',
					params	: { id }
				})
			},
			// 增收赋能接口
			getEmpower(){
				lists().then(res => {
					this.empowerArr = res;
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
            // 获取金法列表
            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
                })
            },
            // 首页轮播图及公告
            getIndex(){
                index().then(res=>{
                    this.bannerArr = res.bannners
					this.appMenus  = res.app_menus
                    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()
            	}
            },
            // 点击轮播图
            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 $padding - 10 $padding ;
		.free-img{
			width: 100%;
		}
	}
	// 增收赋能类
	.closed{
		background: white;
		margin: 0 $margin;
		border-radius: 35rpx;
		padding-bottom: 10rpx;
		.closed-item{
			display: flex;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: solid 1rpx #f8f8f8;
			&:last-child{
				margin-bottom: 0;
				border-bottom: none;
			}
			.closed-cover{
				width: 168rpx;
				height: 168rpx;
				background-size: cover;
				background-position: center;
				border-radius: 10rpx;
			}
			.closed-text{
				width: calc(100% - 168rpx);
				padding-left: 30rpx;
				box-sizing: border-box;
				.closed-title{
					font-size: 32rpx;
					font-weight: bold;
					line-height: 50rpx;
				}
				.closed-subtitle{ 
					color: gray;
					font-size: 28rpx;
					line-height: 40rpx;
				}
				.closed-price{
					color: #d51959;
					font-size: 34rpx;
					line-height: 40rpx;
					margin-top: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
	// 诉讼委托类
	.lawsuit{ 
		padding: 0 20rpx $padding;
		display: flex;
		justify-content: space-between;
		&-item{
			background: #F6F6F6;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			overflow: hidden;
			width: calc(50% - 20rpx);
			margin: 0 10rpx;
		}
		&-cover{
			width: 138rpx;
			height: 138rpx;
			background-size: cover;
			background-position: center;
		}
		&-text{
			width: calc(100% - 138rpx);
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		&-title{ 
			font-size: 30rpx;
			margin-bottom: 20rpx;
		}
		&-price{
			font-size: 32rpx;
			color: #d51959;
			font-weight: bold;
		}
	}
	// 经法
	.the-tabs{
		background: #ececec;
		margin: 0 $margin;
		height: 60rpx;
		border-radius: 35rpx;
		display: flex;
		position: relative;
        white-space: nowrap;
        width: calc(100% - 60rpx);
		&-item{
			width: 25%;
			line-height: 60rpx;
			text-align: center;
			font-size: 26rpx;
			color: #454545;
			transition: all .4s;
            display: inline-block;
			background-color: transparent;
			&.active{
				color: white;
				position: relative;
				z-index: 2;
			}
		}
		&-acitve-block{
            display: inline-block;
			width: 25%;
			height: 60rpx;
			background-image: linear-gradient( to right, #d51959, #ec7247);
			border-radius: 35rpx;
			position: absolute;
			left: 0;
			top: 0;
			transition: all .4s;
		}
	}
	.the-flex{
		padding: $padding 20rpx;
        box-sizing: border-box;
        white-space: nowrap;
		&-item{
			width: calc(33% - 20rpx);
			margin: 0 10rpx;
            display: inline-block;
			&:last-child{
				margin-right: 20rpx;
			}
			.cover{
                width: 100%;
                padding-top: 100%;
				background-position: center;
				background-size: cover;
				background-position: center;
				border-radius: 10rpx;
			}
			.title{
				font-size: 30rpx;
				color: #111111;
				padding: 10rpx 0;
				line-height: 40rpx;
			}
			.price{
				line-height: 40rpx;
				font-weight: bold;
				color: #d51959;
				font-size: 32rpx;
				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>
