<script setup lang="ts">
import { useAttrs, getCurrentInstance, ref, computed, nextTick } from 'vue'
import { usePropBind, LABEL_KEY } from './common'
// import GdFormItem from './GdFormItem.vue';
// import { addDictionaryType } from '@/api/systemOptions/dictionary'
import i18n from '@/lang/index'
// import { operateMultilingualSettings } from '@/api/systemOptions/multilingualSettings'
import { replace } from '@/utils'
const $t: any = getCurrentInstance()?.appContext.config.globalProperties.$t

// 根据多语言表对应字段最大长度
const MAX_LENGTH = 128

const props = withDefaults(defineProps<{
	label: string,
	rules?: [],
	required: boolean
}>(), { label: '' })

const { propValue, handleChange } = usePropBind()
const attrs = <any>useAttrs()
const select = ref()

const dialogVisible = ref(false)
const handleCreate = () => {
	dialogVisible.value = true
}

const data = ref({})
const handleSave = () => {
	addDictionaryType({ i_func_id: 'dict', ...data.value }).then(res => {
		ElMessage.success($t('common_0090'))
		select.value.hanldeFilter()
		handleChange(res.i_key)
		i18n.global.mergeLocaleMessage('zh-cn', { [res.i_key]: data.value.i_language_ch })
		i18n.global.mergeLocaleMessage('en', { [res.i_key]: data.value.i_language_en })
		i18n.global.mergeLocaleMessage('ja', { [res.i_key]: data.value.i_language_jp })
		closeDialog()
	})
}

const closeDialog = () => {
	dialogVisible.value = false
	replace(data.value, {})
}
</script>

<template>
	<div>
		<GdSelect ref="select" :label='label' :prop="attrs.prop" type='dict_type' :rule="rules" :required="required"
			style="width: calc(100% - 40px)" />
		<el-button style="position: absolute; top: 0;right: 20px;" @click="handleCreate">{{ $t('new') }}</el-button>
		<el-dialog v-model="dialogVisible" @close='closeDialog' draggable destroy-on-close>
			<el-form :model="data" label-width='180px' class="gd-form">
				<GdInput :label="$t('category_name_ch')" prop="i_language_ch" :maxlength="MAX_LENGTH" required />
				<GdInput :label="$t('category_name_jp')" prop="i_language_jp" :maxlength="MAX_LENGTH" required />
				<GdInput :label="$t('category_name_en')" prop="i_language_en" :maxlength="MAX_LENGTH" required />
			</el-form>
			<template #footer>
				<!-- <el-button @click="handleSave" type="primary" icon="document">{{ $t('save') }}</el-button> -->
				<el-button @click="closeDialog" icon="close">{{ $t('dialogClose') }}</el-button>
			</template>
		</el-dialog>
	</div>
</template>
