<template>
	<div class="index">
		<div class="colHeader">
			<div class="headerTitle">首页栏目列表</div>

			<div class="headerControls">
				<el-input v-model="keyword" placeholder="输入栏目关键字进行搜索" class="input-with-select">
					<template #append>
						<el-button icon="Search" @click="search" />
					</template>
				</el-input>
				<el-button type="primary" icon="Plus" @click="dialogTableVisible = true">创建新栏目</el-button>
			</div>
		</div>

		<tableComponents :tableData="tableData">
			<el-table-column sortable prop="title" label="栏目排序" align="center" width="120px" />
			<el-table-column prop="title" label="栏目名称" align="center" />
			<el-table-column sortable prop="explain" label="编辑时间" align="center" />
			<el-table-column prop="explain" label="操作" align="center">
				<el-link>编辑</el-link>
				<el-link>删除</el-link>
			</el-table-column>
		</tableComponents>

		<!-- 新增栏目弹框 -->
		<el-dialog v-model="dialogTableVisible" title="创建新栏目" width="600" @closed="closeDialog">
			<el-form :model="form" label-width="auto" :rules="rules" ref="ruleFormRef">
				<el-form-item label="栏目名称" prop="name1">
					<el-input v-model="form.name1" maxlength="5" show-word-limit />
				</el-form-item>
				<el-form-item label="封面 banner 名称">
					<el-input v-model="form.name2" maxlength="5" show-word-limit />
				</el-form-item>
				<el-form-item label="标题 banner 名称">
					<el-input v-model="form.name3" maxlength="5" show-word-limit />
				</el-form-item>
				<el-form-item label="文章列表名称">
					<el-input v-model="form.name4" maxlength="5" show-word-limit />
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="closeDialog">取消</el-button>
					<el-button type="primary" @click="addTag(ruleFormRef)"> 确认 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage } from 'element-plus';
import tableComponents from '/@/components/tableComponents/index.vue';

const dialogTableVisible = ref(false); // 弹框是否显示
const form = ref({}); // form 表单数据
const ruleFormRef = ref();
const keyword = ref(''); // 搜索的关键字
const rules = reactive<FormRules<RuleForm>>({
	name1: [{ required: true, message: '必须填写栏目名称', trigger: 'blur' }],
});

const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});

// 根据关键字搜索搜索
const search = async () => {
	console.log(keyword.value, '<===');
};

// 新增来源标签
const addTag = async (formEl) => {
	if (!formEl) {
		return;
	}
	await formEl.validate((valid) => {
		if (!valid) {
			ElMessage.error('请填写正确的标签名称');
			return;
		} else {
			console.log('=== 已填写 ===');
		}
	});
};

// 关闭弹窗
const closeDialog = () => {
	dialogTableVisible.value = false;
	form.value = {};
	ruleFormRef.value.resetFields()
};

// 页面加载时
onMounted(() => {
	console.log('🚀 ~ file: index.vue:13 ~ onMounted ~ onMounted:');
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.index {
	box-sizing: border-box;
	padding: 30px;
	background-color: #fff;
	border-radius: 6px;

	.colHeader {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 21px;

		.headerTitle {
			font-size: 16px;
			font-weight: bold;
		}

		.headerControls {
			display: flex;

			.input-with-select {
				width: 300px;
				margin-right: 30px;
			}
		}
	}
}
</style>
