<template>
    <div class="pd-10 pl-15 border1">
        <template v-if="field.type === '1' || field.type === '7' || field.type === '10'">
            <div v-if="field.name.includes('text1-')" prop="label">
                <el-tag type="info" size="small">单行文本</el-tag>
                <div class="d-flex flex-cln pb-5 pt-5">
                    <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>
            </div>
            <div v-else-if="field.name.includes('text2-')" prop="label">
                <el-tag type="info" size="small">多行文本</el-tag>
                <div class="d-flex flex-cln pb-5 pt-5">
                    <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 ;"
                        type="textarea"
                        :autosize="{
                            minRows: 4, maxRows: 7
                        }"
                    />
                </div>
            </div>
            <div v-else-if="field.name.includes('desc1-')" prop="defValue" :rules="[{ required: true, message: '请输入描述', trigger: 'blur' }]">
                <el-tag type="info" size="small">文本描述</el-tag>
                <div class="pb-5 f-s-16 f-w-6 c-#606266 pt-5">{{ field.defValue }}</div>
                <!-- <el-input
                    class="pd-5 no-disabled-input"
                    v-model="field.defValue"
                    :placeholder="'请输入'"
                    type="textarea"
                    :autosize="{
                            minRows: 4, maxRows: 7
                        }"
                    style="width: 340px;font-weight: 600;"
                /> -->
            </div>
            <div class="d-flex flex-cln" v-else>
                <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'">
            <div v-if="field.name.includes('rad-')" prop="label" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                <div class="d-flex flex-cln">
                    <div><el-tag type="info" size="small">单选</el-tag></div>
                    <div class="pb-5 pt-5 f-s-16 f-w-6 c-#606266">{{ field.label }}</div>
                </div>
            </div>
            <div
                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 d-flex a-c">
                    <el-radio-group v-model="field.value" style="pointer-events: none ;">
                        <el-radio :label="1"><span></span></el-radio>
                    </el-radio-group>
                    <div class="f-s-14 f-w-5 c-#606266">{{ item.label }}</div>
                </div>
            </div>
            <div v-if="field.name.includes('che-')" prop="label">
                <div class="d-flex flex-cln">
                    <div><el-tag type="info" size="small">多选</el-tag></div>
                    <div class="pb-5 pt-5 f-s-16 f-w-6 c-#606266">{{ field.label }}</div>
                </div>
            </div>
            <div
                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 d-flex a-c">
                    <el-checkbox class="pd-5" :label="1" style="pointer-events: none ;"><span></span></el-checkbox>
                    <div class="f-s-14 f-w-5 c-#606266">{{ item.label }}</div>
                </div>
            </div>
            <div v-if="field.name.includes('sex-')">
                <div class="pb-5 f-s-16 f-w-6 c-#606266">{{ field.label }}</div>
                <el-radio-group>
                    <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 c-#606266">出生日期</div>
            <el-time-select v-if="field.label == '出生日期'" style="width: 340px" start="08:30" step="00:15" end="18:30" placeholder="请输入" />
        </template>
        <template v-if="field.type === '6' || field.type === '8' || field.type === '9'">
            <div prop="label">
                <div class="d-flex flex-cln">
                    <div>
                        <el-tag type="info" class="" size="small" v-if="field.name.includes('pic1-')">图片</el-tag>
                        <el-tag type="info" size="small" v-if="field.name.includes('file1-')">文件</el-tag>
                        <el-tag type="info" size="small" v-if="field.name.includes('pic2-')">图文描述</el-tag>
                    </div>
                    <div class="pb-5 f-s-16 f-w-6 c-#606266 pt-5">{{ field.label }}</div>
                    <!-- <el-input ref="titleInput" class="pd-5 no-disabled-input" v-model="field.label" :placeholder="'请输入标题'" style="width: 340px;font-size: 16px;" clearable /> -->
                </div>
            </div>
            <ImageUpload v-if="!field.name.includes('pic2')" v-model="field.defValue" :limit="1" isString class="pl-5 noup" :isShowTip="false"></ImageUpload>
            <div prop="defValue" v-if="field.name.includes('pic2')">
                <!-- <div>
                    <ImageUpload v-model="field.defValue" :limit="3" isString class="pl-5 up" :isShowTip="false"></ImageUpload>
                </div> -->
                <div class="d-flex flex-wrap" v-if="field.defValue">
                    <template v-for="(item, index) in field.defValue.split(',')" :key="index">
                        <div class="mr-10 mb-10">
                            <ImagePreview :src="item" :width="100" :height="100"></ImagePreview>
                        </div>
                    </template>
                </div>
            </div>
            <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')">支持格式:gif、png、jpg、jpeg、bmp、doc、docx、pdf、xls、xlsx、ppt.pptx、txt、zip、gzip、rar、mp4、mov</div>
        </template>
    </div>
</template>
<script setup lang="ts">
const prop = defineProps<{
    field: any // 使用any简化类型，实际应为FieldDefinition
}>()
</script>
<style scoped>
.border1 {
    border: 1px solid transparent;
    background-color: #fff;
}
</style>
