<template>
	<view>
		<zb-tab :activeStyle="{
		    fontWeight: 'bold',
		    transform: 'scale(1.1)'
		    }" lineColor='linear-gradient(90deg, #FF9D33, #F56E06);' :data="kindList" :scrollable="true" lineWidth='30rpx'
			@change="getList" v-model="query.category"></zb-tab>
		<view class="list">
			<view class="item" v-for="n in list" :key="n.paperId" @click="goDetail(n)">
				<image :src="config.baseUrl_api+n.images"></image>
				<view class="info">
					<view class="tt esp_2">{{n.paperName}}</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="list.length==0">
			<image mode="aspectFit" src="/static/nodata.png"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import config from '@/config.js';
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import * as api from '@/common/api.js';
	const list = ref([])
	const kindList = ref([])
	const kindId = ref(0)
	const query = ref({
		category: 2
	})
	onLoad((option) => {
		if(option.kindId){
			kindId.value = Number(option.kindId)
		}
	})
	onShow(()=>{
		init()
	})
	function init() {
		uni.showLoading({
			title:`加载中`
		})
		api.getClassifyList().then(res => {
			kindList.value = res.data
			query.value.category = kindId
			getList()
		})
	}

	function getList() {
		console.log(query.value.category)
		api.getPaperList(query.value).then(res => {
			list.value = res.rows
			uni.hideLoading()
		})
	}

	function goDetail(item) {
		let path = `/exam/booking?id=${item.paperId}`;
		uni.navigateTo({
			url: path
		});

	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 24rpx 0 0 24rpx;
		overflow: hidden;
	}

	.item {
		border-radius: 15rpx;
		background: #fff;
		width: 338rpx;
		float: left;
		margin: 0 24rpx 24rpx 0;

		image {
			height: 180rpx;
			width: 100%;
		}

		.info {
			padding: 20rpx 26rpx;
			height: 100rpx;
			box-sizing: border-box;

			.tt {
				font-size: 28rpx;
				line-height: 36rpx;
			}
		}
	}
</style>