<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form :inline="true" label-position="right" label-width="100px">
				<el-form-item label="" class="no-show-error-message ">
					<el-button v-prevent-re-click type="primary" plain @click="search">查询</el-button>
					<el-button v-prevent-re-click type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border >
				<!--      <el-table-column show-overflow-tooltip prop="id" label="id" v-if="isShow" width="100" header-align="center" align="center">
      </el-table-column> -->
				<el-table-column show-overflow-tooltip prop="processName" label="流程名称" width="200" header-align="center"
					align="center">
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="processKey" label="流程Key" width="200" header-align="center"
					align="center">
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="dbTableName" label="表名" width="200" header-align="center"
					align="center">
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="businessNameSql" label="Sql语句" width="300"
					header-align="center">
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="pathWeb" label="web路径" width="200" header-align="center">
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="pathApp" label="app路径" width="200" header-align="center">
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="pathApplet" label="H5路径" width="200" header-align="center">
				</el-table-column>

				<el-table-column label="操作" width="160" header-align="center" align="center">
					<template #default="scope">
						<el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button plain type="danger" @click="handleDelete(scope.row )">删除</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"   title="流程设计" v-model="dialogVisible" width="900px">
			<el-form :model="form" label-width="100px" :inline="true">
				<el-form-item label="流程名称" v-show="isShow">
					<el-input v-model="form.processName" style="width: 200px;">
						<el-button v-prevent-re-click slot="append" icon="el-icon-search"
							@click="handleSearchProcess"></el-button>
					</el-input>
				</el-form-item>
				<el-form-item label="流程Key">
					<el-input v-model="form.processKey" style="width: 200px;">
						<el-button v-prevent-re-click slot="append" icon="el-icon-search"
							@click="handleSearchProcess"></el-button>
					</el-input>
				</el-form-item>
				<el-form-item label="表名">
					<el-input v-model="form.dbTableName" style="width: 200px;" @input="handleInputTableName">
					</el-input>
				</el-form-item>
				<el-form-item label="Sql">
					<el-input v-model="form.businessNameSql" style="width: 600px;" type="textarea"></el-input>
				</el-form-item>
				<el-form-item label="web路径">
					<el-input v-model="form.pathWeb" style="width: 300px;">style="width: 300px;"</el-input>
				</el-form-item>
				<el-form-item label="H5路径">
					<el-input v-model="form.pathApplet" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="驱动">
					<el-input v-model="form.dbDriver" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="连接">
					<el-input v-model="form.dbUrl" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="form.dbUsername" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="form.dbPassword" style="width: 300px;"></el-input>
				</el-form-item>

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


		<popup-process ref="PopupProcess" v-on:receiveFromChild="receiveFromSelectProcess"></popup-process>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)

	onMounted(() => {
		getTableData()
	})

	/**
	 * 分页 
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 15, 20])
	const pageSize = ref(15)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页 
	 */
	const dialogVisible = ref(false)
	const form = ref({
		id: '',
		processName: '',
		processKey: '',
		dbTableName: '',
		businessNameSql: '',
		pathWeb: '',
		pathApp: '',
    pathApplet: ''
	})
	const isShow = ref(true)

	/**
	 *   查询 
	 */
	const queryUserDesc = ref('')
	const tableData = ref([])
	const search = () => {
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		console.log(queryUserDesc.value)
		var url = 'framework/BusinessProcess/query'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
		}
		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)
			}
		})
	}
	/**
	 *   查询 
	 */


	const handleSave = () => {
		var url = 'framework/BusinessProcess/save'
		var param = {
			json: JSON.stringify(form.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				dialogVisible.value = false
				getTableData()
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
			}
		});
	}

	const handleAdd = () => {
		dialogVisible.value = true
		form.value = {
			id: '',
			processName: '',
			processKey: '',
			dbTableName: '',
			businessNameSql: '',
			pathWeb: '',
			pathApp: '',
			dbDriver: '',
			dbUrl: '',
			dbUsername: '',
			dbPassword: '',
		}
	}
	const handleEdit = (row) => {
		dialogVisible.value = true
		form.value = row
	}
	const handleDelete = (row) => {
		ElMessageBox.confirm(
				'确定删除本条记录?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
					draggable: true,
				}
			)
			.then(() => {
				var url = 'framework/BusinessProcess/remove'
				var param = {
					id: row.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: '已取消删除'
				});
			});
	}


	// handleSearchProcess() {
	// 	$refs.PopupProcess.show()
	// },
	// receiveFromSelectProcess(row) {
	// 	form.processKey = row.key
	// 	form.processName = row.name
	// },
	// handleInputTableName(value) {
	// 	form.dbTableName = value.toUpperCase()
	// },
</script>
<style>
</style>