<!-- td-info 表格单元格 -->
<template>
    <!-- 自定义slot -->
    <el-table-column v-if="$slots.default" :label="name" :width="width" :min-width="minWidth">
        <template #default="s">
            <slot name="default" :row="s.row" :index="s.index"></slot>
        </template>
    </el-table-column>
    <!-- selection框 -->
    <el-table-column v-else-if="type === 'selection'" type="selection" :width="width || '45px'" :min-width="minWidth"></el-table-column>
    <!-- index -->
    <el-table-column v-else-if="type === 'index'" type="index" :label="name" :width="width || '80px'" :min-width="minWidth"></el-table-column>
    <!-- 其它 -->
    <el-table-column 
            v-else 
            :label="name" :width="width" :min-width="minWidth" 
            :show-overflow-tooltip="['textarea', 'rich-text'].indexOf(type)  !== -1"
            >
        <template #default="s">
            <!-- 无内容 -->
            <span v-if="!s.row[prop] && type !== 'user-avatar'">{{ not }}</span>
            <!-- text 文本 -->
            <span v-else-if="type === 'text'">{{ s.row[prop] }}</span>
            <!-- num 数字 -->
            <span v-else-if="type === 'num'" class="tc-num">{{ s.row[prop] }}</span>
            <!-- icon 数字 -->
            <svg-icon v-else-if="type === 'icon'" :name="s.row[prop]" style="font-size: 1.2em; vertical-align: sub;"></svg-icon>
            <!-- money 钱 (单位 元) -->
            <b v-else-if="type === 'money'" class="c-price">￥{{ s.row[prop] }}</b>
            <!-- money-f 钱 (单位 分) -->
            <b v-else-if="type === 'money-f'" class="c-price">￥{{ s.row[prop] / 100 }}</b>
            <!-- textarea 文本域 -->
            <span v-else-if="type === 'textarea'">{{sa.maxLength(s.row[prop], 200)}}</span>
            <!-- rich-text 富文本 -->
            <span v-else-if="type === 'rich-text'">{{sa.maxLength(sa.text(s.row[prop]), 200)}}</span>
            <!-- link 链接 -->
            <el-link v-else-if="type === 'link'" type="primary" :href="s.row[prop]" target="_blank">{{ s.row[prop] }}</el-link>
            <!-- link-btn 链接按钮 -->
            <el-link v-else-if="type === 'link-btn'" type="primary" @click="$emit('click', s)">{{s.row[prop]}}</el-link>
            
            <!-- date 日期 -->
            <span v-else-if="type === 'date'" class-name="tc-date">
                {{ sa.forDate(s.row[prop]) }}
            </span>
            <!-- datetime 日期时间 -->
            <span v-else-if="type === 'datetime'" class-name="tc-date">
                {{ sa.forDate(s.row[prop], 2) }}
            </span>
            <!-- rate 评分 -->
            <p v-else-if="type === 'rate'">
                <el-rate v-model="s.row[prop]" disabled style="line-height: 0; vertical-align: middle;"></el-rate>
                <span style="vertical-align: middle; color: #666;">{{s.row[prop]}}</span>
            </p>

            <!-- img 图片 -->
            <img v-else-if="type === 'img'" :src="s.row[prop]" class="td-img" 
                 @click="sa.showImage(s.row[prop], '400px', '400px')" alt="img" />
            <!-- audio、video、file -->
            <template v-else-if="['audio', 'video', 'file'].indexOf(type) !== -1">
                <el-link type="info" :href="s.row[prop]" target="_blank">预览</el-link>
            </template>
            
            <!-- 头像 -->
            <template v-else-if="type === 'user-avatar'">
                <p v-if="sa.isNull(s.row[prop.split(',')[0]]) && sa.isNull(s.row[prop.split(',')[1]])">暂无</p>
                <p v-else>
                    <img :src="s.row[prop.split(',')[1]]" class="td-img"
                         style="vertical-align: middle; margin-right: 8px;"
                         @click="sa.showImage(s.row[prop.split(',')[1]], '400px', '400px')" alt="img" />
                    <b>{{s.row[prop.split(',')[0]]}}</b>
                </p>
            </template>
            
        </template>
    </el-table-column>
    
    
</template>

<script setup name="td-info">

defineProps({
    // 类型 
    type: {
        default: 'text'
    },
    // label提示文字
    name: {},
    label: {},
    // 绑定的属性  
    prop: {},
    // 宽度 
    width: {},
    // 最小宽度
    minWidth: {},
    // type=menu时，值列表    -- 形如：{1: '正常[green]', 2: '禁用[red]'}  
    jv: {default: ''},
    // 空值时显示的文字
    not: {default: '无'}
})

defineEmits(['click'])

</script>

<style scoped>

</style>
