<template>
	<view class="bottom_content" :style="{width:window_width+'px', height: all_height + 'px'}">
		<view class="container" :style="{height: height + 'px'}">
			<view class="container__onbookshelf" @click="clickBookshelf()">
				<image class="image" v-if="is_on_bookshelf" src="../../static/imgs/read/setting/img_dark_remove_bookshelf.png" mode="aspectFit"></image>
				<image class="image" v-else src="../../static/imgs/read/setting/img_dark_add_bookshelf.png" mode="aspectFit"></image>				
			</view>
			<view class="container__readbook" @click="clickReadBook()">
				<image class="image" src="../../static/imgs/public/img_read_now.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
	
	defineProps({
		height: Number,
		all_height:Number,
		is_on_bookshelf:Boolean,
	})
	const emits = defineEmits(['clickReadBook','clickBookshelf'])
	
	let window_width = ref(uni.getSystemInfoSync().windowWidth)
	
	function clickReadBook() {
		emits('clickReadBook')
	}
	
	function clickBookshelf() {
		emits('clickBookshelf')
	}
	
</script>

<style lang="scss">
	.bottom_content{
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
	
		.container{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #999;
			&__onbookshelf{
				flex-shrink: 0;
				margin-right: 60rpx;
				width: 200rpx;
				height: 50rpx;
				.image {
					width: 100%;
					height: 100%;
				}
			}
			&__readbook{
				flex-shrink: 0;
				margin-left: 60rpx;
				width: 290rpx;
				height: 50px;
				.image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>