<template>
	<div class="index">
		<div class="colHeader">
			<div class="headerTitle">媒体来源</div>

			<div class="headerControls">
				<el-input v-model="form.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" @sortChange="sortChange" @currentChange="currentChange" @sizeChange="sizeChange">
			<el-table-column prop="name" label="标签名称" align="center" />
			<el-table-column sortable="custom" prop="updateTime" label="编辑时间" align="center" />
			<el-table-column label="操作" align="center">
				<template v-slot="scope">
					<el-button type="text" @click="showUpdate(scope.row)">编辑</el-button>
					<el-button type="text" @click="deleteTagSourceFn(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</tableComponents>

		<!-- 新增栏目弹框 -->
		<el-dialog v-model="dialogTableVisible" :title="form.id ? '编辑标签' : '创建新标签'" width="600" @closed="closeDialog">
			<el-form :model="form" label-width="auto" :rules="rules" ref="ruleFormRef">
				<el-form-item label="标签名称" prop="name">
					<el-input v-model="form.name" maxlength="20" 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()"> 确认 </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, ElMessageBox } from 'element-plus';
import tableComponents from '/@/components/tableComponents/index.vue';
import { getTagSource, addTagSource, updateTagSource, deleteTagSource } from '/@/api/api';

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

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

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

async function deleteTagSourceFn(id) {
	ElMessageBox.confirm('删除后无法找回', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let { code } = await deleteTagSource({ id: Number(id) });
			if (code == 200) {
				ElMessage.success('操作成功');
				getTagSourceFn();
			}
		})
		.catch(() => {});
}

/**
 * 新增媒体来源
 * @param formEl
 * @param type  0：新增 1：编辑
 */
const addTag = async () => {
	await ruleFormRef.value.validate();
	if (clickItem.value) {
		form.value.id = clickItem.value.id;
	} else {
		form.value.id = null;
	}
	addTagSourceFn();
};

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

const clickItem = ref(null);
function showUpdate(item) {
	dialogTableVisible.value = true;
	clickItem.value = item;
	form.value.name = item.name;
	form.value.id = item.id;
}

// 媒体来源列表-新增
async function getTagSourceFn() {
	let { code, data, total } = await getTagSource({
		page: tableData.page,
		size: tableData.size,
		// orderBy: 'createTime',
		...form.value,
		parent: 1,
	});
	if (code == 200) {
		tableData.data = data;
		tableData.total = total;
	}
}

// 媒体来源列表
async function addTagSourceFn() {
	if (!form.value.id) {
		let { code } = await addTagSource({
			...form.value,
		});
		if (code == 200) {
			ElMessage.success('操作成功');
			closeDialog();
			getTagSourceFn();
		}
	} else {
		let { code } = await updateTagSource({
			...form.value,
		});
		if (code == 200) {
			ElMessage.success('操作成功');
			closeDialog();
			getTagSourceFn();
		}
	}
}

/**
 * 表格排序改变
 * @param row
 */
function sortChange(row) {
	if (row.order == 'ascending') {
		form.value.direction = 'asc';
	} else if (row.order == 'descending') {
		form.value.direction = 'desc';
	}
	form.value.orderBy = row.prop;
	getTagSourceFn();
}
function currentChange(val) {
	console.log('🚀 ~ currentChange ~ val:', val);
	tableData.page = val;
	getTagSourceFn();
}

function sizeChange(val) {
	console.log('🚀 ~ sizeChange ~ val:', val);
	tableData.size = val;
	getTagSourceFn();
}
// 页面加载时
onMounted(() => {
	NextLoading.done();

	getTagSourceFn();
});
</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>
