<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form :model="query" label-position="right" label-width="80px" :inline="true">
				<el-form-item label="类型编码" style="margin-bottom: 0px;">
					<el-input v-model="query.type" style="width :200px;" clearable></el-input>
				</el-form-item>
				<el-form-item label="类型名称" style="margin-bottom: 0px;">
					<el-input v-model="query.classify" style="width :200px;" clearable></el-input>
				</el-form-item>

				<el-form-item label="字典编码" style="margin-bottom: 0px;">
					<el-input v-model="query.code" style="width :200px;" clearable></el-input>
				</el-form-item>
				<el-form-item label="字典名称" style="margin-bottom: 0px;">
					<el-input v-model="query.name" style="width :200px;" clearable></el-input>
				</el-form-item>
				<el-button type="primary" @click="search">查询</el-button>
				<el-button type="primary" plain @click="handleAdd">新增</el-button>
			</el-form>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border v-loading="loading" @header-dragend="handleDragend">
				<!-- <el-table-column type="selection" width="40" fixed> </el-table-column> -->
				<el-table-column type="index" label="序号" align="center" width="60" fixed>
					<template #default="scope">
						<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="dicType" label="类型编码" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="dicClassify" label="类型名称" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="dicCode" label="字典编码" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="dicName" label="字典名称" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="dicValue1" label="字典值1" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="dicValue2" label="字典值2" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="dicValue3" label="字典值3" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="sort" label="排序" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" width="200px" header-align="center" align="center">
					<template #default="scope">
						<el-button type="warning" size="small" plain @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="danger" size="small" plain @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
			</el-pagination>
		</el-card>
		<el-dialog :close-on-click-modal="false" v-dialogDrag title="操作" v-model="dialogVisible" width="500px">
			<el-form :model="sysDic" label-position="right" label-width="80px" ref="form" :rules="rules">
				<el-form-item label="类型名称" prop="dicClassify">
					<el-input v-model="sysDic.dicClassify"></el-input>
				</el-form-item>
				<el-form-item label="类型编码" prop="dicType">
					<el-input v-model="sysDic.dicType"></el-input>
				</el-form-item>
				<el-form-item label="编码" prop="dicCode">
					<el-input v-model="sysDic.dicCode"></el-input>
				</el-form-item>
				<el-form-item label="名称" prop="dicName">
					<el-input v-model="sysDic.dicName"></el-input>
				</el-form-item>
				<el-form-item label="值1">
					<el-input v-model="sysDic.dicValue1"></el-input>
				</el-form-item>
				<el-form-item label="值2">
					<el-input v-model="sysDic.dicValue2"></el-input>
				</el-form-item>
				<el-form-item label="值3">
					<el-input v-model="sysDic.dicValue3"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="sysDic.sort" placeholder="新增时可不填,默认最大值+1"></el-input>
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="dialog-footer">
					<el-button type="success" @click="handleSave(form)">保存</el-button>
					<el-button type="danger" @click="handleCancelSave">取消</el-button>
				</div>
			</template>
		</el-dialog>


	</div>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onBeforeMount,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)

	onMounted(() => {
		search()
	})


	/**
	 *   查询 
	 */
	const query = ref({
		name: '',
		code: '',
		type: '',
		classify: ''
	})
	const tableData = ref([])
	const search = () => {
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		loading.value = true
		var url = 'framework/SysDic/query'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			type: query.value.type,
			code: query.value.code,
			name: query.value.name,
			classify: query.value.classify,
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
			loading.value = false
		})
	}


	/**
	 *   查询 
	 */

	/**
	 * 分页 
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(10)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页 
	 */








	const sysDic = ref({
		id: '',
		dicCode: '',
		dicName: '',
		dicType: '',
		sort: '',
		dicClassify: '',
		dicValue1: '',
		dicValue2: '',
		dicValue3: ''
	})

	const form = ref(null)

	const rules = ref({
		dicClassify: [{
			required: true,
			message: '不能为空',
			trigger: 'blur,change'
		}],
		dicType: [{
			required: true,
			message: '不能为空',
			trigger: 'blur,change'
		}],
		dicCode: [{
			required: true,
			message: '不能为空',
			trigger: 'blur,change'
		}],
		dicName: [{
			required: true,
			message: '不能为空',
			trigger: 'blur,change'
		}],
	})

	const loading = ref(true)
	const dialogVisible = ref(false)



	//新增按钮事件
	const handleAdd = () => {
		dialogVisible.value = true
		sysDic.value.id = ''
	}
	// 编辑按钮事件
	const handleEdit = (row) => {
		dialogVisible.value = true
		sysDic.value = row

	}
	// 删除按钮事件
	const handleDelete = (id) => {
		ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			var url = 'framework/SysDic/remove'
			var param = {
				id: id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					ElMessage({
						type: 'success',
						message: '删除成功!',
					});
					getTableData()
				} else {
					ElMessage({
						type: 'error',
						message: '删除失败!' + response.data.msg
					});

				}
			});
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			});
		});
	}
	//保存取消按钮事件   关闭编辑对话框
	const handleCancelSave = (row) => {
		dialogVisible.value = false
	}
	//保存按钮事件
	const handleSave = (form) => {
		form.validate((valid) => {
			if (valid) {
				var url = 'framework/SysDic/save'
				var json = JSON.stringify(sysDic.value)
				var param = {
					json: json
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == '0') {
						ElMessage({
							type: 'success',
							message: '操作成功!',
						});
						getTableData()
						dialogVisible.value = false
					} else {
						ElMessage({
							type: 'error',
							message: '操作失败!' + response.data.msg
						});
					}
				})

			} else {
				console.log('error submit!!');
				return false;
			}
		})

	}
</script>