<template>
    <div :class="['rawitem',contentType.toLowerCase()]">
        <span v-if="caption">{{caption}}</span>
        <div v-if="Object.is(contentType,'RAW')">
            {{content}}
        </div>
        <div v-else-if="Object.is(contentType,'HTML')" v-html="content" />
        <div v-else-if="Object.is(contentType,'IMAGE')">
            <img v-if="imgUrl" :src="imgUrl"/>
            <i v-else :class="imageClass ? imageClass : ''"></i>
        </div>
        <app-markdown-editor v-else-if="Object.is(contentType,'MARKDOWN')" mode="PREVIEWONLY" :itemValue="itemValue" ></app-markdown-editor>
    </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";

@Component({})
export default class AppRawItem extends Vue {

    /**
    * 应用上下文
    * 
    * @type {string}
    * @memberof AppRawItem
    */
    @Prop() public context!: any;

    /**
    * 视图参数
    * 
    * @type {string}
    * @memberof AppRawItem
    */
    @Prop() public viewparams!: any;

    /**
    * 内容类型
    * 
    * @type {string}
    * @memberof AppRawItem
    */
    @Prop({default: 'RAW'}) public contentType!: 'RAW' | 'HTML' | 'IMAGE' | 'MARKDOWN';

    /**
     * 内容
     * 
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop() public content?: string;

    /**
     * 图标
     * 
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop() public imageClass?: string;

    /**
     * 图片
     * 
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop() public imgUrl?: string;

    /**
     * 标题
     *  
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop() public caption?: string;

    /**
     * MARKDOWN编辑器的值
     * 
     * @type {*}
     * @memberof AppRawItem
     */
    @Prop() public itemValue?: any;
}

</script>

<style lang='less'>
@import './app-rawitem.less';
</style>