<!-- show-list 展示列表 -->
<template>
    <el-form-item :label="name" class="c-item">
        <!-- 如果 value 为空 -->
        <span v-if="!value">无</span>
        
        <!-- img-list 图片列表 -->
        <div v-else-if="type === 'img-list'" class="image-box image-box-info">
            <div class="image-box-2" v-if="valueArray.length > 0" v-for="item in valueArray">
                <img :src="item.value" @click="sa.showImage(item.value, '500px', '400px')" 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>
            </div>
        </div>
        <!-- text-list 文本列表 -->
        <div v-else-if="type === 'text-list'">
            <div v-for="item in valueArray" class="text-list-item">{{ item.value }}</div>
        </div>
        
    </el-form-item>
</template>

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

// 形参 
defineProps({
    // 类型
    type: {},
    // 标题 
    name: {},
    // 绑定值 
    value: {},
});

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

// 解析 value 为 valueArray
const valueToArray = function(value) {
    value = value || proxy.value;
    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;
};

// 初始化
onMounted(function (){
    valueToArray(proxy.value);
});

// 监听变化 
watch(() => proxy.value, () => {
    valueToArray(proxy.value);
})

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


</script>

<style scoped>

</style>
