<template>
	<view class="content">
		<!-- top -->
		<view class="top">
			<view class="topBack"></view>
			<view class="topCont">
				<!-- logo -->
				<view class="topCont-logo">
					<image class="topCont-logo-img" src="@/static/imgs/logo_title.png" mode="widthFix"></image>
					<view class="topCont-logo-go" @click="seekClick">
						立即咨询
					</view>
				</view>
				
				<!-- 专业优质在线法律平台 -->
				<view class="topCont-text">
					<view class="topCont-text-name">
						专业优质在线法律平台
					</view>
					<view class="topCont-text-tips">
						<text v-if="homeData.attorney">
							{{homeData.attorney.value}}+{{homeData.attorney.name}}
						</text>
						<block v-if="homeData.use_count">{{homeData.use_count.value}}+{{homeData.use_count.name}}</block>
					</view>
				</view>
				
				<!-- 平台公告 -->
				<view class="topCont-notice">
					<view class="topCont-notice-name"><image src="@/static/imgs/noticeArrow.png" mode="widthFix"></image>平台公告</view>
					<view class="topCont-notice-cont">
						<view class="topCont-notice-title">今日</view>
						<swiper class="topCont-notice-swiper" circular :autoplay="autoplay" :interval="interval"
							:duration="duration" vertical="y">
							<block v-for="(item, index) in noticesArr" :key="index">
								<swiper-item>
									<view class="topCont-swiper-item">
										<view class="topCont-swiper-name nowrap" v-if="item.user">
											{{item.user.name}} {{item.user.text}}
										</view>
										<view class="topCont-swiper-name nowrap" v-else>
											今日暂无信息
										</view>
									</view>
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view>
				
				<!-- 按钮链接 -->
				<view class="topCont-tool">
					<view class="topCont-tool-left">
						<view class="topCont-tool-cont" @click="seekClick('other', 1)">
							<!-- @click="$Router.push({name: 'sheetLoan', params: {type: 1}}) -->
							<view class="topCont-whole-name">
								经济纠纷
							</view>
							<view class="topCont-whole-tips">
								咨询服务 抖火法律
							</view>
							<image class="topCont-whole-img" src="@/static/imgs/toolImg_00.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="topCont-tool-right">
						<view class="topCont-tool-label" @click="seekClick('other', 2)">
							<view class="topCont-tool-cont">
								<view class="topCont-tool-name">
									刑事辩护
								</view>
								<view class="topCont-tool-tips">
									咨询服务 抖火法律
								</view>
								<image class="topCont-tool-img" src="@/static/imgs/toolImg_03.png" alt=""></image>
							</view>
						</view>
						<view class="topCont-tool-label" @click="seekClick('other', 3)">
							<view class="topCont-tool-cont">
								<view class="topCont-tool-name">
									合同纠纷
								</view>
								<view class="topCont-tool-tips">
									咨询服务 抖火法律
								</view>
								<image class="topCont-tool-img" src="@/static/imgs/toolImg_02.png" alt=""></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 数据展示 -->
				<view class="topCont-data">
					<view class="topCont-data-label" v-if="homeData.consult">
						{{homeData.consult.name}}<text>{{homeData.consult.value}}</text>人
					</view>
					<view class="topCont-data-label" v-if="homeData.sucess_count">
						{{homeData.sucess_count.name}}<text>{{homeData.sucess_count.value}}</text>单
					</view>
					<view class="topCont-data-label" v-if="homeData.success_rate">
						{{homeData.success_rate.name}}<text>{{homeData.success_rate.value}}</text>
					</view>
				</view>
				
			</view>
		</view>
	
		<!-- 工具 -->
		<!-- <view class="tool">
			<scroll-view class="tool-lable" scroll-x="true" show-scrollbar="false">
				<view class="tool-lable-item" v-for="(item, index) in lawyersWork" :key="index" @click="$Router.push({name: 'indexSort', params: {id: item.lawyer_business_id}})">
					<image :src="item.cover" class="tool-lable-img"></image>
					<view class="tool-lable-name">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view> -->
		
		<!-- 金牌律师 -->
		<view class="list">
			<view class="list-title">
				金牌律师
			</view>
			<view class="lawyer">
				<view class="lawyer-item" v-for="(item, index) in lawyersArr" :key="index" @click="$Router.push({name: 'lawyerDetails', params: {id: item.lawyer_id}})">
					<view class="lawyer-item-img">
						<!-- 5:6 -->
						<image :src="item.cover" mode="aspectFill"></image>
						<view class="nowrap lawyer-item-name">
							{{item.name}}
						</view>
					</view>
					<view class="lawyer-item-cont">
						<view class="nowrap lawyer-item-tips">
							擅长：
							<block v-for="(items, itemsIndex) in item.tags" :key="itemsIndex">
								{{items.name}},
							</block>
						</view>
						<view class="lawyer-item-price">
							<!-- <view class="lawyer-item-number">￥{{item.price}}</view> -->
							<!-- <text>{{item.years}}+人咨询</text> -->
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<!-- 法律常识 -->
		<view class="list">
			<view class="list-title">
				法律常识
			</view>
			<view class="list-tabs">
				<scroll-view class="list-classify" scroll-x="true" show-scrollbar="false">
					<view v-for="(item, index) in articleArr" :key="index" class="list-tabs-item" :class="{show : categoryId == item.category_id}" @click="onTabs(item.category_id)">{{item.title}}</view>
				</scroll-view>
			</view>
			<view class="list-item">
				<view class="list-item-label" v-for="(item, index) in listArr" :key="index" @click="$Router.push({name: 'indexDetails', params: {id: item.article_id}})">
					<view class="list-item-img">
						<!-- 5:6 -->
						<image :src="item.cover" mode="widthFix"></image>
					</view>
					<view class="list-item-cont">
						<view class="nowrap list-item-name">
							{{item.title}}
						</view>
						<view class="list-item-see">
							<image class="list-item-icon" src="@/static/imgs/indexSee.png" mode="widthFix"></image>{{item .clicks}} 游览
						</view>
						<view class="list-item-tips" v-for="(items, itemsIndex) in item.categories" :key="itemsIndex">
							{{items.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 是否有上级 -->
		<view class="tipsBack" v-if="generalShow"></view>
		<view class="tipsCont" v-if="generalShow">
			<view class="tipsWhite">
				<image class="tipsCont-img" src="@/static/imgs/seek_back.jpg" mode="widthFix"></image>
				<view class="tipsWhite-top">
					<view class="tipsWhite-name">
						抱歉，您还没有业务员
					</view>
					<view class="tipsWhite-text">
						绑定后，可立即咨询
					</view>
				</view>
				<view class="tipsWhite-btn">
					<view class="tipsWhite-btn-go" @click="generalShow = false">
						暂不绑定
					</view>
					<view class="tipsWhite-btn-go" @click="judgeGeneral">
						立即绑定
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 弹出 -->
		<view class="haveBack" v-if="haveimg"></view>
		<view class="haveCont" v-if="haveimg">
			<image class="haveCont-img" :src="layadImg" mode="widthFix"></image>
			<image class="haveCont-close" src="@/static/imgs/close.png" mode="widthFix" @click="haveHIde"></image>
		</view>
	</view>
</template>

<script>
	import { home, articleSort, articleList } from '@/apis/interfaces/index'
	import { userIndex } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				autoplay	 : true,
				interval	 : 3000,
				duration	 : 500,
				homeData	 : {},     // 首页数据
				homeList	 : '',     // 首页分类
				lawyersArr   : [],     // 精选律师
				noticesArr	 : [],     // 公告列表
				articleArr	 : [],     // 文章分类
				categoryId   : 1,      // 文章分类id
				listArr	     : [],     // 文章列表
				page         : {},     // 分页信息
				lodingStats  : false,  // 加载状态
				generalShow  : false,   // 是否有上级弹出
				parentData   : '',
				
				first        : 1,
				layadState   : '',
				layadImg     : '',
				haveimg      : ''
			}
		},
		onShow() {
			// 获取首页数据
			this.homeInfo();
			
			// 获取文章分类
		    this.articleInfo();
			
			// 获取文章列表
			this.articleItem();
			
			if(this.$store.getters.getToken) {
			    userIndex().then(res => {
					this.parentData = res.parent
			    }).catch(err => {
			    	uni.showToast({
			    		title: err.message,
			    		icon: "none"
			    	})
			    })
			}
		},
		
		methods: {
			// 首页数据
			homeInfo() {
			    home().then(res => {
					if(res.layad.is_lay_ad) {
						this.layadImg   = res.layad.lay_ad_img
					}
					
					let times = Number(res.layad.times.padEnd(4, 0))
					if(this.first === 1 && res.layad.is_lay_ad) {
						this.haveimg = true
						// 定时器
						let timer = setInterval(() => {
							clearInterval(timer)
							this.haveimg = false
						},times);
						
					}
					this.homeList   = res.categories
					this.lawyersArr = res.lawyers
					this.noticesArr = res.notices
					let newObj = {}
					    res.configs.map(item => newObj[item.slug] = {name: item.name, value: item.value})
					this.homeData = newObj
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 文章分类
			articleInfo() {
			    articleSort().then(res => {
					this.articleArr = res
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 文章分类筛选
			onTabs(e) {
				this.categoryId = e
				// 获取文章列表
				this.articleItem();
			},
			
			// 文章列表
			articleItem(page) {
			    articleList({
					category_id: this.categoryId,
					page       : page || 1
				}).then(res => {
					let list = this.listArr,
					    newData = []
					    if(page == 1 || page == undefined) list = []
					    newData = list.concat(res.data)
					this.listArr     = newData
					this.page        = res.page
					this.lodingStats = false
					uni.stopPullDownRefresh()
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 立即咨询判断
			seekClick(e, type) {
				if(this.$store.getters.getToken) {
				    if(this.parentData) {
						if(e != 'other') {
							// 跳到立即咨询
							this.$Router.push({name: 'indexIntroduce'})
						} else {
							// 跳到其他立即咨询
							this.$Router.push({name: 'sheetLoan', params: {type: type}})
						}
						return
					}
					// 业务员弹出
					this.generalShow = true
					return
				}
				
				// 去登录
				this.$Router.push({name: 'Login'})
			},
			
			// 状态
			judgeGeneral(){
				// 跳到业务员搜索
				this.$Router.push({name: 'indexWork'})
				
				// 关闭业务员弹出
				this.generalShow = false
			},
			
			// 页面相关事件处理函数--监听用户下拉动作
			onPullDownRefresh() {
			    // 获取文章列表
			    this.articleItem()
			},
			        
			// 上拉加载
			onReachBottom(){
			    this.lodingStats = true
			    let pageNumber = this.page.current
			    if(this.page.has_more){
			        pageNumber++
			        // 获取文章列表
			        this.articleItem(pageNumber)
			    }
			},
			
			// 关闭弹出
			haveHIde() {
				this.first = 0
				this.haveimg = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #f2f6f8;
	}
	.top {
		position: relative;
		.topBack {
			width: 100%;
			position: absolute;
			padding-top: 37%;
			background-image: linear-gradient(to right, #d51a59, #ed7646);
			border-radius: 0 0 $radius*4 $radius*4;
		}
		.topCont {
			width: 100%;
			position: inherit;
			top: 0;
			left: 0;
			padding: $padding;
			box-sizing: border-box;
			position: relative;
			.topCont-logo {
				display: flex;
				line-height: 58rpx;
				.topCont-logo-img {
					margin-right: 15rpx;
					width: 190rpx;
				}
				.topCont-logo-name {
					font-weight: 600;
				}
				
				.topCont-logo-go {
					background-color: #ffffff;
					border-radius: $radius*5;
					text-align: center;
					color: $mian-color;
					font-size: $title-size;
					line-height: 72rpx;
					font-weight: 600;
					display: inline-block;
					position: absolute;
					right: $margin;
					top: $margin + 10;
					padding: 0 $padding + 10;
				}
			}
			.topCont-text {
				margin-top: $margin;
				color: #ffffff;
				.topCont-text-name {
					font-size: $title-size + 6;
					font-weight: 600;
				}
				.topCont-text-tips {
					font-size: $title-size-sm;
					margin: $margin - 10 0 $margin;
					text {
						padding-right: $padding * 2;
						display: inline-block;
						position: relative;
					}
				}
			}
			.topCont-notice {
				width: 100%;
				height: 74rpx;
				overflow: hidden;
				display: flex;
				background-color: #ffffff;
				border-radius: $radius - 5;
				padding: 0 $padding;
				box-sizing: border-box;
				margin-bottom: $margin;
				.topCont-notice-name {
					color: $mian-color;
					font-size: $title-size-lg;
					font-weight: 600;
					width: 190rpx;
					line-height: 74rpx;
					display: flex;
					image {
						width: 38rpx;
						height: 38rpx;
						margin-top: 19rpx;
						margin-right: 10rpx;
						vertical-align: middle;
					}
				}
				.topCont-notice-cont {
					height: 74rpx;
					width: calc(100% - 190rpx);
					display: flex;
					.topCont-notice-title {
						font-size: $title-size-sm - 4;
						display: inline-block;
						border: 2rpx solid $mian-color;
						color: $mian-color;
						height: 34rpx;
						line-height: 32rpx;
						margin-top: 20rpx;
						width: 60rpx;
						text-align: center;
						border-radius: $radius - 10;
						margin-right: $margin - 10;
					}
					.topCont-notice-swiper {
						height: 74rpx;
						width: calc(100% - 60rpx);
						.topCont-swiper-item {
							display: flex;
							font-size: $title-size-sm - 2;
							line-height: 74rpx;
							.topCont-swiper-name {
								color: $text-color;
							}
						}
					}
				}
			}
			.topCont-tool {
				display: flex;
				.topCont-tool-left {
					width: calc(50% - 20rpx);
					position: relative;
					background-color: #554ca7;
					background-image: linear-gradient(to bottom right, #544df1, #8283ff);
					padding-top: calc(50% - 20rpx);
					margin-right: $margin - 10;
					border-radius: $radius;
					overflow: hidden;
					.topCont-whole-name {
						margin: 15rpx 0;
						font-size: $title-size + 6;
					}
					.topCont-whole-tips {
						line-height: 35rpx;
						font-size: $title-size-sm - 2;
						opacity: .9;
					}
					.topCont-whole-img {
						position: absolute;
						right: 0;
						bottom: 0;
						width: 100%;
					}
				}
				.topCont-tool-right {
					width: 50%;
				}
				.topCont-tool-label {
					position: relative;
					padding-top: calc(50% - 20rpx);
					border-radius: $radius;
					overflow: hidden;
					&:nth-child(1) {
						margin-bottom: 20rpx;
						background-image: linear-gradient(to bottom right, #f46049, #fe8479);
					}
					&:nth-child(2) {
						margin-top: 20rpx;
						background-image: linear-gradient(to bottom right, #32c4c2, #50ecc7);
					}
				}
				.topCont-tool-cont {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					overflow: hidden;
					padding: $padding - 10 $padding;
					box-sizing: border-box;
					color: #ffffff;
					.topCont-tool-name {
						margin-bottom: $margin - 15;
					}
					.topCont-tool-tips {
						font-size: $title-size-sm - 4;
						opacity: .7;
					}
					.topCont-tool-img {
						width: 80rpx;
						height: 80rpx;
						position: absolute;
						right: 25rpx;
						top: calc(50% - 40rpx);
					}
				}
			}
			.topCont-data {
				background-color: #f6f6f8;
				line-height: 70rpx;
				display: flex;
				margin-top: 30rpx;
				border-radius: $radius - 10;
				font-size: $title-size-sm - 2;
				.topCont-data-label {
					flex: 3;
					text-align: center;
					text {
						color: $mian-color;
						padding: 0 5rpx;
					}
				}
			}
		}
	}
	
	// 法律常识
	.list {
		padding:0 $padding;
		box-sizing: border-box;
		.list-title {
			font-weight: 600;
			margin-bottom: 10rpx;
			color: $text-color;
		}
		.lawyer {
			overflow: hidden;
			margin: 20rpx -15rpx 0;
			.lawyer-item {
				width: calc(50% - 30rpx);
				float: left;
				margin: 0 15rpx $margin;
				border: 2rpx solid #f1f1f1;
				box-sizing: border-box;
				border-radius: $radius-m;
				overflow: hidden;
				.lawyer-item-img {
					position: relative;
					width: 100%;
					padding-top: 55%;
					overflow: hidden;
					background-color: #515151;
					image {
						position: absolute;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
					}
					.lawyer-item-name {
						position: absolute;
						width: 100%;
						left: 0;
						bottom: 0;
						background-color: rgba(0, 0, 0, .1);
						line-height: 54rpx;
						color: #ffffff;
						padding: 0 $padding - 10;
						box-sizing: border-box;
						font-size: $title-size-lg;
					}
				}
				.lawyer-item-cont {
					padding: $padding - 10;
					box-sizing: border-box;
					.lawyer-item-tips {
						font-size: $title-size-m;
						color: $text-color;
					}
					.lawyer-item-price {
						display: flex;
						margin-top: 10rpx;
						line-height: 44rpx;
						.lawyer-item-number {
							flex: 1;
							color: $mian-color;
							font-weight: 600;
							font-size: $title-size;
						}
						text {
							font-size: $title-size-sm;
							color: #9d9d9d;
						}
					}
				}
			}
		}
		
		.list-tabs {
			background-color: #f0f0f0;
			border-radius: $radius-m;
			padding: 5rpx $padding 15rpx;
			box-sizing: border-box; 
			margin-top: $margin - 10;
		}
		
		.list-classify {
			white-space: nowrap;
			.list-tabs-item {
				display: inline-block;
				font-size: $title-size-m;
				color: $text-color;
				padding-right: 50rpx;
				line-height: 54rpx;
				position: relative;
				border-bottom: 6rpx solid #e5e5e5;
				&::after {
					position: absolute;
					content: '';
					left: 0;
					bottom: -6rpx;
					background-color: transparent;
					border-radius: $radius*3;
					width: calc(100% - 50rpx);
					height: 6rpx;
					z-index: 9;
				}
				&:last-child {
					padding-right: 0;
				}
				&.show {
					color: #000000;
				}
				&.show::after {
					background-color: $mian-color;
				}
			}
			::-webkit-scrollbar{
				width: 0;
				height: 0;
				color: transparent;
			}
		}
		.list-item {
			margin-top: $margin;
			.list-item-label {
				margin-bottom: $margin;
				position: relative;
				.list-item-img {
					width: 200rpx;
					height: 150rpx;
					display:table-cell; 
					text-align:center; 
					vertical-align:middle;
					border:1px solid #d2d2d2;
					border-radius: $radius - 10;
					overflow: hidden;
					box-sizing: border-box;
					image {
						width: 100%;
						vertical-align:middle; 
					}
				}
				.list-item-cont {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					padding-left: 220rpx;
					box-sizing: border-box;
					box-sizing: border-box;
					.list-item-name {
						color: $text-color;
						line-height: 44rpx;
						font-size: $title-size-m;
					}
					.list-item-see {
						font-size: $title-size-sm - 4;
						margin-top: 30rpx;
						display: flex;
						line-height: 30rpx;
						.list-item-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
					}
					.list-item-tips {
						font-size: $title-size-sm - 4;
						display: inline-block;
						color: #a1a1a1;
						padding-left: 40rpx;
					}
				}
			}
		}
	}
	
	// 是否有上级
	.tipsBack {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 9;
		background-color: rgba(0, 0, 0, .8);
	}
	.tipsCont {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-box-pack: center;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 10;
		padding: 0 10%;
		box-sizing: border-box;
	}
	
	.tipsWhite {
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.tipsWhite-top {
		padding: $padding;
		box-sizing: border-box;
		text-align: center;
	}
	
	.tipsCont-img {
		width: 100%;
	}
	
	.tipsWhite-name {
		text-align: center;
		color: #111111;
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 15rpx;
	}
	
	.tipsWhite-text {
		font-size: 30rpx;
		color: #666666;
		line-height: 48rpx;
	}
	
	.tipsWhite-btn {
		display: flex;
		padding: $padding 10rpx;
		box-sizing: border-box;
		.tipsWhite-btn-go {
			flex: 2;
			color: #fff;
			margin: 0 15rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #F6F6F6;
			background-color: #007df5;
			border-radius: $radius-m;
			&:first-child {
				color: #333333;
				background-color: #ffffff;
				border: 2rpx solid #cccccc;
			}
		}
	}
	
	// 图片弹出
	.haveBack {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 9;
		background-color: rgba(0, 0, 0, .7);
	}
	.haveCont {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-box-pack: center;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 10;
		padding: 0 10%;
		box-sizing: border-box;
		text-align: center;
	}
	
	.haveCont-img {
		width: 75%;
		border-radius: 20rpx;
		overflow: hidden;
		display: block;
		margin: 0 auto;
	}
	
	.haveCont-close {
		width: 52rpx;
		height: 52rpx;
		margin-top: 10px;
		opacity: .8;
	}
</style>
