<!-- in-list 列表输入 -->
<template>
    <el-form-item class="c-item" :label="name" :rules="required ? {required: true} : rules ">
        <!-- img-list 图片列表 -->
        <div v-if="type === 'img-list'" class="image-box">
            <div class="image-box-2" v-for="item in valueArray">
                <img :src="item.value" @click="sa.showImage(item.value, '500px', '400px')" alt="img"/>
                <p>
                    <el-link @click="valueArrayDelete(item)" style="color: #999;">
                        <el-icon><el-icon-Close style="margin-right: 3px;"/></el-icon>
                        <span>移除</span>
                    </el-link>
                </p>
            </div>
            <!-- 上传 -->
            <div class="image-box-2 up-img-box" @click="sa.uploadImageList(src => valueArrayPush({value: src}))">
                <img src="../../img/up-icon.png" alt="img">
            </div>
        </div>
        <!-- audio-list、video-list、file-list、img-video-list -->
        <div v-else-if="['audio-list', 'video-list', 'file-list', 'img-video-list'].indexOf(type) !== -1">
            <div v-for="item in valueArray">
                <el-link type="info" :href="item.value" target="_blank">{{item.value}}</el-link>
                <el-link type="danger" class="del-rr" @click="valueArrayDelete(item)">
                    <el-icon><el-icon-Close style="margin-right: 3px;"/></el-icon>
                    <small style="vertical-align: top;">删除</small>
                </el-link>
            </div>
            <el-link class="up-btn-link" type="primary" @click="sa.uploadAudioList(src => valueArrayPush({value: src}))" v-if="type === 'audio-list'">上传</el-link>
            <el-link class="up-btn-link" type="primary" @click="sa.uploadVideoList(src => valueArrayPush({value: src}))" v-if="type === 'video-list'">上传</el-link>
            <el-link class="up-btn-link" type="primary" @click="sa.uploadFileList(src => valueArrayPush({value: src}))" v-if="type === 'file-list'">上传</el-link>
            <el-link class="up-btn-link" type="primary" @click="sa.uploadImageList(src => valueArrayPush({value: src}))" v-if="type === 'img-video-list'">上传图片</el-link>
            <el-link class="up-btn-link" type="primary" @click="sa.uploadVideoList(src => valueArrayPush({value: src}))" v-if="type === 'img-video-list'" style="margin-left: 7px;">上传视频</el-link>
        </div>

        <!-- text-list 文本列表 -->
        <div v-if="type === 'text-list'" style="width: 100%;">
            <div v-for="item in valueArray" style="width: 100%;">
                <el-input v-model="item.value" @input="valueArrayChange" class="in-text-list-input"></el-input>
                <el-link type="danger" class="del-rr" @click="valueArrayDelete(item)">
                    <el-icon><el-icon-Close style="margin-right: 3px;"/></el-icon>
                    <small style="vertical-align: top;">删除</small>
                </el-link>
            </div>
            <el-link type="primary" @click="valueArrayPush({value: ''})">[ + 添加 ]</el-link>
        </div>
        
        <!-- 备注信息 -->
        <span class="c-remark" v-if="remark">{{remark}}</span>
    </el-form-item>
</template>

<script setup name="in-list">
import sa from '../../sa'
import {getCurrentInstance, onMounted, ref, watch} from "vue";
const { proxy } = getCurrentInstance();

// 形参 
defineProps({
    // 类型
    type: {},
    // 标题 
    name: {},
    // 绑定值 
    modelValue: {},
    // 提示文字 
    placeholder: {},
    // 备注文字
    remark: {}, 
    // 是否禁用 
    disabled: {},
    // 表单校验 
    rules: {},
    required: {
        type: Boolean
    }
});

// 解析的元素List 
const valueArray = ref([]);

// 解析 value 为 valueArray
const valueToArray = function(value) {
    value = value || proxy.modelValue;
    let arr = sa.isNull(value) ? [] : value.split(',');
    let arr2 = [];
    for (let i = 0; i < arr.length; i++) {
        if(arr[i] !== '' && arr[i].trim() !== '') {
            arr2.push({value: arr[i]});
        }
    }
    valueArray.value = arr2;
};
    
// 给 valueArray 数组增加值
const valueArrayPush = function(item) {
    valueArray.value.push(item);
    valueArrayChange();
};

// valueArray 数组删除值 
const valueArrayDelete = function(item) {
    sa.arrayDelete(valueArray.value, item);
    valueArrayChange();
};

// valueArray 更改值时触发 
const valueArrayChange = function() {
    proxy.$emit('update:modelValue', sa.getArrayField(valueArray.value, 'value').join(','));
};

// 初始化
onMounted(valueToArray);

// 监听变化 
watch(() => proxy.modelValue, () => {
    if(proxy.type !== 'text-list') {
        valueToArray(proxy.modelValue);
    }
})

// 对外开放方法，方便二次修改 
defineExpose({
    setValue: function (value) {
        valueToArray(value)
    }
})


</script>

<style scoped>

</style>
