<template>
	<view class="home">
		<!-- <view class="home-search">
			<view class="a">
				<image src="/static/search.png"></image>
				<input type="search" placeholder="请输入章节/题目" />
			</view>
			<view class="b">搜索</view>
		</view> -->
		<view class="home-swiper" v-if="bannerList.length > 0">
			<u-swiper :list="bannerList" circular autoplay></u-swiper>
		</view>
		<view class="home-notice">
			<image :src="staticUrl('/static/icon-notice.png')"></image>
			<view class="box" v-if="text4 && text4.length >0">
				<u-notice-bar icon=" "  color="#333333" bgColor="#ffffff" :text="text4"  @click="toDetail" direction="column"></u-notice-bar>
				<image :src="staticUrl('/static/icon-arrow.png')"></image>
			</view>
			<view v-else style="margin-left: 20rpx;">暂无公告</view>
		</view>
		<view class="home-menu">
			<view class="a" @click="openPage(1)"><image :src="staticUrl('/static/menu-01.png')"></image>专属推广码</view>
			<view class="b" @click="openPage(2)"><image :src="staticUrl('/static/menu-02.png')"></image>试题购买</view>
		</view>
		<view class="home-list" v-if="isShow1 == true">
			<view class="a">行业资讯</view>
			<view class="b">
				<view class="item" v-for="(i,index) in industryList" :key="index" @click="openPage(3,i)">
					<view class="info">
						<view class="n">{{i.title}}</view>
						<view class="d" v-html="i.describes"></view>
						<view class="t">{{i.created_at}}</view>
					</view>
					<image class="pic" :src="i.image"></image>
				</view>
				<view class="empty" style="margin-top: 250rpx;" v-if="isShow">
					<u-empty mode="data" text="暂无相关信息">
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isShow1: false,
				isShow: true,
				bannerList: [],
				text3: [],
				text4: [],
				industryList:[],
			};
		},
		onShow() {
			this.getBanner();
			// 4活动公告
			this.getArticleList(4);
			//5行业咨询
			this.getArticleList(5);
			this.getConfig1();
		},
		onPullDownRefresh() {
			this.getBanner();
			// 4活动公告
			this.getArticleList(4);
			//5行业咨询
			this.getArticleList(5);
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			//开关
			async getConfig1() {
				const { code, data, msg } = await this.$api.getConfigIndex({})
				if (code == 200) {
					this.isShow1 = data.is_open;
				}
			},
			toDetail(i){
				uni.setStorageSync("articleInfo",this.text3[i])
				uni.navigateTo({
					url: "/pages/index/detail"
				})
			},
			openPage(index,i) {
				if(index == 1){
					if(!uni.getStorageSync('userToken')){
						uni.navigateTo({
							url: "/pages/login/login"
						})
						return ;
					}
					uni.setStorageSync("isShare", 1)
					uni.switchTab({
						url: "/pages/user/index"
					})
				}else if(index == 2){
					uni.navigateTo({
						url: "/pages/question/buyOne"
					})
				}else if(index == 3){
					uni.setStorageSync("articleInfo",i)
					uni.navigateTo({
						url: "/pages/index/detail"
					})
				}
			},
			//获取banner
			async getBanner() {
				const { code, data, msg } = await this.$api.bannerList({})
				this.bannerList = [];
				if(code == 200){
					data.map(i=>{
						this.bannerList.push(i.image)
					})
				}else{
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			async getArticleList(type) {
				const { code, data, msg } = await this.$api.articleList({type})
				let arr = [],arr1 = [];
				if(code == 200){
					if(data && data.length > 0){
						data.map(i=>{
							arr.push(i)
							arr1.push(i.title)
						})
					}
					if(type == 4){
						this.text3 = arr;
						this.text4 = arr1;
					}else if(type == 5){
						this.industryList = arr;
						if(arr.length>0){
							this.isShow = false;
						}else{
							this.isShow = true;
						}
					}
				}else{
					this.isShow = true;
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
 .home{
	 width: 100%;
	 padding: 0 25rpx;
	 overflow: hidden;
	 box-sizing: border-box;
	&-search{
		 padding: 25rpx 0;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 .a{
			 display: flex;
			 align-items: center;
			 width: 620rpx;
			 height: 66rpx;
			 background: #FFFFFF;
			 border-radius: 33px;
			 image{
				 width: 45rpx;
				 height: 45rpx;
				 margin-right: 20rpx;
				 margin-left: 20rpx;
			 }
			 input{
				 flex: 1;
				 line-height: 66rpx;
				 font-size: 28rpx;
				 color: #212121;
			 }
		 }
		 .b{
			 width: 80rpx;
			 text-align: right;
			 font-size: 28rpx;
			 font-weight: 400;
			 color: #188EFC;
		 }
	 }
	&-swiper{
		height: 260rpx;
		margin-top: 20rpx;
		overflow: hidden;
	}
	&-notice{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 0 25rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		margin-top: 20rpx;
		.box{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		image{
			width: 45rpx;
			height: 45rpx;
		}
	}
	&-menu{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;	
		margin-top: 30rpx;
		.a{
			width: 330rpx;
			height: 120rpx;
			background: url(/static/bg-01.png) center top no-repeat;
			background-size: contain;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			image{
				width: 50rpx;
				height: 50rpx;
				margin-right: 13rpx;
			}
		}
		.b{
			width: 330rpx;
			height: 120rpx;
			background: url(/static/bg-02.png) center top no-repeat;
			background-size: contain;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			image{
				width: 50rpx;
				height: 50rpx;
				margin-right: 13rpx;
			}
		}
	}
	&-list{
		overflow: hidden;
		padding-bottom: 30rpx;
		.a{
			text-align: left;
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #333333;
			line-height: 50rpx;
			padding: 40rpx 0 0;
		}
		.b{
			overflow: hidden;
			.item{
				padding: 30rpx;
				overflow: hidden;
				box-sizing: border-box;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				background-color: #FFFFFF;
				margin-top: 30rpx;
				border-radius: 20rpx;
				.pic{
					width: 200rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-left: 45rpx;
				}
				.info{
					width: 390rpx;
					.n{
						font-size: 30rpx;
						font-weight: 400;
						color: #222222;
						line-height: 42rpx;
						overflow: hidden;
						display: -webkit-box;
						height: 84rpx;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.d{
						line-height: 42rpx;
						font-size: 26rpx;
						white-space: nowrap;
						font-weight: 400;
						text-overflow: ellipsis;
						overflow: hidden;
						color: #999999;
					}
					.t{
						line-height: 42rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
}
</style>
