<template>
    <div class="pd-10 pl-15 border1 drag-handle">
        <el-form ref="formRef" label-width="auto" label-position="top" :model="field" :rules="rules" :scroll-to-error="true">
            <template v-if="field.type === '1' || field.type === '7' || field.type === '10'">
                <el-form-item v-if="field.name.includes('text1-')" prop="label">
                    <div class="d-flex flex-cln w-100% ">
                        <el-tag type="info" size="small" style="width: 70px;" class="drag-handle">单行文本</el-tag>
                        <div class="pb-5 f-s-16 f-w-6 c-#606266 " @click="changeShowtitle()" v-show="!showtitle">{{ field.label }}</div>
                        <el-input ref="titleInput" class="pd-5 no-disabled-input no-drag" v-show="showtitle || !field.label" v-model="field.label" :placeholder="'请输入标题'" style="width: 340px;font-size: 16px;" clearable @blur="showtitle = false" />
                    </div>
                </el-form-item>
                <el-input v-if="field.name.includes('text1-')" class="pd-5 disabled-input" :placeholder="'请输入'" style="width: 340px;margin-top: -8px; pointer-events: none ;" />
                <el-form-item v-if="field.name.includes('text2-')" prop="label">
                    <div class="d-flex flex-cln w-100%">
                        <el-tag type="info" size="small" style="width: 70px;">多行文本</el-tag>
                        <div class="d-flex flex-cln">
                            <div class="pb-5 f-s-16 f-w-6 c-#606266" @click="changeShowtitle()" v-show="!showtitle">{{ field.label }}</div>
                            <el-input ref="titleInput" class="pd-5 no-disabled-input no-drag" v-show="showtitle || !field.label" v-model="field.label" :placeholder="'请输入标题'" style="width: 340px;font-size: 16px;" clearable @blur="showtitle = false" />
                        </div>
                    </div>
                </el-form-item>
                <el-input
                    v-if="field.name.includes('text2-')"
                    class="pd-5 disabled-input"
                    :placeholder="'请输入'"
                    style="width: 340px; pointer-events: none ;margin-top: -8px;"
                    type="textarea"
                    :autosize="{
                            minRows: 4, maxRows: 7
                        }"
                />
                <el-form-item v-if="field.name.includes('desc1-')" prop="defValue" :rules="[{ required: true, message: '请输入描述', trigger: 'change' }]">
                    <el-tag type="info" size="small">文本描述</el-tag>
                    <el-input
                        ref="inputRef"
                        class="pd-5 no-disabled-input no-drag"
                        v-model="field.defValue"
                        :placeholder="'请输入'"
                        type="textarea"
                        :autosize="{
                            minRows: 4, maxRows: 7
                        }"
                        style="width: 340px;font-weight: 600;"
                    />
                </el-form-item>
                <div class="d-flex flex-cln" v-if="!['desc1-', 'text'].some(str => field.name.includes(str))">
                    <div class="pb-5 f-s-16 f-w-6 c-#606266">{{ field.label }}</div>
                    <el-input class="pd-5 disabled-input" :placeholder="'请输入'" style="width: 340px; pointer-events: none ;" />
                </div>
            </template>
            <template v-if="field.type === '4' || field.type === '5'">
                <el-form-item v-if="field.name.includes('rad-')" prop="label" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                    <div class="d-flex flex-cln w-100%">
                        <div><el-tag type="info" size="small">单选</el-tag></div>
                        <div class="pb-5 f-s-16 f-w-6 c-#606266" @click="changeShowtitle()" v-show="!showtitle">{{ field.label }}</div>
                        <el-input ref="titleInput" class="pd-5 no-disabled-input no-drag" v-show="showtitle || !field.label" v-model="field.label" :placeholder="'请输入标题'" style="width: 340px" clearable @blur="showtitle = false" />
                    </div>
                </el-form-item>
                <el-form-item
                    v-if="field.name.includes('rad-')"
                    v-for="(item, index) in field.options"
                    :key="index"
                    :prop="'options.' + index + '.label'"
                    :rules="{
                        required: true,
                        message: '请输入选项内容',
                        trigger: 'blur',
                    }"
                >
                    <div class="pd-1 p-rtv">
                        <el-radio-group v-model="field.value" style="pointer-events: none ;">
                            <el-radio :label="1"><span></span></el-radio>
                        </el-radio-group>
                        <el-input class="no-drag" type="text" v-model="item.label" style="width: 310px" :placeholder="'请输入选项内容'" @input="val => { item.label = val; item.value = val; }" />
                        <el-icon class="ml-10 delete-btn" color="red" @click="removeOption(index)">
                            <Close />
                        </el-icon>
                    </div>
                </el-form-item>
                <el-button v-if="field.name.includes('rad-')" type="primary" plain class="w-100% mt-10" @click="addOption()">新增选项</el-button>
                <el-form-item v-if="field.name.includes('che-')" prop="label">
                    <div class="d-flex flex-cln w-100%">
                        <div><el-tag type="info" size="small">多选</el-tag></div>
                        <div class="pb-5 f-s-16 f-w-6 c-#606266" @click="changeShowtitle()" v-show="!showtitle">{{ field.label }}</div>
                        <el-input ref="titleInput" class="pd-5 no-disabled-input no-drag" v-show="showtitle || !field.label" v-model="field.label" :placeholder="'请输入标题'" style="width: 340px" clearable @blur="showtitle = false" />
                    </div>
                </el-form-item>
                <el-form-item
                    v-if="field.name.includes('che-')"
                    v-for="(item, index) in field.options"
                    :key="index"
                    :prop="'options.' + index + '.label'"
                    :rules="{
                        required: true,
                        message: '请输入选项内容',
                        trigger: 'blur',
                    }"
                >
                    <div class="pd-1 p-rtv">
                        <el-checkbox class="pd-5" :label="1" style="pointer-events: none ;"><span></span></el-checkbox>
                        <el-input class="no-drag" type="text" v-model="item.label" style="width: 310px" :placeholder="'请输入选项内容'" @input="val => { item.label = val; item.value = val; }" />
                        <el-icon class="ml-10 delete-btn" color="red" @click="removeOption(index)">
                            <Close />
                        </el-icon>
                    </div>
                </el-form-item>
                <el-button v-if="field.name.includes('che-')" type="primary" plain class="w-100% mt-10" @click="addOption()">新增选项</el-button>
                <div v-if="field.name.includes('sex-')">
                    <div class="pb-5 f-s-16 f-w-6">{{ field.label }}</div>
                    <el-radio-group :disabled="true">
                        <el-radio value="1" v-for="(item, index) in field.options" :key="index">
                            {{ item.label}}
                        </el-radio>
                    </el-radio-group>
                </div>
            </template>
            <template v-if="field.type === '3'">
                <div class="pb-5 f-w-6 f-s-16">出生日期</div>
                <el-time-select v-if="field.label == '出生日期'" style="width: 340px;pointer-events: none " start="08:30" step="00:15" end="18:30" placeholder="请输入" />
            </template>
            <template v-if="field.type === '6' || field.type === '8' || field.type === '9'">
                <el-form-item prop="label">
                    <div class="d-flex flex-cln w-100%">
                        <div>
                            <el-tag type="info" class="" size="small" v-if="field.name.includes('pic1-')">图片</el-tag>
                            <el-tag type="info" size="small" v-else-if="field.name.includes('file1-')">文件</el-tag>
                            <el-tag type="info" size="small" v-else>图文描述</el-tag>
                        </div>
                        <div class="pb-5 f-s-16 f-w-6 c-#606266" @click="changeShowtitle()" v-show="!showtitle">{{ field.label }}</div>
                        <el-input ref="titleInput" class="pd-5 no-disabled-input no-drag" v-show="showtitle || !field.label" v-model="field.label" :placeholder="'请输入标题'" style="width: 340px;font-size: 16px;" clearable @blur="showtitle = false" />
                    </div>
                </el-form-item>
                <ImageUpload v-if="!field.name.includes('pic2')" v-model="field.defValue" :limit="1" isString class="pl-5 noup" :isShowTip="false"></ImageUpload>
                <el-form-item prop="defValue" v-if="field.name.includes('pic2')">
                    <div>
                        <ImageUpload v-model="field.defValue" :limit="3" isString class="pl-5 up" :isShowTip="false" :isShowPrompt="true"></ImageUpload>
                    </div>
                </el-form-item>
                <div class="f-s-12 c-333 pl-5 pt-15" v-if="!field.name.includes('pic2')">参会者点击可上传文件/图片</div>
                <div class="f-s-12 c-999 pl-5" v-if="!field.name.includes('pic2')">单个图片/文件大小不超过10MB;</div>
                <div class="f-s-12 c-999 pl-5" v-if="field.name.includes('pic2')">单个图片大小不超过10MB;</div>
                <div class="f-s-12 c-999 pl-5" v-if="!field.name.includes('pic2')">支持格式:gif、png、jpg、jpeg、bmp、doc、docx、pdf、xls、xlsx、ppt.pptx、txt、zip、gzip、rar、mp4、mov</div>
                <div class="f-s-12 c-999 pl-5" v-if="field.name.includes('pic2')">支持格式:png、jpg、jpeg</div>
            </template>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElInput, ElFormItem } from 'element-plus'
const prop = defineProps<{
    field: any // 使用any简化类型，实际应为FieldDefinition
}>()
const formRef = ref()
const rules = computed(() => {
    const rules: any = {}
    rules.label = [{ required: true, message: '请输入标题', trigger: 'change' }]
    rules.defValue = [{ required: true, message: '请上传图片', trigger: 'change' }]
    return rules
})
const removeOption = (index: number) => {
    prop.field.options.splice(index, 1)
}
const showtitle = ref(false)
const titleInput = ref(null)
const changeShowtitle = ()=>{
    showtitle.value = true
  nextTick(() => {
    titleInput.value.focus()
  })
}
const addOption = () => {
    if (!prop.field.options) {
        prop.field.options = []
    }
    prop.field.options.push({
        label: '新增选项',
        value: `新增选项`
    })
}
defineExpose({
    formRef,  // 暴露表单引用
    validate: () => formRef.value.validate() // 暴露验证方法
})
</script>

<style scoped>
.meeting-custom {
    padding: 10px
}

.border1 {
    border: 1px solid #f2f2f2;
    background-color: #fff;
}

.border2 {
    border: 1px solid #f2f2f2;
    border-radius: 50%;
}

.delete-btn {
    position: absolute;
    top: 15px;
    right: 10px;
    padding: 0 0px;
    font-size: 12px;
}

.no-interaction {
    pointer-events: none;
}

.no-interaction .el-input__inner {
    background-color: #fff;
    color: #606266;
    cursor: default;
}

.no-interaction:hover {
    cursor: default;
}

:deep(.disabled-input .el-input__inner) {
    cursor: not-allowed;
    /* 鼠标变成禁止符号 */
    background-color: #fff !important;
    /* 避免默认的灰色背景 */
    color: #606266;
    /* 保持文字颜色 */
    border-color: #dcdfe6;
    /* 保持边框颜色 */

}

:deep(.disabled-input .el-textarea__inner) {
    cursor: not-allowed;
    /* 鼠标变成禁止符号 */
    background-color: #fff;
    /* 避免默认的灰色背景 */
    color: #606266;
    /* 保持文字颜色 */
    border-color: #dcdfe6;
    /* 保持边框颜色 */
    /* font-weight: bold !important; */
}

/* 去除 hover 效果 */
/* .disabled-input .el-input__inner:hover {
    border-color: #dcdfe6 !important;
} */

:deep(.no-disabled-input .el-input__inner) {
    font-weight: bold !important;

}
:deep(.no-disabled-input .el-textarea__inner){
    font-weight: bold !important;
    font-size: 16px;
}
:deep(.no-disabled-input .el-input__wrapper) {
    /* box-shadow: none !important; */
    font-weight: bold !important;
    border-radius: 0;
    border: 1px solid transparent !important;
    /* 透明边框，避免高度变化 */
    font-size: 16px;
}

:deep(.no-disabled-input .el-input__wrapper.is-focus) {
    /* box-shadow: none !important; */
    border: 1px solid #dcdfe6 !important;
}

:deep(.up .el-upload.el-upload--picture-card) {
    border-color: #333
}

:deep(.noup .el-upload.el-upload--picture-card) {
    border-color: transparent;
    pointer-events: none;
}
</style>
