<template>
	<view class="library-container">
		<view class="search-bar">
			<u-search placeholder="书名/作者/关键词/完整ISBN..." v-model="keyword" :show-action="false" bg-color="#f5f5f5"
				border-color="#e0e0e0"></u-search>
		</view>

		<view class="tabs-container">
			<u-tabs :list="tabsList" :is-scroll="true" :current="currentTab" @change="tabChange" active-color="#73685c"></u-tabs>
		</view>

		<view class="book-list">
			<view v-for="book in bookList" :key="book.id" class="book-card">
				<view class="book-item">
					<view class="book-cover">
						<u-image :src="book.image" width="180rpx" height="240rpx" border-radius="8"></u-image>
					</view>
					<view class="book-info">
						<text class="book-title">{{ book.title }}</text>
						<text class="book-author">{{ book.author }}</text>
						<text class="book-publisher">{{ book.publisher }} · {{ book.year }}</text>
						<view class="tags-container">
							<u-tag v-for="(tag, index) in book.tags" :key="index" :text="tag.text" :type="tag.type"
								size="mini" shape="circle" mode="light" />
						</view>
					</view>
				</view>
				<view class="card-footer">
					<view class="detail-button" @click="viewDetails(book.id)">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uSearch from '@/uview-ui/components/u-search/u-search.vue';
	import uTabs from '@/uview-ui/components/u-tabs/u-tabs.vue';
	import uImage from '@/uview-ui/components/u-image/u-image.vue';
	import uTag from '@/uview-ui/components/u-tag/u-tag.vue';
	export default {
		components: {
			uSearch,
			uTabs,
			uImage,
			uTag
		},
		data() {
			return {
				keyword: '',
				currentTab: 0,
				tabsList: [{
					name: '全部'
				}, {
					name: '生物医药'
				}, {
					name: '半导体/集成电路'
				}, {
					name: '新能源'
				}, {
					name: '新材料'
				}, {
					name: '技术'
				}],
				bookList: [{
						id: 1,
						title: '股权激励',
						author: '邱清荣著',
						publisher: '中国友谊出版公司',
						year: '2019',
						image: 'https://via.placeholder.com/180x240.png/ffffff/000000?text=股权激励',
						tags: [{
							text: '技术类',
							type: 'primary'
						}, {
							text: '图书馆 3F-A区-125',
							type: 'info'
						}]
					},
					{
						id: 2,
						title: '制造亚洲：一部地图上的历史',
						author: '李四著',
						publisher: '中国友谊出版公司',
						year: '2019',
						image: 'https://via.placeholder.com/180x240.png/ffffff/000000?text=制造亚洲',
						tags: [{
							text: '商业类',
							type: 'primary'
						}, {
							text: '图书馆 3F-A区-125',
							type: 'info'
						}]
					},
					{
						id: 3,
						title: '股权金字塔',
						author: '李四著',
						publisher: '中国友谊出版公司',
						year: '2019',
						image: 'https://via.placeholder.com/180x240.png/ffffff/000000?text=股权金字塔',
						tags: [{
							text: '商业类',
							type: 'primary'
						}, {
							text: '图书馆 3F-A区-125',
							type: 'info'
						}]
					}
				]
			}
		},
		methods: {
			viewDetails(id) {
				console.log('View details for book ID:', id);
				// uni.navigateTo({ url: `/packages/library/detail?id=${id}` });
			},
			tabChange(index) {
				this.currentTab = index;
				console.log('Tab changed to:', index);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.library-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.search-bar {
		padding: 20rpx 30rpx;
		background-color: #fff;
	}
	
	.tabs-container {
		border-top: 1rpx solid #eee;
	}

	.book-list {
		padding: 20rpx;
	}

	.book-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.book-item {
		display: flex;
		margin-bottom: 20rpx;
	}

	.book-cover {
		margin-right: 30rpx;
		flex-shrink: 0;
	}

	.book-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}

	.book-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.book-author,
	.book-publisher {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-top: 10rpx;
	}

	.card-footer {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.detail-button {
		height: 60rpx;
		line-height: 60rpx;
		display: inline-block;
		padding: 0 160rpx;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		background-image: linear-gradient(to right, #6a7dfe, #12099a);
		text-align: center;
	}
</style>