<!--用户详情-->
<template>

	<el-tabs v-model="state.activeName"  @tab-click="handleClick">
		<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
			<el-table :data="state.getList">
				<!--					列表结开始-->
				<el-table-column prop="id" label="编号" align="center" />
				<el-table-column prop="title" label="电影名称" align="center" />
				<el-table-column prop="year" label="上映时间" align="center" />
				<el-table-column prop="largePic" label="图片" align="center" >
					<template #default="{ row }">
						<!-- 点击图片后显示弹框预览 -->
						<el-image
							:src="row.largePic"
							fit="cover"
							:preview-src-list="row.largePic.split(',')"
							:preview-teleported="true"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="country" label="国家" align="center" />
				<el-table-column prop="movieType" label="电影类型" align="center" />
				<el-table-column prop="director" label="导演" align="center" />
				<el-table-column prop="actor" label="主演" align="center" />
				<el-table-column prop="ratingValue" label="评分" align="center" />
				<el-table-column prop="ratingCount" label="评分人数" align="center" />
				<!--列表结束-->
				<el-table-column label="操作" align="center" >
					<template #default="scope">

						<el-button @click="del(scope.row.id)" type="danger" size="small">取消</el-button>
					</template>
				</el-table-column>
				<template v-slot:empty>
					<el-empty description="数据去外太空了~" />
				</template>
			</el-table>
		</el-tab-pane>
	</el-tabs>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const state = reactive({
	activeName:1,
	getOrderStatus:[
		{name:"全部",status:1},
	],
	getList:[]
})

/**
 * 获取列表数据
 */
function init() {
		frontRequest.get("/api/item/list").then(res =>{
			state.getList = res.data
		})
}
const del = (id:number) => {
	frontRequest.post("/api/behavior/delete",{itemId:id,type:1}).then(res =>{
		ElMessage.success("收藏成功")
		init()
	})
	init()
}

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



</script>


<style scoped>

</style>
<route lang="json">
{
"meta": {
"layout": "frontUserInfo"
}
}
</route>
