<template>
	<view class="cotainer">
		<image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image>
		<view class="navBarBox">
			<!-- <image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image> -->
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
			<image class="navBarBox-title" :style="{marginTop: navBarTop+'rpx'}" :src="require('@/static/warlogo.png')"
				mode=""></image>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">

			</view>
		</view>
		<view class="line">
			<view class="line-title">
				<image :src="require('@/static/wartitle.png')" mode=""></image>
			</view>
			<block v-if="listLine.length>0">
				<view class="line-item" v-if="index<6" v-for="(item,index) in listLine" @click="toDetail(item.id)">
					<block>
						<image :src="item.image.url"></image>
						<view>
							<view>{{item.name}}</view>
						</view>
					</block>
				</view>
				<view v-if="!showMore" class="line-more" @click="showMore=true">
					<image :src="require('@/static/warmore.png')"></image>
				</view>
				<view class="line-item" v-if="index>5 && showMore" v-for="(item,index) in listLine"
					@click="toDetail(item.id)">
					<block>
						<image :src="item.image.url"></image>
						<view>
							<view>{{item.name}}</view>
						</view>
					</block>
				</view>
			</block>
		</view>
		<!-- video -->
		<view class="videoLine">
			<block v-if="videoList.length>0">
				<view class="videoLine-item" v-for="item in videoList" @click="playVideos(item.video.url)">
					<view class="videoLine-item-image">
						<image class="videoLine-item-image-play"
							:src="require('@/packages/static/detail-videoplay.png')"></image>
						<image class="videoLine-item-image-image" :src="item.image.url"></image>
					</view>
					<view class="videoLine-item-title">
						<view>{{item.title}}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 全屏播放视频 -->
		<!-- 全屏播放 -->
		<view class="playvideo" v-if="playvideo" @click="playvideo=false">
			<view class="playvideowrap">
				<video ref="videos" id="videos"  :show-fullscreen-btn="false" :autoplay="true" @play="playFullScreen" :src="videoUrl?videoUrl:''"
					play-btn-position="center"></video>
				<view class="closevideo" @click="playvideo=false,videoUrl=''">X</view>
			</view>
		</view>
		
		<!-- 文章 -->
		<view class="articleLine">
			<block v-if="articleList.length>0">
				<view class="articleLine-item" v-for="item in articleList" @click="goArticle(item.id)">
					<view class="articleLine-item-dot"></view>
					<view class="articleLine-item-title">{{item.title}}</view>
				</view>
			</block>
		</view>

		<tabbar :currentPage="1"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import {
		shareInfo
	} from '@/common/util.js'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				navBarTop: 0,
				listLine: [],
				showMore: false,
				videoList: [],
				playvideo: false,
				videoUrl: '',
				articleList:[]
			}

		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline() {
			return shareInfo
		},
		onReady() {

		},
		onLoad() {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
			// this.getUserLocation()
			this.getLines()
			this.getVideos()
			this.getArticles()
		},
		methods: {
			playFullScreen() {
				let videoContext = uni.createVideoContext('videos', this)
				videoContext.requestFullScreen()
			},
			async getLines() {
				const res = await this.$u.api.getPoints({
					table_name: "map-points",
					page: 1,
					page_size: 999,
					sort_name: 'sort',
					sort_type: 'ASC',
					is_show: 1
					// with_relations:['image']
				})


				this.listLine = res.points
			},
			toDetail(e) {
				uni.navigateTo({
					url: '/packages/detail/detail?id=' + e,
				});
			},
			async getVideos() {
				const res = await this.$u.api.baseFormIndex1({
					table_name: "map_point_videos",
					page: 1,
					page_size: 999,
					sort_name: 'sort',
					sort_type: 'ASC',
					'filter[0][key]': 'type',
					'filter[0][op]': 'eq',
					'filter[0][value]': 1,
				})
				this.videoList = res.data
			},
			playVideos(url) {
				if (!url) {
					return
				}
				this.videoUrl = url
				this.playvideo = true
			},
			async getArticles() {
				const res = await this.$u.api.baseFormIndex({
					table_name: "map_point_image_articles",
					page: 1,
					page_size: 999,
					sort_name: 'sort',
					sort_type: 'ASC',
					'filter[0][key]': 'type',
					'filter[0][op]': 'eq',
					'filter[0][value]': 1,
				})
				this.articleList = res.data
			},
			goArticle(e) {
				uni.navigateTo({
					url: '/packages/detail/articleDetail?id=' + e,
				});
			},
		}
	}
</script>

<style lang="scss">
	.cotainer {
		background: #f3efea;
		width: 100vw;
		padding-bottom: 135rpx;
		height: 100vh;
		overflow: scroll;

		.playvideo {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.6);

			&>.playvideowrap {
				width: 95%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				video {
					width: 100%
				}

				::v-deep .u-indicator-item-round.u-indicator-item-round-active {
					background-color: #bf3022;
				}

				.closevideo {
					color: #fff;
					width: 50rpx;
					height: 50rpx;
					border: 1px solid #fff;
					border-radius: 50rpx;
					position: absolute;
					text-align: center;
					line-height: 50rpx;
					/* display: inline-block; */
					right: 0rpx;
					top: -25rpx // transform: translate(0,-50%);
				}
			}

		}

		.bg {
			height: 100vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
		}

		.navBarBox {
			// height: 299rpx;
			position: relative;
			padding-bottom: 30rpx;
			top: 0;
			left: 0;
			width: 100%;

			&-title {
				width: 570rpx;
				height: 288rpx;
				margin: 0 auto;
				position: relative;
				display: block;
			}

			.navBar {
				display: flex;
				position: relative;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
			}
		}

		.line {
			position: relative;
			z-index: 99;
			margin: 0 30rpx;
			border: 1rpx solid #f2bd75;
			border-radius: 40rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 40rpx;

			&-title {
				width: 350rpx;
				height: 96rpx;
				position: absolute;
				top: -56rpx;
				left: 50%;
				transform: translate(-50%, 0);

				&>image {
					width: 350rpx;
					height: 96rpx;
				}
			}

			&-more {
				width: 100%;
				text-align: center;

				&>image {
					width: 322rpx;
					height: 89rpx;
					display: inline-block;
					margin: 0 auto;
					padding: 30rpx 0;
				}
			}

			&-item {
				font-size: 0;
				border-radius: 10rpx;
				background-color: #fff;
				margin: 20rpx 0;
				width: 308rpx;
				height: 320rpx;

				&>image {
					width: 308rpx;
					height: 230rpx;
					display: block;
					border-radius: 10rpx 10rpx 0 0;
				}

				&>view {
					color: #565656;
					text-align: center;
					font-size: 28rpx;
					height: 90rpx;
					position: relative;

					&>view {
						width: 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						padding: 0 10rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 1.5;
					}

				}
			}
		}

		.videoLine {
			position: relative;
			z-index: 99;
			padding: 60rpx 30rpx;
			display: flex;
			padding-top: 40rpx;
			background-color: #e3daca;
			margin-top: 30rpx;
			width: 100%;
			overflow-x: scroll;

			&-item {
				font-size: 0;
				border-radius: 10rpx;
				background-color: #fff;
				margin-right: 30rpx;
				width: 615rpx;
				height: 385rpx;

				&-image {
					width: 615rpx;
					height: 305rpx;
					border-radius: 10rpx 10rpx 0 0;
					position: relative;

					&-image {
						width: 615rpx;
						height: 305rpx;
						display: block;
						border-radius: 10rpx 10rpx 0 0;
					}

					&-play {
						width: 67rpx;
						height: 68rpx;
						background-size: 100% 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						z-index: 10;
					}

				}

				&-title {
					height: 80rpx;
					position: relative;

					&>view {
						width: 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						padding: 0 10rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 1.5;
						font-size: 28rpx;
						text-align: center;
					}
				}
			}
		}
		.articleLine {
			position: relative;
			z-index: 99;
			padding: 60rpx 30rpx;
			padding-top: 40rpx;
			margin-top: 30rpx;
			width: 100%;
			&-item{
				display: flex;
				align-items: center;
				color:#565656;
				font-size: 28rpx;
				border-bottom: 1rpx solid rgba(0,0,0,0.1);
				padding:40rpx 0;
				&-dot{
					width:10rpx;
					height:10rpx;
					border-radius: 10rpx;
					background-color: #565656;
				}
				&-title{
					width:calc(100% - 10rpx);
					padding-left:20rpx;
				}
			}
		}
	}
</style>