<template>
	<el-scrollbar class="w-full box-border p-12px">
		<div class="view-data-setter">
			<section class="section-block">
				<div class="section-title">{{ texts.basicConfig }}</div>

				<el-form label-position="top">
					<el-form-item :label="texts.code">
						<VarInput v-model="formData.code" :placeholder="texts.codePlaceholder" class="w-full" />
					</el-form-item>

					<el-form-item :label="texts.resultType">
						<el-select v-model="formData.result_type" class="w-full">
							<el-option
								v-for="option in resultTypeOptions"
								:key="option.value"
								:label="option.label"
								:value="option.value"
							/>
						</el-select>
					</el-form-item>

					<el-form-item :label="texts.pageSize">
						<el-input-number
							v-model="formData.page_size"
							:min="1"
							:max="9999"
							class="w-full"
							style="width: 100%"
						/>
					</el-form-item>

					<el-form-item label="页码">
						<VarInput
							v-model="formData.index_variable.value"
							:placeholder="texts.variableValue"
							class="w-full"
						/>
					</el-form-item>
				</el-form>
			</section>

			<section v-if="formData.result_type === 'tree'" class="section-block">
				<div class="section-title">{{ texts.treeConfig }}</div>

				<el-form label-position="top">
					<div class="grid-row">
						<el-form-item :label="texts.treeFieldId" class="grid-col">
							<VarInput
								v-model="tree_config.fields.id"
								:placeholder="texts.treeFieldIdPlaceholder"
								class="w-full"
							/>
						</el-form-item>

						<el-form-item :label="texts.treeFieldParentId" class="grid-col">
							<VarInput
								v-model="tree_config.fields.parentId"
								:placeholder="texts.treeFieldParentIdPlaceholder"
								class="w-full"
							/>
						</el-form-item>
					</div>

					<div class="grid-row">
						<el-form-item :label="texts.treeFieldChildren" class="grid-col">
							<VarInput
								v-model="tree_config.fields.children"
								:placeholder="texts.treeFieldChildrenPlaceholder"
								class="w-full"
							/>
						</el-form-item>

						<el-form-item :label="texts.treeFieldText" class="grid-col">
							<VarInput
								v-model="tree_config.fields.text"
								:placeholder="texts.treeFieldTextPlaceholder"
								class="w-full"
							/>
						</el-form-item>
					</div>
				</el-form>
			</section>

			<section class="section-block">
				<InputVariables v-model="formData.variables" />
			</section>

			<section class="section-block">
				<div class="section-title">{{ texts.outputs }}</div>

				<ul>
					<li v-for="output in formData.outputs" :key="output.name">
						<div>
							<span class="text-#333">{{ output.name }}</span>
							<span class="text-#999 ml-8px">{{ output.type }}</span>
						</div>
						<div class="text-#666">{{ output.describe }}</div>
					</li>
				</ul>

				<div class="output-preview">
					<div class="output-preview__title">{{ texts.outputPreview }}</div>
					<CodeEditor
						:model-value="preCode"
						language="json"
						:tools="false"
						:copy-code="false"
						:allow-fullscreen="false"
						:allow-change-language="false"
						:read-only="true"
						:height="220"
					/>
				</div>
			</section>

			<NodeRuntimeConfig v-model="formData" />
		</div>
	</el-scrollbar>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import InputVariables from '@/nodes/_base/InputVariables.vue'
import VarInput from '@/nodes/_base/VarInput.vue'
import NodeRuntimeConfig from '@/nodes/_base/NodeRuntimeConfig.vue'
import { useI18n } from '@/composables/useI18n'
import { useSetterModel } from '../_shared/useSetterModel'

import type { ViewDataData, ViewDataResultType } from './index'
import { createDefaultViewDataTreeConfig } from './index'

interface Emits {
	(e: 'update', value: ViewDataData): void
}

const props = defineProps<{
	data: ViewDataData
}>()

const emit = defineEmits<Emits>()
const { t } = useI18n()
const formData = useSetterModel<ViewDataData>(props, emit)

const texts = computed(() => ({
	basicConfig: t('pages.viewDataSetter.basicConfig'),
	code: t('pages.viewDataSetter.code'),
	codePlaceholder: t('pages.viewDataSetter.codePlaceholder'),
	resultType: t('pages.viewDataSetter.resultType'),
	pageSize: t('pages.viewDataSetter.pageSize'),
	treeConfig: t('pages.viewDataSetter.treeConfig'),
	treeFieldId: t('pages.viewDataSetter.treeFieldId'),
	treeFieldIdPlaceholder: t('pages.viewDataSetter.treeFieldIdPlaceholder'),
	treeFieldParentId: t('pages.viewDataSetter.treeFieldParentId'),
	treeFieldParentIdPlaceholder: t('pages.viewDataSetter.treeFieldParentIdPlaceholder'),
	treeFieldChildren: t('pages.viewDataSetter.treeFieldChildren'),
	treeFieldChildrenPlaceholder: t('pages.viewDataSetter.treeFieldChildrenPlaceholder'),
	treeFieldText: t('pages.viewDataSetter.treeFieldText'),
	treeFieldTextPlaceholder: t('pages.viewDataSetter.treeFieldTextPlaceholder'),
	indexVariable: t('pages.viewDataSetter.indexVariable'),
	indexVariableDefaultDescribe: t('pages.viewDataSetter.indexVariableDefaultDescribe'),
	variableName: t('pages.viewDataSetter.variableName'),
	variableDescribe: t('pages.viewDataSetter.variableDescribe'),
	variableType: t('pages.viewDataSetter.variableType'),
	variableValue: t('pages.viewDataSetter.variableValue'),
	outputs: t('pages.viewDataSetter.outputs'),
	outputPreview: t('pages.viewDataSetter.outputPreview'),
	resultTypeObject: t('pages.viewDataSetter.resultTypeObject'),
	resultTypeArray: t('pages.viewDataSetter.resultTypeArray'),
	resultTypeTree: t('pages.viewDataSetter.resultTypeTree')
}))

const resultTypeOptions = computed<Array<{ label: string; value: ViewDataResultType }>>(() => [
	{ label: texts.value.resultTypeObject, value: 'object' },
	{ label: texts.value.resultTypeArray, value: 'array' },
	{ label: texts.value.resultTypeTree, value: 'tree' }
])

const preCode = `{
	// "数据列表"
	"viewTable":   [],
	"viewName":    "视图名称",
	"totalCount":  0
}`

const tree_config = computed({
	get() {
		return formData.value.tree_config?.fields
			? formData.value.tree_config
			: createDefaultViewDataTreeConfig()
	},
	set(value) {
		formData.value.tree_config = value
	}
})
</script>

<style scoped lang="less">
.view-data-setter {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.section-block {
	padding-bottom: 16px;
}

.section-title {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 700;
	color: #374151;
}

.grid-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

.grid-col {
	min-width: 0;
}

.grid-col--sm {
	max-width: 180px;
}

.index-variable-card {
	padding: 14px;
	border: 1px solid #eaecf0;
	border-radius: 12px;
	background: #fff;
}

.output-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.output-item {
	padding: 12px 14px;
	border: 1px solid #eaecf0;
	border-radius: 12px;
	background: #fff;
}

.output-preview {
	margin-top: 12px;
}

.output-preview__title {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #475467;
}
</style>
