<template>
    <div :style="sizeStyle">
        <span>{{ caption }}</span>
        <div v-if="Object.is(contentType, 'RAW')" :class="contentStyle">
            <slot></slot>
        </div>
        <div
            v-else-if="Object.is(contentType, 'HTML')"
            :class="contentStyle"
            v-html="htmlContent"
        />
        <div v-else-if="Object.is(contentType, 'IMAGE')" :class="contentStyle">
            <i :class="imageClass ? imageClass : ''"></i>
        </div>
        <template
            :class="contentStyle"
            v-else-if="Object.is(contentType, 'VIDEO')"
        >
            <!-- 视频 -->
            <div class="app-rawitem__video">
                <video
                    :id="playerParams.uuid"
                    :src="playerParams.path"
                    :autoplay="playerParams.autoplay"
                    :controls="playerParams.showcontrols"
                    :loop="playerParams.replay"
                    :muted="playerParams.mute"
                >
                    <source :src="playerParams.path" type="video/mp4" />
                    <source :src="playerParams.path" type="video/ogg" />
                    <source :src="playerParams.path" type="video/webm" />
                </video>
            </div>
        </template>
        <!-- PLACEHOLDER类型 -->
        <template v-else-if="Object.is(contentType, 'PLACEHOLDER')">
            <!-- 占位 -->
            <div>占位类型暂未支持</div>
        </template>
        <!-- DIVIDER类型 -->
        <div
            v-else-if="Object.is(contentType, 'DIVIDER')"
            class="app-rawitem__divider"
            :class="contentStyle"
        >
            <el-divider :content-position="divider_params.contentPosition">
                <span v-html="divider_params.html"></span
            ></el-divider>
        </div>
        <!-- INFO，WARNING，ERROR类型 -->
        <!-- 提示 -->
        <div
            v-else-if="
                Object.is(contentType, 'INFO') ||
                Object.is(contentType, 'WARNING') ||
                Object.is(contentType, 'ERROR')
            "
            class="app-rawitem__alert"
            :class="contentStyle"
        >
            <el-alert
                :type="alert_params.type"
                :title="alert_params.title"
                :show-icon="alert_params.showIcon"
                :center="alert_params.center"
                :close-text="alert_params.closeText"
                :closable="alert_params.closeable"
            ></el-alert>
        </div>
    </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Model, Watch } 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() public contentType!: string;

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

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

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

    /**
     * 内容样式
     *
     * @type {strin}
     * @memberof AppRawItem
     */
    @Prop() public contentStyle!: string;

    /**
     * 内容宽高
     *
     * @type {strin}
     * @memberof AppRawItem
     */
    @Prop() public sizeStyle!: string;

    /**
     * 直接内容-视频参数
     */
    @Prop({ default: () => {} }) public videoParams?: any;

    /**
     * 直接内容-分割线参数
     */
    @Prop({ default: () => {} }) public dividerParams?: any;

    /**
     * 直接内容-提示参数
     */
    @Prop({ default: () => {} }) public alertParams?: any;

    /**
     * 视频类型内容参数
     *
     * @type {*}
     * @memberof AppRawItem
     */
    public playerParams: any = {
        path: "",
        mute: true,
        autoplay: true,
        replay: false,
        showcontrols: true,
    };

    /**
     * 分割线类型参数
     *
     * @type {*}
     * @memberof AppRawItem
     */
    public divider_params: any = {
        contentPosition: "center",
        html: "",
    };

    /**
     *  消息提示类型参数
     *
     * @type {*}
     * @memberof AppRawItem
     */
    public alert_params: any = {
        type: "info",
        title: "",
        closeable: true,
        showIcon: false,
        closeText: null,
        center: false,
    };

    /**
     *  生命周期 created
     *
     * @memberof AppRawItem
     */
    created() {
        Object.assign(this.playerParams, this.videoParams);
        Object.assign(this.divider_params, this.dividerParams);
        Object.assign(this.alert_params, this.alertParams);
    }
}
</script>

<style lang='less'>
</style>