<template>
	<view class="content">
		<!-- 搜索 -->
		<view class="head" v-if="token">
			<piker-search @handleSearch="handleSearch" :placeholder='"找客户/找产品/找供应"' :width="'60'"></piker-search> -->
			<view class="fangke">
				<icon class="iconfont icon-remen"></icon>
				<text>今日访客：{{todayviewer}}人</text>
			</view>
		</view>
		<view v-else class="login" @click="handleLogin">
			登录后查看更多内容资讯，点击此处<text>登录</text>
		</view>
		<!-- banner  -->
		<view class="tips" :style="{'margin':!token?'0':'110rpx 0 10px'}">
			<text v-if="token&&!mobile" @click="navTo('/pageTwo/me/company')">请尽快完善企业信息</text>
		</view>
		<view class="f_banner">
			<view v-if="fimages.length">
				<swiper class="swiper" indicator-dots="true" autoplay="true">
					<swiper-item v-for="(image, index) in fimages" :key="index" @click="detail(image.id,5)">
						<image :src="image.headimg" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<text>头条</text>
			<!--  -->
			<swiper class="swiper" vertical="true" autoplay="true">
				<swiper-item v-for="(item,index) in notices" :key="index" @click="detail(item.id,6)">
					<view class='overflow'>{{item.title}}</view>
				</swiper-item>
			</swiper>

		</view>
		<!-- 工具 -->
		<view class="tools">
			<view class="item" v-for="(item,index) in navbarlist" :key="index" @click="handlePath(index,item.link)">
				<image :src="item.image"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 简介 -->
		<view class="f_banner" style="margin-top: 15px;">
			<view v-if="HomeContent&&centerList.length">
				<swiper class="swiper" autoplay="true">
					<swiper-item v-for="(image, index) in centerList" :key="index" @click="detail(image.id,5)">
						<image :src="image.headimg" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 风采 -->
		<view class="tools fengcai" v-if="list.length">
			<view class="title" @click="navTo('/pages/index/fengCai')">
				<text class="ml-10">领导风采</text>
				<text class="mr-10">查看更多></text>
			</view>
			<view class="item mt-15" v-for="(item,index) in list.length>5?list.slice(0,5):list" :key="index" @click="handleDetail(item)" >
				<image :src="item.avatar" mode="aspectFill"></image>
				<view class="name">{{item.name}}</view>
				<view class="post">{{item.posname}}</view>
			</view>
		</view>
		<!-- 资讯活动 -->
		<view class="zixun">
			<view class="title mt-10" @click="navTo('/pageTwo/news/list?type=1')">
				<text>资讯活动</text>
				<text v-if="newsList.length">查看更多></text>
			</view>
			<list :isAddress="1" :list="newsList" v-if="newsList.length"></list>
			<view class="nolist" style="margin-top: 15px;" v-if="!newsList.length">
				<image src="@/static/none.png"></image>
				<text>暂无数据</text>
			</view>
		</view>
		<!-- 客服 -->
		<message></message>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import list from "@/components/newsList.vue"
	import pikerSearch from "../../components/search.vue"
	import UniNoticeBar from "../../uni_modules/uni-notice-bar/uni-notice-bar.vue"
	export default {
		data() {
			return {
				list: [],
				token: '',
			}
		},
		computed: {
			...mapState(["user", "HomeContent", 'InfoList',"navbarlist"]),
			mobile() {
				return this.user.name ? this.user.cominfo.mobile : ''
			},
			centerList() {
				return this.HomeContent ? this.HomeContent.centerbannerlist : []
			},
			todayviewer() {
				return this.HomeContent ? this.HomeContent.todayviewer : []
			},
			fimages() {
				return this.HomeContent ? this.HomeContent.bannerlist : []
			},
			notices() {
				return this.HomeContent ? this.HomeContent.noticelist : []
			},
			newsList() {
				return this.InfoList.rows ? this.InfoList.rows : []
			},
			tools() {
				return this.$json.tools
			},
		},
		components: {
			list,
			pikerSearch,
			UniNoticeBar
		},
		async onLoad() {
			let that = this
			await that.login()
			that.token = uni.getStorageSync('token')
			that.$store.dispatch('getInfoList', {
				searchValue: "",
				pageNo: 1,
				pageSize: 3,
			})
			that.handleVipList()
		},
		onShareAppMessage() {
			let that = this
			return {
				title: "智造团",
				path: '/pages/index/index',
				imageUrl: '',
				success: function(res) {
					console.log("分享到朋友成功")
				},
				fail: function(res) {
					console.log("分享到朋友失败")
				},
			}
		},
		methods: {
			login() {
				let that = this
				uni.login({
					success(res) {
						if (res.code) {
							if (res.errMsg = "login:ok") {
								that.$model.onlogin({
									code: res.code,
								}).then(res => {
									if (res.code == 2) {
										that.token = null
										uni.clearStorageSync()
										uni.setStorageSync('sessionid', res.data.sessionid)
										return
									}
									if (res.code == 0) {
										that.token = res.data.token
										uni.setStorageSync('token', res.data.token)
										uni.setStorageSync('refreshtoken', res.data.refreshtoken)
										uni.setStorageSync('sessionid', res.data.sessionid)
										that.$store.dispatch("getUserInfo")
									}
								}).catch(e => {})
							}
						}
					}
				})
			},
			// 领导风采
			handleVipList() {
				let that = this
				that.$model.getVipList({
					pageNo: 1,
					pageSize: 6,
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data.rows
					}
				})
			},
			// 领导风采详情
			handleDetail(ite) {
				let that = this
				// if (!that.token) {
				// 	that.$tools.msg("登录后查看更多")
				// 	return
				// }
				uni.navigateTo({
					url: "/pages/phoneList/detail?id=" + ite.id
				})
			},

			// 全局搜索
			handleSearch(ite) {
				let that = this
				console.log("搜索信息返回", ite)
				// if (!that.token) {
				// 	that.$tools.msg("登录后查看更多")
				// 	return
				// }
				uni.navigateTo({
					url: "/pages/index/searchList?ite=" + ite
				})
			},
			// 工具栏跳转
			handlePath(ind, url) {
				let that = this
				if (ind == 3) {
					uni.switchTab({
						url: url
					})
				} else if (ind == 2) {
					uni.navigateTo({
						url: url + "?content=2"
					})
				} else {
					this.navTo(url)
				}
			},
			// 轮播、公告、资讯详情
			detail(id, type) {
				let that = this
				// if (!that.token) {
				// 	that.$tools.msg("登录后查看更多")
				// 	return
				// }
				return that.$model.getInfoDetail({
					id: id,
					type: type
				}).then((res) => {
					console.log("资讯列表", res)
					if (res.code != 0) return
					res.data.type = type
					that.$tools.NewsPtype(res.data)

				})
			},
			// 登录
			handleLogin() {
				uni.navigateTo({
					url: "/pageTwo/login/login"
				})
			},
			navTo(url, ) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
	}

	.head {
		height: 35px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 10px 10px;
		z-index: 9;
		background-color: $blue;
	}

	.login {
		width: 100%;
		text-align: center;
		height: 45px;
		line-height: 45px;
		border-radius: 5px;

		text {
			color: $blue;
			font-size: 16px;
			font-weight: bold;
			margin-left: 5px;
			padding: 0 3px;
			border-bottom: 1px solid $blue;
		}
	}

	.fangke {
		position: fixed;
		z-index: 9;
		color: #fff;
		right: 10px;
		top: 0px;
		font-size: 12px;
		line-height: 35px;
		display: flex;

		icon {
			color: red;
		}
	}

	// banner
	.f_banner {
		width: 100%;
		height: 240rpx;

		/deep/swiper {
			height: 240rpx;
		}

		image {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}

	.notice {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
		margin-top: 10px;
		border-radius: 10px;

		text {
			width: 60px;
			font-size: 18px;
			color: $red;
			font-weight: bold;
			text-align: center;
			border-right: 1px solid #dfdfdf;
		}

		/deep/swiper {
			width: calc(100% - 15px);
			height: 40px;
			line-height: 40px;
			margin-left: 15px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

	}

	.tools {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		padding-top: 10px;
		border-radius: 10px;
		background-color: #fff;

		.item {
			width: 25%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-bottom: 10px;

			text {
				width: 100%;
				display: block;
				text-align: center;
				margin-top: 5px;
			}
		}

		image {
			width: 45px;
			height: 45px;
		}
	}

	.jianjie {
		width: 100%;
		margin-top: 10px;
		height: 100px;

		image {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}

	.title {
		width: 100%;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		color: #000;
		justify-content: space-between;
	}

	.fengcai {
		.item {
			width: 20%;

			image {
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}

			.name,
			.post {
				width: 90%;
				margin-top: 5px;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.post {
				background-color: #F7B133;
				text-align: center;
				font-size: 12px;
				padding: 2px 0;
				border-radius: 5px;
				color: #fff;
			}
		}
	}

	.zixun {
		width: calc(100% - 20px);
		background: #fff;
		margin-top: 10px;
		margin-bottom: 15px;
		padding: 0 10px;

		.item {
			display: flex;
			justify-content: space-between;
			margin: 15px 10px 0;
			padding-bottom: 10px;
			border-bottom: 1px solid #f7f7f7;

			.left {
				width: calc(100% - 115px);
				height: 70px;
				display: flex;
				flex-wrap: wrap;
				flex-flow: column;
				justify-content: space-between;

				.title {
					width: 100%;
					font-size: 14px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.time {
					width: 100%;
					margin-top: 10px;

					view {
						display: flex;
						font-size: 12px;
						align-items: center;
						float: left;
					}
				}
			}

			.right {
				width: 105px;
				height: 70px;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.tips {
		width: 100%;

		text {
			width: 100%;
			color: #f5222d;
			background: #fff1f0;
			border: 1px solid #ffa39e;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 5px;
			display: block;
		}
	}
</style>