<template>
	<view class="advertise-box xqg-bg">
		<view class="title-box">
			{{title}}
		</view>
		<scroll-view  scroll-y="true" class="book-list">
			<view class="shelf-list" v-for="shelf in bookList">
				<view class="book-content" >
					
					<view class="book-item" @click="clickHandle(book)" v-for="book in shelf" :key="book.id">
							<view class="cover-box" :class="book.type"  style="bottom: 60rpx;">
								<image  :src="`${staticUrl}${book.coverSrc}`"></image>
							</view>
							<view class="_title">{{book.bookTitle}}</view>
					</view>
				</view>
				<view class="shelf-bg"></view>
			</view>
		</scroll-view>
		<view class="book-count-container">
			<view class="count-box">共{{count}}本</view>
		</view>
	</view>
</template>

<script>
	import { getGuildbookList } from '@/api/index.js'
	const placeMap = {
		'xqg': '象山潮隐海山蟹钳港县域风貌区',
		'hba': '象山墙头-黄避岙“斑斓海岸”县域风貌区'
	}
	export default({
		data() {
			return {
				pointId: '',
				title: '',
				downloadIng: false,
				bookList: []
			}
		},
		computed: {
			staticUrl() {
				return this.$staticUrl
			},
			count() {
				return this.bookList.flat(Infinity).length 
			}
		},
		onLoad(opt) {
			this.pointId = opt.id
			this.getList()
		},
		methods: {
			getList() {
				getGuildbookList(this.pointId).then(res => {
					if (res.code === 0) {
						res.data.forEach((item, index) => {
							item.type = this.getType(item.bookSrc.split('.')[1]) 
							if (index % 2 === 0) {
								this.bookList.push([])
							}
							this.bookList[Math.floor(index / 2)].push(item)
						})
						console.log(this.bookList)
					}
				})
			},
			clickHandle(item) {
				if (item.type === 'video') {
					this.checkVideo(item)
				} else if (item.type === 'img') {
					this.checkImg(item)
				} else {
					this.checkBook(item)
				}
			},
			getType(suffix) {
				if (suffix === 'pdf') {
					return 'pdf'
				} else if (['mp4'].includes(suffix)) {
					return 'video'
				} else if (['jpg', 'png'].includes(suffix)) {
					return 'image'
				} else if (['docx'].includes(suffix)) {
					return 'doc'
				} else {
					return ''
				}
			},
			checkVideo() {
				uni.navigateTo({
					url: '../advertise-video?id=' + this.pointId
				})
			},	
			checkImg(item) {
				uni.previewImage({
					urls:[this.$staticUrl + item.bookSrc],
					current:0
				})
			},
			checkBook(item) {
				let _this = this
				if (this.downloadIng) {
					return
				}
				uni.getSystemInfo({
					success: res => {
						if (res.platform === 'android') {
							_this.downloadIng = true
							uni.showLoading({
								title: '手册加载中，请稍后'
							})
							wx.downloadFile({
								url: this.$staticUrl + item.bookSrc,
								success: function(res) {
									_this.downloadIng = false
									uni.hideLoading()
									const filePath = res.tempFilePath;
									wx.openDocument({
										filePath: filePath,
										success: function(res) {
											console.log('打开文档成功');
										}
									});
								},
								fail: function(err) {
									uni.showToast({
										title: err
									})
								},
								complete() {
									_this.downloadIng = false
								}
							});
						} else {
							uni.navigateTo({
								url: '/pages/advertise-book/detail?src=' + item.bookSrc
							})
						}
					}
				});
			}
		}
	})
</script>

<style lang="scss" scoped>
	.xqg-bg{
		background: url('https://xqg.xswlsq.cn/xqg/handbook/xqg_bg.jpg') no-repeat;
		background-size: 100% 100%;
	}
	.hba-bg{
		background: url('https://xqg.xswlsq.cn/xqg/handbook/hba_bg.jpg') no-repeat;
		background-size: 100% 100%;
	}
	.advertise-box{
		width: 100%;
		.title-box{
			height: 83rpx;
			width: 100%;
			background-color: #EFE4D6;
			color: #000;
			font-size: 32rpx;
			line-height: 83rpx;
			text-align: center;
		}
		.book-list{
			min-height: calc(100vh - 83rpx);
			.shelf-list{
				position: relative;
				height: 412rpx;
				width: 100%;
				.book-content{
					z-index: 99;
					position: absolute;
					width: 710rpx;
					left: 20rpx;
					display: flex;
					padding: 0 60rpx;
					box-sizing: border-box;
					justify-content: space-between;
					bottom: 129rpx;
					.book-item{
						position: relative;
						._title{
							width: 235rpx;
							border-radius: 7rpx;
							padding: 0 16rpx;
							box-sizing: border-box;
							background: #3F2B10;
							color: #E2CBB3;
							font-size: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							text-align: center;
						}
						.cover-box{
							z-index: -1;
							position: absolute;
							
							
						}
						.video{
							width: 235rpx;
							height: 170rpx;
							background: url('../../static/img/video_bookbg.png') no-repeat;
							background-size: 100% 100%;
							left: 0rpx;
							image{
								width: 227rpx;
								height: 170rpx;
							}
						}
						.pdf{
							width: 203rpx;
							height: 194rpx;
							background: url('../../static/img/wj_03.png') no-repeat;
							background-size: 100% 100%;
							left: 16rpx;
							image{
								width: 192rpx;height: 192rpx;
							}
						}
						.image{
							width: 203rpx;
							height: 194rpx;
							background: url('../../static/img/wj_03.png') no-repeat;
							background-size: 100% 100%;
							left: 16rpx;
							image{
								width: 192rpx;height: 192rpx;
							}
						}
						.doc{
							width: 180rpx;
							height: 236rpx;
							background: url('../../static/img/wj_01.png') no-repeat;
							background-size: 100% 100%;
							left: 30rpx;
							image{
								width: 164rpx;height: 236rpx;
							}
						}
					}
				}
				.shelf-bg{		
					z-index: 98;
					left: 20rpx;
					position: absolute;
					bottom: 0;
					height: 201rpx;
					width: 710rpx;
					background: url('../../static/img/shelf.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
		.book-count-container{
			z-index: 200;
			position: fixed;
			bottom: 0;
			height: 97rpx;
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			.count-box{
				width: 162rpx;
				height: 50rpx;
				background-color: #ECECEC;
				border-radius: 25rpx;
				color: #000;
				font-size: 25rpx;
				text-align: center;
				line-height: 50rpx;
			}
		}
	}
</style>