<template>
    <div class="flex items-center gap-[6px] mb-[10px]">
        <span>{{ index + 1 }}.</span>
        <div class="bg-primary-light-10 p-[16px] rounded-[6px] flex-1">
            <el-form-item label="表单类型" prop="formType">
                <el-radio-group v-model="item.formType">
                    <el-radio v-for="type in formTypeOptions" :key="type.value" :label="type.value">{{ type.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="表单标题" prop="formTitle">
                <template v-if="item.formType === formTypeEum.INPUT">
                    <el-input v-model="item.formTitle" placeholder="请输入表单标题" maxlength="50" show-word-limit />
                </template>
                <template v-if="item.formType === formTypeEum.TEXTAREA">
                    <el-input v-model="item.formTitle" type="textarea" placeholder="请输入表单标题" maxlength="250" show-word-limit />
                </template>
            </el-form-item>
        </div>
        <div class="flex flex-col items-end">
            <el-button type="primary" link @click="handleCopyItem">复制</el-button>
            <el-button type="primary" link @click="handleDeleteItem">删除</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import type { Item } from './template-drawer.vue'
import { formTypeEum, formTypeOptions } from '@/enums'

const props = defineProps({
    item: {
        type: Object as PropType<Item>,
        default: () => ({
            formType: 1,
            formTitle: ''
        })
    },
    index: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['handleCopyItem', 'handleDeleteItem'])
const handleCopyItem = () => {
    emit('handleCopyItem', props.index)
}
const handleDeleteItem = () => {
    emit('handleDeleteItem', props.index)
}
</script>
<style scoped></style>
