<template>
    <view style="height: 100%">
        <template v-if="compName === 'el'">
            <block v-if="n.name === 'img'">
                <rich-text
                    v-if="n.t"
                    :style="'display:' + n.t"
                    :nodes="'<img class='_img' style=''+(n.attrs.style)+'' src=''+(n.attrs.src)+''>'"
                    :data-i="i"
                    @tap.stop.prevent="imgTap"
                />
                <block v-else>
                    <image v-if="(opts[1] && !ctrl[i]) || ctrl[i] < 0" class="_img" :style="n.attrs.style" :src="ctrl[i] < 0 ? opts[2] : opts[1]" mode="widthFix" />
                    <image
                        :id="n.attrs.id"
                        :class="'_img ' + n.attrs.class"
                        :style="(ctrl[i] === -1 ? 'display:none;' : '') + 'width:' + (ctrl[i] || 1) + 'px;height:1px;' + n.attrs.style"
                        :src="n.attrs.src"
                        :mode="!n.h ? 'widthFix' : !n.w ? 'heightFix' : ''"
                        :lazy-load="opts[0]"
                        :webp="n.webp"
                        :show-menu-by-longpress="opts[3] && !n.attrs.ignore"
                        :data-i="i"
                        @load="imgLoad"
                        @error="mediaError"
                        @tap.stop.prevent="imgTap"
                        @longpress="noop"
                    />
                </block>
            </block>
            <text v-else-if="n.text" :user-select="opts[4] == 'force' && isiOS" decode>{{ n.text }}</text>
            <text v-else-if="n.name === 'br'">\n</text>
            <view
                v-else-if="n.name === 'a'"
                :id="n.attrs.id"
                :class="(n.attrs.href ? '_a ' : '') + n.attrs.class"
                hover-class="_hover"
                :style="'display:inline;' + n.attrs.style"
                :data-i="i"
                @tap.stop.prevent="linkTap"
            >
                <node :childs="n.children" :opts="opts" style="display: inherit" />
            </view>
            <video
                v-else-if="n.name === 'video'"
                :id="n.attrs.id"
                :class="n.attrs.class"
                :style="n.attrs.style"
                :autoplay="n.attrs.autoplay"
                :controls="n.attrs.controls"
                :loop="n.attrs.loop"
                :muted="n.attrs.muted"
                :object-fit="n.attrs['object-fit']"
                :poster="n.attrs.poster"
                :src="n.src[ctrl[i] || 0]"
                :data-i="i"
                @play="play"
                @error="mediaError"
            />
            <audio
                v-else-if="n.name === 'audio'"
                :id="n.attrs.id"
                :class="n.attrs.class"
                :style="n.attrs.style"
                :author="n.attrs.author"
                :controls="n.attrs.controls"
                :loop="n.attrs.loop"
                :name="n.attrs.name"
                :poster="n.attrs.poster"
                :src="n.src[ctrl[i] || 0]"
                :data-i="i"
                @play="play"
                @error="mediaError"
            />
            <rich-text v-else :id="n.attrs.id" :style="n.f" :user-select="opts[4]" :nodes="[n]" />
        </template>
    </view>
</template>

<script>
import node from './node';
export default {
    components: {
        node
    },
    props: ['data', 'compName'],
    computed: {
        n() {
            return this.data.n;
        },
        i() {
            return this.data.i;
        },
        opts() {
            return this.data.opts;
        },
        ctrl() {
            return this.data.ctrl;
        },
        isiOS() {
            return this.data.isiOS;
        },
        imgTap() {
            return this.data.imgTap;
        },
        imgLoad() {
            return this.data.imgLoad;
        },
        mediaError() {
            return this.data.mediaError;
        },
        noop() {
            return this.data.noop;
        },
        linkTap() {
            return this.data.linkTap;
        },
        play() {
            return this.data.play;
        }
    }
};
</script>
<style></style>
