<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form label-width="80px" :inline="true" ref="ruleFormRef" :model="form" :rules="rules"> 
				<el-form-item label="app路径" prop="appPath">
					<el-input v-model="form.appPath" placeholder="C:\workspaces\sgiip\Proj_SgIIP_Src_vue"
						style="width: 500px;"> 
						<template  v-if="form.serviceName&& form.serviceName!=''" #append>\src\pages\{{form.serviceName}}\{{form.moduleName}}</template>
						 <template  v-else #append>\src\pages\{{form.moduleName}}</template>
					</el-input>
				</el-form-item>
				<el-form-item label="H5路径" prop="h5Path">
					<el-input v-model="form.h5Path" placeholder="C:\workspaces\sgiip\Proj_SgIIP_Src_vue"
						style="width: 500px;">
						<template  v-if="form.serviceName&& form.serviceName!=''" #append>\src\view\{{form.serviceName}}\{{form.moduleName}}</template>
						 <template  v-else #append>\src\view\{{form.moduleName}}</template>
					</el-input>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border>

				<el-table-column prop="fieldName" label="字段名" width="140" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>

				<el-table-column label="列表" header-align="center">
					<el-table-column prop="label" label="表头" width="120" header-align="center" align="center"
						show-overflow-tooltip> </el-table-column>
					<el-table-column prop="headerAlign" label="表头对齐" width="120" header-align="center" align="center"
						show-overflow-tooltip>
						<template #default="scope">
							<el-select v-model="scope.row.headerAlign" size="small" style="width: 100px;">
								<el-option label="居中" value="center"> </el-option>
								<el-option label="左对齐" value="left"> </el-option>
								<el-option label="右对齐" value="right"> </el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="showFlag" label="显示" width="80" header-align="center" align="center"
						show-overflow-tooltip>
						<template #default="scope">
							<el-checkbox v-model="scope.row.showFlag" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>

					<el-table-column prop="width" label="列宽" width="80" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="align" label="对齐" width="120" header-align="center" align="center"
						show-overflow-tooltip>
						<template #default="scope">
							<el-select v-model="scope.row.align" size="small" style="width: 100px;">
								<el-option label="居中" value="center"> </el-option>
								<el-option label="左对齐" value="left"> </el-option>
								<el-option label="右对齐" value="right"> </el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="sortable" label="排序" width="80" header-align="center" align="center"
						show-overflow-tooltip>
						<template #default="scope">
							<el-checkbox v-model="scope.row.sortable" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="colType" label="类型" width="80" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="formatter" label="格式化" width="80" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
				</el-table-column>
				<el-table-column label="操作" header-align="center" align="center" width="80px">
					<template #default="scope">
						<el-button  plain @click="handleEdit(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>


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

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

	onBeforeMount(() => {

	})

	const props = defineProps({
		tableName: String
	})


	const form = ref({
		vuePath: '',
		appPath: ''
	})
	const ruleFormRef = ref()
	const rules = reactive({
		h5Path: [{
			required: true,
			message: '请输入H5文件路径',
			trigger: 'change' | 'blur',
		}],
		appPath: [{
			required: true,
			message: '请输入App文件路径',
			trigger: 'change' | 'blur',
		}]
	})



	const tableData = ref([])
	const handleSearch = () => {
		var url = 'framework/LowCode/query'
		var param = {
			tableName: props.tableName
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				form.value = response.data.data
				tableData.value = response.data.data.fields
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
				tableData.value = []
			}
		})
	}

	const handleSave = (callback) => {
		form.value.tableName = props.tableName
		var url = 'framework/LowCode/update'
		var param = {
			form: JSON.stringify(form.value),
			json: JSON.stringify(tableData.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				ElMessage({
					type: 'success',
					message: '操作成功!'
				})
				callback()
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				})
			}
		})

	}


	defineExpose({
		ruleFormRef,
		handleSearch,
		handleSave
	})
</script>

<style>
</style>