<!-- show-info 信息展示框 -->
<template>
    <el-form-item :label="name" class="c-item">
        <!-- slot 插槽模式 -->
        <template v-if="$slots.default">
            <slot></slot>
        </template>
        
        <!-- 如果 value 为空 -->
        <span v-else-if="!value">无</span>
        
        <!-- text 普通信息展示 -->
        <span v-else-if="type === 'text'">{{ value }}</span>

        <!-- num 数字 -->
        <span v-else-if="type === 'num'" class="tc-num">{{ value }}</span>

        <!-- date 日期 -->
        <span v-else-if="type === 'date'" class="tc-date">{{ sa.forDate(value) }}</span>

        <!-- datetime 日期时间 -->
        <span v-else-if="type === 'datetime'" class="tc-date">{{ sa.forDate(value, 2) }}</span>

        <!-- color 颜色 -->
        <div v-else-if="type === 'color'">
            <span class="show-color-item" :style="{backgroundColor: value}"></span>
            <span style="color: #666">{{ value }}</span>
        </div>
        
        <!-- rate 评分组件 -->
        <div v-else-if="type === 'rate'"
             style="line-height: 0;">
            <el-rate v-model="value" show-text disabled></el-rate>
        </div>
        
        <!-- money 金额，单位：元 -->
        <b v-else-if="type === 'money'" class="c-price">￥{{value}}</b>
        
        <!-- money-f 金额，单位：分 -->
        <b v-else-if="type === 'money-f'" class="c-price">￥{{value / 100}}</b>
        
        <!-- img 图片 -->
        <img v-else-if="type === 'img'" 
             :src="value" class="nar-img" @click="sa.showImage(value, '400px', '400px')" alt="img" />
        
        <!-- audio、video、file -->
        <el-link v-else-if="['audio', 'video', 'file'].indexOf(type) !== -1" 
                 type="info" :href="value" target="_blank" v-if="!sa.isNull(value)">{{value}}</el-link>

        <!-- rich-text 富文本 -->
        <div v-else-if="type === 'rich-text'" class="editor-box content-box-info">
            <div v-html="value"></div>
        </div>
        
        <!-- link 连接 -->
        <el-link v-else-if="type === 'link'" 
                 type="primary" :href="value" target="_blank">{{value}}</el-link>
        
        
    </el-form-item>
</template>

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

defineProps({
    // 类型
    type: {
        default: 'text'
    },
    // 标题 
    name: {},
    // 绑定值 
    value: {},
})

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

</script>

<style scoped>

</style>
