<!--商品-->
<template>

	<el-row  v-if="isPage">
		<el-col :span="24">
			<div style="padding: 10px 10px 10px 10px;width: 350px;margin: 0 auto" >
				<el-input
					v-model="state.page.title"
					style="max-width: 600px"
					placeholder="寻找好书籍"
					class="input-with-select"
					clearable
					@input="init"
				>
					<template #append>
						<el-button  :icon="Search"  @click="init"/>
					</template>
				</el-input>
			</div>
		</el-col>
	</el-row>
	<el-row>
		<el-col :span="24">
			<el-space wrap>
				<el-card
					v-for="item in getList" :key="item.id"
					class="box-card"
					@click="to(item.id)"
					shadow="hover" >
<!--					图片-->
					<el-image  :src="item.image" fit="fill" />
<!--					标题-->
					<div class="item-title ">{{ item.title }}</div>
<!--					价格&& 评分-->
					<div class="price-box">
						<span class="price-now ft16 " style="line-height: 1;">
							￥ {{item.price}}
<!--							 <el-rate-->
<!--								 v-model="item.ratingStarCount"-->
<!--								 disabled-->
<!--								 show-score-->
<!--								 text-color="#ff9900"-->
<!--								 score-template="{value}"-->
<!--							 />-->
						</span>
					</div>
				</el-card>
			</el-space>
		</el-col>
	</el-row>
<!--	<el-row  class="pagination-container">-->
	<el-row v-if="isPage" class="pagination-container">
		<el-col :span="24">
			<el-pagination
				background
				layout="prev, pager, next"
				@current-change="handleCurrentChange"
				:total="state.total" />
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { itemPage } from '~/api/itemApi'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
	isPage: {
		type: Boolean,
		default: false,
	},
	getList: {
		type: Array,
		default: () => [], // 默认值为空数组
	},
})
// 计算属性来判断 list 是否为空，如果为空则使用 props.getList
const getList = computed(() => {
	return state.getList.length > 0 ? state.getList : props.getList;
});
const state = reactive(<any>{
	total:0,
	page:{
		page:1,
		title:"",
		status:0
	},
	getList:[]
})

/**
 * 初始化
 */
function init() {
	if (props.isPage){
		itemPage(state.page).then(res =>{
			state.getList = res.data.list
			state.total = res.data.total
		})
	}
}
/**
 *分页
 * @param val
 */
const handleCurrentChange = (val: number) => {
	state.page.page = val
	init()
}

/**
 * 跳转
 */
const to = (id:number) => {
	router.push(`/info/${id}`)
}

onMounted(()=>{
	init()
})

</script>
<style scoped>
.box-card{
	cursor: pointer;
	width: 232px;
	height: 300px
}
:deep(.el-image){
	display: block;
	width: 170px;
	height: 180px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.item-title{
	color: #333;
	font-size: 14px;
	width: 164px;
	margin: 0 auto 8px auto;
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
}
.price-box{
	text-align: center;
	font-size: 16px;
}
.price-now{
	color: #FF0000;
	padding-right: 10px;
}
.ft16 {
	font-size: 16px;
}
.ft14 {
	font-size: 14px;
}

.pagination-container{
	padding-top: 10px;
}

</style>
