<template>
	<el-container class="pi-panel">
		<el-main>
			<el-tabs v-model="type" style="width: 100%;">
				<el-tab-pane name="base" label="基本信息">
					<el-form :model="form" :rules="rules" ref="formRef" label-width="100px" label-position="right">
						<el-row :gutter="20">
							<el-col :md="12" :sm="24">
								<el-form-item label="表名称" prop="table_name">
									<el-input v-model="form.table_name" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :md="12" :sm="24">
								<el-form-item label="表描述" prop="table_comment">
									<el-input v-model="form.table_comment" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :md="12" :sm="24">
								<el-form-item label="模块名称" prop="controller_name">
									<el-input v-model="form.controller_name" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :md="12" :sm="24">
								<el-form-item label="控制器名称" prop="module_name">
									<el-input v-model="form.module_name" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :sm="24">
								<el-form-item label="备注" prop="remark">
									<el-input v-model="form.remark" :rows="3" type="textarea" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-tab-pane>
				<el-tab-pane name="field" label="字段信息">
					<pi-table :data="form.gen_table_columns" row-key="column_id" hide-pagination hide-do :sortable="true" @on-end="onEnded">
						<el-table-column type="index" width="50" label="序号"></el-table-column>
						<el-table-column label="字段名称" width="120" prop="column_name"></el-table-column>
						<el-table-column label="字段描述" width="150" prop="column_comment">
							<template #default="scope">
								<el-input v-model="scope.row.column_comment"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="SQL类型" width="120" prop="column_type"></el-table-column>
						<el-table-column label="数据类型" width="120" prop="php_type">
							<template #default="scope">
								<el-select v-model="scope.row.php_type">
									<el-option label="string" value="string"></el-option>
									<el-option label="int" value="int"></el-option>
									<el-option label="float" value="float"></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="变量名称" width="150" prop="php_field">
							<template #default="scope">
								<el-input v-model="scope.row.php_field"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="插入" width="120" prop="is_insert">
							<template #default="scope">
								<el-checkbox v-model="scope.row.is_insert" :true-value="1" :false-value="0"/>
							</template>
						</el-table-column>
						<el-table-column label="编辑" width="120" prop="is_edit">
							<template #default="scope">
								<el-checkbox v-model="scope.row.is_edit" :true-value="1" :false-value="0"/>
							</template>
						</el-table-column>
						<el-table-column label="列表" width="120" prop="is_list">
							<template #default="scope">
								<el-checkbox v-model="scope.row.is_list" :true-value="1" :false-value="0"/>
							</template>
						</el-table-column>
						<el-table-column label="查询" width="120" prop="is_query">
							<template #default="scope">
								<el-checkbox v-model="scope.row.is_query" :true-value="1" :false-value="0"/>
							</template>
						</el-table-column>
						<el-table-column label="查询方式" width="120" prop="query_type">
							<template #default="scope">
								<el-select v-model="scope.row.query_type">
									<el-option label="=" value="eq"></el-option>
									<el-option label="!=" value="neq"></el-option>
									<el-option label=">" value="gt"></el-option>
									<el-option label="<" value="lt"></el-option>
									<el-option label=">=" value="gte"></el-option>
									<el-option label="<=" value="lte"></el-option>
									<el-option label="LIKE" value="like"></el-option>
									<el-option label="BETWEEN" value="between"></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="必填" width="120" prop="is_required">
							<template #default="scope">
								<el-checkbox v-model="scope.row.is_required" :true-value="1" :false-value="0"/>
							</template>
						</el-table-column>
						<el-table-column label="显示类型" width="120" prop="html_type">
							<template #default="scope">
								<el-select v-model="scope.row.html_type">
									<el-option label="文本框" value="text"></el-option>
									<el-option label="文本域" value="textarea"></el-option>
									<el-option label="下拉框" value="select"></el-option>
									<el-option label="单选框" value="radio"></el-option>
									<el-option label="复选框" value="checkbox"></el-option>
									<el-option label="日期控件" value="date"></el-option>
									<el-option label="时间控件" value="datetime"></el-option>
									<el-option label="图片上传" value="image"></el-option>
									<el-option label="文件上传" value="file"></el-option>
									<el-option label="富文本" value="editor"></el-option>
								</el-select>
							</template>
						</el-table-column>
					</pi-table>
				</el-tab-pane>
			</el-tabs>
		</el-main>
		<el-footer class="pi-center">
			<el-button @click="back()">返 回</el-button>
			<el-button type="primary" :loading="isSaving" @click="submit()">保 存</el-button>
		</el-footer>
	</el-container>
</template>

<script setup>
import api from "@/api/index";
import {getCurrentInstance, onMounted, ref,} from "vue";
import {useRoute, useRouter} from "vue-router";

defineOptions({
	name: "toolsGenEdit"
})
const route = useRoute()
const router = useRouter()
const {proxy} = getCurrentInstance()
const formRef = ref(null)

const type = ref("field")
let isSaving = ref(false)

let form = ref({})
let rules = ref({
	table_name: [
		{required: true, message: '请输入表名称'}
	],
	controller_name: [
		{required: true, message: '请输入控制器名称'}
	],
	module_name: [
		{required: true, message: '请输入模块名称'}
	]
})

onMounted(() => {
	initData()
})

async function initData() {
	const res = await api.tools.gen_table.info({id: route.query.id})
	form.value = res.data
}

function onEnded(newIndex, oldIndex) {
	// 防止索引越界
	if (oldIndex < 0 || oldIndex >= form.value.gen_table_columns.length || newIndex < 0 || newIndex >= form.value.gen_table_columns.length) {
		return form.value.gen_table_columns.slice(); // 返回一个新数组，避免原数组被修改
	}
	// 创建数组的副本以避免直接修改原数组
	const newArray = form.value.gen_table_columns.slice();
	// 从原位置删除元素（splice返回被删除元素的数组）
	const [movedElement] = newArray.splice(oldIndex, 1);
	// 将元素插入新位置
	newArray.splice(newIndex, 0, movedElement);
	form.value.gen_table_columns = newArray
}

function back() {
	router.back()
}

async function submit() {
	// 校验登录
	const validate = await formRef.value.validate().catch(() => {
	});
	if (!validate) {
		return false
	}
	// isSaving.value = true;
	const res = await api.tools.gen_table.edit(form.value);
	isSaving.value = false;
	proxy.$message.success(res.msg)
}
</script>

<style scoped>
.pi-center {
	text-align: center;
}
</style>
