<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-input v-model="searchInfo.name" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="margin-left: 10px;" @click="GetList()">搜索</el-button>
					<el-button type="success" style="margin-left: 10px;" @click="Add()">添加</el-button>
				</el-form-item>
			</el-row>
		</div>
		<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="title" label="标题" />
			<el-table-column prop="l_title" label="小标题" />
			<el-table-column prop="url" label="Url" />
			<el-table-column label="操作" width="100">
				<template #default="scope">
					<el-button type="primary" @click="EditFunc(scope.row)" :icon="Edit" circle />
					<el-button type="danger" @click="Del(scope.row)" :icon="Delete" circle />
				</template>
			</el-table-column>
		</el-table>

		<div class="page">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
				@size-change="PageSizeChange" @current-change="PageCurrentChange" />
		</div>
		<el-dialog v-model="dialogVisible" title="套餐信息" width="60%">
			<el-form :model="Info" label-width="100px" v-loading="loading">

				<el-form-item label="标题">
					<el-input v-model="Info.title" style="width: 300px;"/>
				</el-form-item>
				<el-form-item label="小标题">
					<el-input v-model="Info.l_title" style="width: 300px;"/>
				</el-form-item>
				<el-form-item label="Url">
					<el-input v-model="Info.url" />
				</el-form-item>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="Save">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		onBeforeUnmount,
		ref,
		shallowRef,
		onMounted
	} from 'vue'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		NavGetList,
		NavSave,
		NavDel
	} from '@/api/api.js'
	import {
		Edit,Delete
	} from '@element-plus/icons-vue'
	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	let dialogVisible = ref(false)
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	let searchInfo = ref({});
	let Info = ref({
		id: 0
	});
	const GetList = () => {
		loading.value = true
		NavGetList({
			page: currentPage.value,
			pageSize: pageSize.value,
			searchInfo: searchInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data.list
				total = res.data.count
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Add = () => {
		Info.value = {}
		dialogVisible.value = true
		Info.value.id = 0
	}
	const Save = () => {
		loading.value = true
		NavSave({
			Info: Info.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				dialogVisible.value = false
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Del = (row) => {
		loading.value = true
		NavDel({
			id: row.id
		}).then(res => {
			loading.value = false
			if (res.status) {
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const EditFunc = (row) => {
		dialogVisible.value = true
		Info.value = row
	}
	onMounted(() => {
		GetList()
	})
</script>

<style>
</style>