<template>
	<view class="content">
		<!-- 搜索 -->
		<view class="head">
			<piker-search @handleSearch="handleSearch" :placeholder='"找客户/找产品"' :width="'60'"></piker-search>
			<view class="fangke">
				<icon class="iconfont icon-remen"></icon>
				<text>今日访客：{{todayviewer}}人</text>
			</view>
		</view>
		<view class="login" @click="handleLogin" v-if="!token">
			登录后查看更多内容资讯，点击此处<text>登录</text>
		</view>
		<!-- banner  -->
		<view class="tips" :style="{'margin':!token?'0':'50px 0 10px'}">
			<text @click="navTo('/pageTwo/me/company')" v-if="token&&!mobile" style="margin-top: 10px;">请尽快完善企业信息</text>
		</view>
		<view class="f_banner" v-if="fimages.length">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true">
				<swiper-item v-for="(image, index) in fimages" :key="index" @click="detail(image.id,5)">
					<image :src="image.headimg" mode="scaleToFill" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告 -->
		<view class="box">
			<view class="notice" v-if="notices.length">
				<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 centerList" style="margin-top: 10px;" v-if="HomeContent&&centerList.length">
				<swiper class="swiper" autoplay="true">
					<swiper-item v-for="(ite, index) in centerList" :key="index">
						<image :src="ite.headimg" v-if='ite.posfmtype!=2' @click="detail(ite.id,5)" />
						<video v-else id="myVideo" :src="ite.headimg" @error="videoErrorCallback" controls
							:muted="false" :autoplay="true" :show-mute-btn='true' object-fit="fill"
							:loop="true"></video>
					</swiper-item>
				</swiper>
			</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>
				<swiper class="swiper " display-multiple-items='5' autoplay="true" circular="true" interval='3000'>
					<swiper-item v-for="(item,index) in list" :key="index" @click="handleDetail(item)">
						<view class="item mt-15">
							<image :src="item.avatar" mode="aspectFill"></image>
							<view class="name">{{item.name}}</view>
							<view class="post">{{item.posname}}</view>
						</view>
					</swiper-item>
				</swiper>


			</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" @handleSearchId="handleSearchId">
				</list>
				<view class="nolist" style="margin-top: 15px;" v-if="!newsList.length">
					<image src="@/static/none.png"></image>
					<text>暂无数据</text>
				</view>
			</view>
			<!-- 客服 -->
			<message></message>
			<!-- 底部 -->
			<tabbar :tabInd="0"></tabbar>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import headbg from "@/components/header.vue"
	import tabbar from "@/components/tabBar.vue"
	import list from "@/components/newsList.vue"
	import pikerSearch from "../../components/search.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,
			headbg,
			tabbar,
			pikerSearch,
		},
		onLoad() {
			let that = this
			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("分享到朋友失败")
				},
			}
		},
		onShareTimeline() {
			return {
				title: '沪抖团线上展厅',
				query: '',
				imageUrl: '',
				success: function(res) {
					console.log("分享到朋友圈成功")
				},
				fail: function(res) {
					console.log("分享到朋友圈失败")
				},
			}
		},
		methods: {
			login() {
				let that = this
				uni.login({
					success(res2) {
						if (res2.code) {
							if (res2.errMsg = "login:ok") {
								console.log("code", res2.code)
								that.$model.onlogin({
									code: res2.code,
								}).then(res => {
									console.log("1111111111", 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 => {})
							}
						}
					}
				})
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			// 领导风采
			handleVipList() {
				let that = this
				that.$model.getVipList({
					pageNo: 1,
					pageSize: 100,
				}).then(res => {
					if (res.code == 0) {
						console.log("风采", res.data.rows)
						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
				// }
				if (ite != "") {
					uni.navigateTo({
						url: "/pages/index/searchList?ite=" + ite
					})
				}
			},
			// 工具栏跳转
			handlePath(ind, url) {
				let that = this
				this.navTo(url)
				// 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
				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)

				})
			},
			handleSearchId(id, cnt) {
				let that = this
				console.log("返回", id, cnt)
				that.newsList.forEach(ite => {
					if (ite.id == id) {
						ite.browsecnt = cnt
					}
				})
			},
			// 登录
			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;
		min-height: calc(100vh - 90px);
		padding-bottom: 90px;

	}

	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		background-color: #f7f7f7;
	}

	.head {
		height: 35px;
		position: fixed;
		top: 84px;
		left: 0;
		right: 0;
		padding: 0 10px 10px;
		z-index: 999;
	}

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

		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: 19;
		color: #fff;
		right: 10px;
		top: 0px;
		font-size: 12px;
		line-height: 35px;
		display: flex;

		icon {
			color: red;
		}
	}

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

		/deep/swiper {
			height: 360rpx;
		}

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

	.centerList {
		height: 399.4rpx;

		/deep/swiper {
			height: 399.4rpx;
		}

		/deep/video {
			width: 100%;
			height: 399.4rpx;
		}
	}


	.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 {
		padding-bottom: 5px;

		/deep/swiper {
			width: 100%;
			height: 240rpx;
		}

		.item {
			width: 100%;

			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: $blue;
				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>