<template>
	<div>
		<!--增、查交易记录的按钮-->
<!--		<el-button type="primary" round @click="openAddDialog" size="small">添加</el-button>-->
<!--		<el-row>-->
<!--			<el-col :span="24">-->
<!--				<el-form :inline="true" :model="state.query" class="demo-form-inline">-->
<!--					<el-form-item label="电影名称：">-->
<!--						<el-input v-model="state.query.title" placeholder="请输入电影名称" clearable @input="init" />-->
<!--					</el-form-item>-->
<!--				</el-form>-->
<!--			</el-col>-->
<!--		</el-row>-->
		<!--表格-->
		<el-row>
			<el-col :span="24">
				<el-table :data="state.getList">
					<!--					列表结开始-->
					<el-table-column prop="id" label="编号" align="center" width="120px"/>
					<el-table-column prop="itemDTO.title" label="电影名称" align="center" width="120px"/>
					<el-table-column prop="nickName" label="用户昵称" align="center" width="120px" />
					<el-table-column prop="itemDTO.largePic" label="电影图片" align="center" width="100" >
						<template #default="{ row }">
							<!-- 点击图片后显示弹框预览 -->
							<el-image
								:src="row.itemDTO.largePic"
								fit="cover"
							/>
						</template>
					</el-table-column>
					<el-table-column prop="score" label="评分" align="center" width="120px"/>
					<el-table-column prop="content" label="评论内容" align="center">
						<template #default="scope">
							<div style="width: 100%;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
								{{ scope.row.content }}
							</div>
						</template>


					</el-table-column>
					<!--列表结束-->
					<el-table-column label="操作" align="center" width="120px">
						<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-pagination
					v-if="state.query.total > 0"
					:current-page="state.query.page"
					:page-size="state.query.limit"
					:total="state.query.total"
					background layout="prev, pager, next"
					@current-change="handlePageChange"
				/>
			</el-col>
		</el-row>

		<!-- 新增/编辑对话框 -->
		<el-dialog v-model="state.dialogVisible" title="新增" width="50%">
			<el-form
				:model="formData"
				ref="formRef"
				label-width="100px"
			>

				<!--				表单开始===============================================================================================================================-->

				<el-form-item label="电影名称" prop="title" :rules="[{ required: true, message: '请输入电影名称', trigger: 'blur' }]">
					<el-input v-model="formData.title"/>
				</el-form-item>


				<el-form-item label="电影副标题" prop="cardSubtitle" :rules="[{ required: true, message: '请输入电影副标题', trigger: 'blur' }]">
					<el-input v-model="formData.cardSubtitle"/>

				</el-form-item>

				<el-form-item label="国家" prop="country" :rules="[{ required: true, message: '请输入国家', trigger: 'blur' }]">
					<el-input v-model="formData.country"/>
				</el-form-item>


				<el-form-item label="电影类型" prop="movieType" :rules="[{ required: true, message: '请输入电影类型', trigger: 'blur' }]">
					<el-input v-model="formData.movieType" placeholder="多个请空格分隔"/>
				</el-form-item>


				<el-form-item label="导演" prop="director" :rules="[{ required: true, message: '请输入导演', trigger: 'blur' }]">
					<el-input v-model="formData.director" placeholder="多个请空格分隔"/>
				</el-form-item>


				<el-form-item label="主演" prop="actor" :rules="[{ required: true, message: '请输入主演', trigger: 'blur' }]">
					<el-input v-model="formData.actor" placeholder="多个请空格分隔"/>
				</el-form-item>


				<el-form-item label="上映时间" prop="year" :rules="[{ required: true, message: '请输入上映时间', trigger: 'blur' }]">

					<el-select v-model="formData.year" placeholder="请选择上映年份">
						<!-- 使用 v-for 动态生成年份列表 -->
						<el-option
							v-for="year in years"
							:key="year"
							:label="year"
							:value="year"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="图片" prop="largePic" :rules="[{ required: true, message: '请插入图片', trigger: 'blur' }]">
					<el-upload
						class="avatar-uploader"
						action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
					>
						<img v-if="formData.largePic" :src="formData.largePic" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
					</el-upload>
				</el-form-item>

				<el-form-item label="评分" prop="ratingValue" :rules="[{ required: true, message: '请输入评分', trigger: 'blur' }]">
					<el-input-number v-model="formData.ratingValue" :min="1" :max="10"   :precision="1" />
				</el-form-item>
				<!--表单结束===============================================================================================================================-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="state.dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveTransaction(formRef)">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
// 交易记录数据
import { UploadProps } from 'element-plus'
import type { FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()
const state = reactive({
	route:"sys/comment",
	dialogVisible:false,
	getList: [],//获取数据
	query:{
		total: 0, // 总记录数
		page: 1, // 当前页码
		limit: 10, // 每页显示的记录数
		title:"",
		type:"0",
	}
})

// 生成年份列表 1990-2015
const years = [];
for (let year = 1990; year <= 2015; year++) {
	years.push(year.toString());
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
	response,
	uploadFile
) => {
	formData.largePic = URL.createObjectURL(uploadFile.raw!)
}

// 表单数据
let formData = reactive(<any>{})
// 获取交易记录
const init = () => {
	adminRequest.get(`${state.route}/page`, {
		params: state.query
	}).then((res:any) => {
		state.getList = res.data.list
		state.query.total = res.data.total

		console.log(state.getList)
	})
}
// 新增交易记录
const openAddDialog = () => {
	formData = {}
	state.dialogVisible = true
}
// 编辑交易记录
const edit = (row: any) => {
	formData = row
	state.dialogVisible = true
}

// 保存记录
const saveTransaction = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			if (formData.id) {
				// 更新交易记录
				 adminRequest.put(`${state.route}`, formData)
			} else {
				// 新增交易记录
				 adminRequest.post(`${state.route}`, formData)
			}
			init()
			state.dialogVisible = false
			ElMessage.success("提交成功~")
		}
	})
}



// 删除交易记录
const del = async (id: number) => {
	try {
		await adminRequest.delete(`${state.route}/${id}`)
		init()
		ElMessage.success("删除成功~")
	} catch (error) {
		ElMessage.error("删除失败~")
	}
}

// 页码改变时的处理函数
const handlePageChange = (page: number) => {
	state.query.page = page
	init()
}
// 页面加载时获取交易记录
onMounted(() => {
	init()
})
</script>
<style scoped>
.dialog-footer {
	text-align: right;
}
:deep(.el-upload) {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.el-upload:hover) {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
.avatar{
	width: 178px;
  height: 178px;
  object-fit: cover;
}

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