<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="clickFree">
			<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 class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right" /></view>
			</view>
			<view class="zong-list">
				<view class="zong-list-item" v-for="(item, index) in 3" :key="index">
					<image class="cover" src="@/static/imgs/index-pack-01.png" mode="aspectFill" />
					<view class="colum-flex">
						<view class="title nowrap">2022年尊享综法服务包</view>
						<view class="price nowrap"><text>￥</text>2200</view>
					</view>
				</view>
			</view>
		</view>
	</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:[],
			}
		},
        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
                }).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])
            },
            // 点击轮播图跳转自由服务包
            clickFree(){
                uni.navigateTo({
                    url:'/pages/index/free'
                })
            },
			// 获取城市数据
			getRegion(id){
				region({
					parent_id: id
				}).then(res => {
					console.log(res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		background-color: white;
		padding-top: 20rpx;
	}
	// 轮播图
	.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-around;
				height: 180rpx;
				.title{
					line-height: 40rpx;
					font-size: 28rpx;
					color: #111111;
				}
				.price{
					line-height: 40rpx;
					font-weight: bold;
					color: #d51959;
					font-size: 38rpx;
					text{
						font-size: 80%;
					}
				}
			}
		}
	}
	// 经法
	.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>
