<template>
	<view class="wrap">
		<view>
			<img class="exhibit_bg" :src="bgimg" alt="">
		</view>
		<view class='content' :style="{'padding-top':padTop+'px'}">
			<view class="exhibit" @click='toExhibitList'>
				<view>
					<view>
						<span></span>
						<span>当前展览</span>
					</view>
					<u-icon name="arrow-right" color="#fff"></u-icon>
				</view>
			</view>
			<view class="exhibit_list">
				<view v-for="item in exhibitList" class="exhibit_item" @click='todetail(item.id)'>
					<img :src="item.head_upload.url" alt="">
					<view>
						<view>{{item.name}}</view>
						<view>时间：{{item.dateRange}}</view>
					</view>
				</view>
			</view>
			<view class="relic">
				<view :class="!showBook?'relic_active':''" @click="changeBook">革命文物</view>
				<view :class="showBook?'relic_active':''" @click="changeBook('book')">党史书籍</view>
			</view>
			<view class="books" v-if="showBook">
				<image class="books_img" src="../../static/book/book_bottom.png" mode=""></image>
				<u-swiper @click="toBook" :list="bookList" :displayMultipleItems="displayMultipleItems" :circular="true"
					:indicator="true" indicatorStyle="bottom" indicatorMode="dot" bgColor="transparent"
					indicatorActiveColor="#9f4946" indicatorInactiveColor="#9f4946" :autoplay="false"
					radius="0"></u-swiper>
				<!-- <swiper class="swiper" circular
					next-margin="180rpx">
					<swiper-item v-for="(item,index) in bookList" @click="toBook(item.id)">
						<view class="myswiper-item-img">
							<image
								:src="item.url?item.url:''" alt="" mode="heightFix">
						</view>
					</swiper-item>
				</swiper> -->
			</view>
			<view class="relics" v-else>
				<view class="myswiper">
					<swiper class="swiper" @change="changeRelic" :current="relicIndex" circular previous-margin="180rpx"
						next-margin="180rpx">
						<swiper-item v-for="(item,index) in relicList" @click="toRelicDetail(item.id)">
							<view class="myswiper-item-img">
								<image :style="{'transform':relicIndex===index?'scale(1.05)':''}"
									:src="item.head_upload?item.head_upload.url:item.threed.url" alt="" mode="widthFix">
							</view>
						</swiper-item>
					</swiper>
					<view class="myswiper-item-title">
						<view class="">
							{{relicList[relicIndex].name?relicList[relicIndex].name:''}}
						</view>
						<!-- <view class="">
							革命博物馆典藏
						</view> -->
					</view>
					<!-- <view class="myswiper-item" v-for="(item,index) in relicList">
						<view class="myswiper-item-img">
							<image :src="item.head_upload.url" alt="">
						</view>
						<view class="myswiper-item-title">
							<view class="">
								{{item.name}}
							</view>
							<view class="">
								革命博物馆典藏
							</view>
						</view>
						
						
					</view> -->
				</view>

			</view>
			<!-- <view class="relic_list">
				<view v-for="item in relicList" class="relic_item" @click='toRelicDetail(item.id)'>
					<img :src="item.head_upload.url" alt="">
					<view>
						<view>{{item.name}}</view>
						<view>{{item.contain}}</view>
					</view>
				</view>
			</view> -->
		</view>




		<tabbar :current-page="3"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				exhibitList: [],
				bookList: [],
				relicList: [],
				bgimg: '../../static/book/relic_bg.png',
				padTop: 0,
				showBook: false,
				relicIndex: 0,
				displayMultipleItems: 0,
				authToken: ''
			}
		},
		onLoad() {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.padTop = MenuButton.top + MenuButton.height + 10
			this.authToken = uni.getStorageSync('userInfo_token').token
			this.getExhibit()
			this.getRelic()
			this.getBooks()
		},
		onShareAppMessage() {
			return this.util.shareInfo
		},
		
		onShareTimeline(){
			return this.util.shareInfo
		},
		methods: {
			cancelTime(str) {
				return str ? str.substring(0, 10) : ''
			},
			toExhibitList() {
				uni.navigateTo({
					url: "/pages/exhibit/list"
				});
			},
			todetail(id) {
				uni.navigateTo({
					url: "/pages/exhibit/detail?id=" + id
				});
			},
			changeBook(e) {
				if (e === 'book') {
					this.showBook = true
					this.bgimg = '../../static/book/book_bg.png'
				} else {
					this.showBook = false
					this.bgimg = '../../static/book/relic_bg.png'
				}
			},
			toRelicDetail(id) {
				let that = this
				let url = `${that.util.HOST}/fbx/wxdetail.html?id=${id}`
				let newurl = encodeURIComponent(url)
				uni.navigateTo({
					url: '/pages/vr/vrpage?link=' + newurl
				})
			},
			toBook(index) {
				let id = this.bookList[index].id
				uni.navigateTo({
					url: '/pages/exhibit/bookdetail?id=' + id
				})
			},
			torelic() {
				uni.navigateTo({
					url: "/pages/relic/list"
				});
			},
			getExhibit() {
				var that = this;
				this.util.request({
					api: '/api/mobile/exhibit-hall/index',
					data: {
						page: 1,
						page_size: 6,
						state: 1,
						sort_name: 'state',
						sort_name_tow: 'release_time',
						sort_type: "DESC",
						sort_type_tow: 'DESC'
					},
					utilSuccess: function(res) {
						that.exhibitList = res.data
						for (var m of res.data) {
							m.dateRange = that.util.splitTime(m.start_time, m.over_time)
						}
					},
					utilFail: function(res) {

					}
				})
			},
			changeRelic(e) {
				console.log(e)
				this.relicIndex = e.detail.current
			},
			getRelic() {
				var that = this;
				this.util.request({
					api: '/api/mobile/cultural-relic/index',
					data: {
						page: 1,
						page_size: 99,
						sort_name: 'release_time',
						sort_type: "DESC",
					},
					utilSuccess: function(res) {
						that.relicList = res.data.filter(item => {
							return item.show_list === 1
						})
					},
					utilFail: function(res) {

					}
				})
			},
			getBooks() {
				var that = this;
				this.util.request({
					api: '/api/mobile/book/index',
					data: {
						page: 1,
						page_size: 99,
						sort_name:"datetime",
						sort_type:'ASC'

					},
					utilSuccess: function(res) {
						let arr = []
						res.data.map(item => {
							arr.push({
								url: item.image.url,
								id: item.id,
								title: item.name
							})
						})
						that.bookList = arr
						that.displayMultipleItems = 2
					},
					utilFail: function(res) {

					}
				})
			},
		}
	}
</script>

<style>
	.wrap {
		width: 100vw;
		height: 100vh;
	}

	.box-top {
		width: 100%;
	}

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

	.content {
		/* margin-top: -450rpx; */
		padding-bottom: 140rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		height: 100vh;
		overflow: scroll;
	}

	.exhibit {
		color: #333;
		padding: 0 30rpx;
		font-size: 36rpx;
	}

	.exhibit>view:first-child {
		display: flex;
		justify-content: space-between;
	}

	.exhibit>view:first-child span:first-child {
		background-color: #ebb966;
		width: 5rpx;
		height: 50rpx;
		margin-right: 22rpx;
		display: inline-block;
		vertical-align: text-top;
	}

	.exhibit_list {
		display: flex;
		justify-content: space-between;
		overflow-x: scroll;
		margin: 15rpx 10rpx;
		margin-right: 0;
		padding: 20rpx;
	}

	.exhibit_item {
		width: 520rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 25rpx 0rpx rgba(33, 22, 19, 0.1);
		margin-right: 30rpx;
		font-size: 0;
	}

	.exhibit_item img {
		width: 520rpx;
		height: 310rpx;
		display: block;
		border-radius: 20rpx 20rpx 0 0;
	}

	.exhibit_item>view {
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 35rpx;
		font-size: 32rpx;
		line-height: 48rpx;
	}

	.exhibit_item>view view:first-child {
		width: 100%;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里是超出几行省略 */
		overflow: hidden;
	}

	.exhibit_item>view view:last-child {
		color: #6E6E6E;
		font-size: 28rpx;
		margin-top: 20rpx
	}

	.relic {
		display: flex;
		padding: 30rpx;
	}

	.relic>view {
		color: black;
		text-align: center;
		width: 227rpx;
		height: 54rpx;
		line-height: 53rpx;
		font-size: 32rpx;
		border: 1px solid #fff;
		border-radius: 27rpx;
		margin-right: 10rpx;
		color: #333;
	}

	.relic .relic_active {
		background: url(../../static/book/current.png) no-repeat left top;
		background-size: 100% 100%;
		border: 1px solid transparent;
		color: #fff;
	}

	.books {
		/* padding-left: 40rpx; */
		position: relative;
		margin-top: -20rpx;
	}

	.books_img {
		height: 473rpx;
		width: 100%;
		position: absolute;
		top: 28rpx;
		left: 0;
	}

	.books .u-swiper {
		/* margin-left: -33rpx; */
		height: 530rpx !important;
	}

	.books .u-swiper__wrapper {
		height: 550rpx !important;

	}

	/deep/ .u-swiper__wrapper__item__wrapper {
		margin: 0 -50rpx;
	}

	.books .u-swiper__wrapper__item__wrapper::before {
		content: "";
		    content: "";
		    position: absolute;
		    left: 22%;
		    bottom: 115rpx;
		    width: 30rpx;
		    height: 40rpx;
		    z-index: -1;
		    background-color: transparent;
		    /* margin: 50px; */
		    box-shadow: 30rpx 10rpx 20rpx rgba(0, 0, 0, 0.3);
		    transform: translateY(4px) translateX(24rpx) scale(1, 0.9) translateZ(19px) rotate(132deg);
		    transform-style: preserve-3d;
		    perspective: 2000rpx;

		/* background: hsl(48, 100%, 20%);
		transform: translate(0, -15%) rotate(-4deg);
		transform-origin: center center;
		box-shadow: 0 0 20px 15px hsl(48, 100%, 20%); */
	}


	.books swiper-item {
		/* width: 40% !important; */
		height: 473rpx !important;
		width: 85% !important;
	}

	.books .u-swiper__wrapper__item__wrapper__image {
		margin-right: 20rpx;
		height: 424rpx !important;

	}

	.books .u-swiper__indicator {
		bottom: 40rpx !important
	}

	.books .u-swiper-indicator__wrapper__dot--active.data-v-647f6c67 {
		width: 5px !important;
		transform: scale(1.5);
	}

	.relic_list {}

	.relic_item {
		margin: 35rpx 30rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		background: linear-gradient(to bottom, #cf995a, #d8b487);

	}

	.relic_item img {
		width: 380rpx;
		height: 270rpx;
		border-radius: 20rpx 0 0 20rpx;
	}

	.relic_item>view {
		display: inline-block;
		width: 300rpx;
		padding: 24rpx;
		color: #fff;
		padding-bottom: 10rpx;
	}

	.relic_item>view view:first-child {
		width: 100%;
		/* height:100rpx; */
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里是超出几行省略 */
		overflow: hidden;
	}

	.relic_item>view view:last-child {
		width: 100%;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		/* 这里是超出几行省略 */
		overflow: hidden;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.myswiper {
		width: 100vw;
		margin: 40rpx 0 70rpx 0;
	}

	.myswiper .myswiper-item {
		display: inline-block;
	}

	.myswiper swiper {
		height: 400rpx;
		min-height: 400rpx;
		/* margin-bottom: 40rpx; */
	}

	.myswiper swiper-item {
		text-align: center;
	}

	.myswiper-item-img {
		/* width:501rpx;
		height:207rpx; */
	}

	.myswiper-item-img image {
		/* height: 400rpx; */
		width: calc(100vw - 370rpx);
		transform: scale(.7);
		margin-bottom: 40rpx;
		max-height: 400rpx;
		transform: translate(0px, -42px) scale(.7);
	}


	.myswiper-item-title {
		color: #e4e9f0;
		text-align: center;
		font-size: 28rpx;
	}

	.myswiper-item-title>view:first-child {
		font-size: 36rpx;
		margin-bottom: 10rpx;
	}
</style>