<template>
	<el-dialog
		v-model="visible"
		append-to-body="body"
		title="选择数据表"
		:width="1000"
		body-class="h-400px"
	>
		<div class="w-full h-full flex">
			<div class="w-200px">
				<el-menu class="w-200px h-full">
					<el-menu-item index="1">业务表</el-menu-item>
					<el-menu-item index="2">流程表</el-menu-item>
					<el-menu-item index="3">外部数据库</el-menu-item>
				</el-menu>
			</div>
			<div class="flex-1 p-12px">
				<el-form inline>
					<el-form-item label="表名">
						<el-input placeholder="请输入表名"></el-input>
					</el-form-item>
					<el-form-item label="表描述">
						<el-input placeholder="请输入表描述"></el-input>
					</el-form-item>
				</el-form>
				<ul>
					<li
						v-for="table in tableList"
						:key="table.name"
						class="flex items-center justify-between cursor-pointer mb-12px p-12px hover:bg-gray-100"
					>
						<div class="left flex items-center gap-24px">
							<div class="icon w-40px h-40px bg-#ffb800 rounded-md grid place-items-center">
								<Icon icon="iconoir:database-solid" color="var(--bg-base)" height="24" width="24" />
							</div>
							<div>
						<div class="text-[var(--text-primary)] text-xs">{{ table.name }}</div>
						<div class="text-[var(--text-secondary)] text-xs">{{ table.desc }}</div>
							</div>
						</div>
						<el-button type="primary" @click="onAdd(table)">添加</el-button>
					</li>
				</ul>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { Icon } from '@repo/ui'
import { ref } from 'vue'

const emit = defineEmits<{
	add: [tableName: unknown]
}>()
const visible = ref(false)

defineExpose({
	open() {
		visible.value = true
	}
})

const tableList = [
	{
		name: 'customer_info',
		desc: '客户信息表',
		columns: [
			{
				name: 'id',
				type: 'Nvarchar',
				desc: 'ID'
			},
			{
				name: 'customer_tenant_id',
				type: 'Nvarchar',
				desc: '租户ID'
			},
			{
				name: 'customer_address',
				type: 'Nvarchar',
				desc: '客户地址'
			}
		]
	},
	{
		name: 'device_info',
		desc: '设备表',
		columns: [
			{
				name: 'id',
				type: 'Nvarchar',
				desc: 'ID'
			},
			{
				name: 'time_interval',
				type: 'Nvarchar',
				desc: '时间间隔'
			},
			{
				name: 'iotdevice_describe',
				type: 'Nvarchar',
				desc: '设备描述'
			}
		]
	}
]

const onAdd = (table: unknown) => {
	emit('add', table)
	visible.value = false
}
</script>

<style scoped></style>
