<!-- td-list 在单元格里展示列表数据 -->
<template>
    <el-table-column :label="name" :width="width" :min-width="minWidth">
        <template #default="s">
            <!-- 如果没有数据 -->
            <div v-if="!s.row[prop]"> {{ not }} </div>
            
            <!-- img-list 图片列表 -->
            <template v-else-if="type === 'img-list'">
                <div @click="sa.showImageList(valueToArray(s.row[prop]))" style="cursor: pointer;">
                    <img :src="valueToArray(s.row[prop])[0]" class="td-img"  alt="img" style=" vertical-align: middle;"/>
                    <span style="color: #999; padding-left: 0.5em; vertical-align: middle;">点击预览</span>
                </div>
            </template>
            
            <!-- audio-list、video-list、file-list、img-video-list -->
            <template v-else-if="['audio-list', 'video-list', 'file-list', 'img-video-list'].indexOf(type) !== -1">
                <span style="color: #666;">共 {{valueToArray(s.row[prop]).length}} 个</span>
            </template>
            
            <!-- text-list 文本列表 -->
            <template v-else-if="type === 'text-list'">
                <p v-for="(item, index) in valueToArray(s.row[prop])" :key="index" class="s-text-list-p">
                    {{item}}
                </p>
            </template>

        </template>
    </el-table-column>
</template>

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

// 形参 
defineProps({
    // 类型 
    type: {
        default: 'img-list'
    },
    // label提示文字
    name: {},
    label: {},
    // 绑定的属性  
    prop: {},
    // 宽度 
    width: {},
    // 最小宽度
    minWidth: {},
    // 空值时显示的文字
    not: {default: '无'}
});

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

// 解析 value 为 valueArray
const valueToArray = function(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(arr[i]);
        }
    }
    return arr2;
};

</script>

<style scoped>

</style>
