<!-- in 单行输入 -->
<template>
    <el-form-item class="c-item" :label="name" :rules="required ? {required: true} : rules ">
        <!-- 普通输入框 -->
        <el-input v-if="type === 'text'" 
                  type="text" :model-value="modelValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <!-- 数字输入框 -->
        <el-input v-else-if="type === 'num'" 
                  type="number" :model-value="modelValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <!-- 密码输入框 -->
        <el-input v-else-if="type === 'password'" 
                  type="password" :model-value="modelValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <!-- 多行输入框 -->
        <el-input v-else-if="type === 'textarea'" 
                  type="textarea" :model-value="modelValue" @input="onInput"
                  :autosize="{minRows: 3, maxRows: 10}" :placeholder="placeholder" :disabled="disabled"></el-input>
        <!-- 日期 -->
        <el-date-picker v-else-if="type === 'date'" 
                        type="date" v-model="spareValue" @change="onInput"
                        value-format="YYYY-MM-DD" :placeholder="placeholder" :disabled="disabled"></el-date-picker>
        <!-- 日期时间 -->
        <el-date-picker v-else-if="type === 'datetime'" 
                        type="datetime" v-model="spareValue" @change="onInput"
                        value-format="YYYY-MM-DD HH:mm:ss" :placeholder="placeholder" :disabled="disabled"></el-date-picker>
        <!-- 时间 -->
        <el-time-picker v-else-if="type === 'time'"
                        type="datetime" v-model="spareValue" @change="onInput"
                        value-format="HH:mm:ss" :placeholder="placeholder" :disabled="disabled"></el-time-picker>
        <!-- 滑块参数 -->
        <el-slider v-else-if="type === 'slider'"
                   :model-value="modelValue" @input="onInput" :disabled="disabled"></el-slider>
        <!-- 颜色输入 -->
        <div v-else-if="type === 'color'"
             style="line-height: 0;">
            <el-color-picker :model-value="modelValue" @change="onInput" :disabled="disabled"></el-color-picker>
        </div>
        <!-- 评分组件 -->
        <div v-else-if="type === 'rate'"
             style="line-height: 0;">
            <el-rate :model-value="modelValue" @change="onInput" show-text :disabled="disabled"></el-rate>
        </div>
        <!-- img 图片 -->
        <template v-else-if="type === 'img'">
            <img :src="modelValue" class="nar-img" @click="sa.showImage(modelValue, '400px', '400px')" v-if="!sa.isNull(modelValue)" alt="img">
            <el-link type="primary" @click="sa.uploadImage(src => {$emit('update:modelValue', src); sa.ok2('上传成功');})">上传</el-link>
        </template>
        <!-- audio 音频 -->
        <template v-else-if="type === 'audio'">
            <el-link class="file-link" type="info" :href="modelValue" target="_blank" v-if="!sa.isNull(modelValue)">{{modelValue}}</el-link>
            <el-link class="up-btn-link" type="primary" @click="sa.uploadAudio(src => {$emit('update:modelValue', src); sa.ok2('上传成功');})">上传</el-link>
        </template>
        <!-- video 视频 -->
        <template v-else-if="type === 'video'">
            <el-link class="file-link" type="info" :href="modelValue" target="_blank" v-if="!sa.isNull(modelValue)">{{modelValue}}</el-link>
            <el-link class="up-btn-link" type="primary" @click="sa.uploadVideo(src => {$emit('update:modelValue', src); sa.ok2('上传成功');})">上传</el-link>
        </template>
        <!-- file 文件 -->
        <template v-else-if="type === 'file'">
            <el-link class="file-link" type="info" :href="modelValue" target="_blank" v-if="!sa.isNull(modelValue)">{{modelValue}}</el-link>
            <el-link class="up-btn-link" type="primary" @click="sa.uploadFile(src => {$emit('update:modelValue', src); sa.ok2('上传成功');})">上传</el-link>
        </template>

        <!-- 备注信息 -->
        <span class="c-remark" v-if="remark">{{remark}}</span>
    </el-form-item>
</template>

<script setup name="in-input">
import {getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
    // 类型：text、num、password、date、datetime 等等
    type: {
      default: 'text'  
    },
    // 标题 
    name: {},
    // 绑定值 
    modelValue: {},
    // 提示文字 
    placeholder: {},
    // 备注文字
    remark: {}, 
    // 是否禁用 
    disabled: {},
    // 表单校验 
    rules: {},
    required: {
        type: Boolean
    }
})

const emit = defineEmits(["update:modelValue"])

// 子组件定义自己的 spareValue 
const spareValue = computed({
    get: () => props.modelValue,
    set: (value) => emit("update:modelValue", value),
})

// input值发生变化时触发
const onInput = function($event) {
    // console.log('change', $event)
    proxy.$emit('update:modelValue', $event);
};

</script>

<style scoped>

</style>
