<template>
    <view style="height: 100%">
        <block v-for="(n1, i1) in childs" :key="i1">
            <El compName="el" :data="{ n: n1, i: '' + i1, opts: opts, ctrl: ctrl }" v-if="!n1.c && (!n1.children || n1.name === 'a' || !isInline(n1.name, n1.attrs.style))"></El>

            <view v-else :id="n1.attrs.id" :class="'_' + n1.name + ' ' + n1.attrs.class" :style="n1.attrs.style">
                <block v-for="(n2, i2) in n1.children" :key="i2">
                    <El
                        compName="el"
                        :data="{ n: n2, i: i1 + '_' + i2, opts: opts, ctrl: ctrl }"
                        v-if="!n2.c && (!n2.children || n2.name === 'a' || !isInline(n2.name, n2.attrs.style))"
                    ></El>

                    <view v-else :id="n2.attrs.id" :class="'_' + n2.name + ' ' + n2.attrs.class" :style="n2.attrs.style">
                        <block v-for="(n3, i3) in n2.children" :key="i3">
                            <El
                                compName="el"
                                :data="{ n: n3, i: i1 + '_' + i2 + '_' + i3, opts: opts, ctrl: ctrl }"
                                v-if="!n3.c && (!n3.children || n3.name === 'a' || !isInline(n3.name, n3.attrs.style))"
                            ></El>

                            <view v-else :id="n3.attrs.id" :class="'_' + n3.name + ' ' + n3.attrs.class" :style="n3.attrs.style">
                                <block v-for="(n4, i4) in n3.children" :key="i4">
                                    <El
                                        compName="el"
                                        :data="{ n: n4, i: i1 + '_' + i2 + '_' + i3 + '_' + i4, opts: opts, ctrl: ctrl }"
                                        v-if="!n4.c && (!n4.children || n4.name === 'a' || !isInline(n4.name, n4.attrs.style))"
                                    ></El>

                                    <view v-else :id="n4.attrs.id" :class="'_' + n4.name + ' ' + n4.attrs.class" :style="n4.attrs.style">
                                        <block v-for="(n5, i5) in n4.children" :key="i5">
                                            <El
                                                compName="el"
                                                :data="{ n: n5, i: i1 + '_' + i2 + '_' + i3 + '_' + i4 + '_' + i5, opts: opts, ctrl: ctrl }"
                                                v-if="!n5.c && (!n5.children || n5.name === 'a' || !isInline(n5.name, n5.attrs.style))"
                                            ></El>

                                            <node
                                                v-else
                                                :id="n5.attrs.id"
                                                :class="'_' + n5.name + ' ' + n5.attrs.class"
                                                :style="n5.attrs.style"
                                                :childs="n5.children"
                                                :opts="opts"
                                            />
                                        </block>
                                    </view>
                                </block>
                            </view>
                        </block>
                    </view>
                </block>
            </view>
        </block>
    </view>
</template>
<script module="isInline" lang="wxs">
var e={abbr:!0,b:!0,big:!0,code:!0,del:!0,em:!0,i:!0,ins:!0,label:!0,q:!0,small:!0,span:!0,strong:!0,sub:!0,sup:!0};module.exports=function(n,i){return e[n]||-1!==(i||"").indexOf("inline")};
</script>
<script>
'use strict';
import node from './node';
import El from './node-el.vue';
function t(t, e, i) {
    if (e in t) {
        Object.defineProperty(t, e, {
            value: i,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        t[e] = i;
    }
    return t;
}
export default {
    components: {
        node,
        El
    },
    data() {
        return {
            ctrl: {},
            isiOS: uni.getSystemInfoSync().system.includes('iOS'),
            i1: '',

            n1: {
                c: '',
                children: '',
                name: '',

                attrs: {
                    id: '',
                    class: '',
                    style: ''
                }
            },

            i2: '',

            n2: {
                c: '',
                children: '',
                name: '',

                attrs: {
                    id: '',
                    class: '',
                    style: ''
                }
            },

            i3: '',

            n3: {
                c: '',
                children: '',
                name: '',

                attrs: {
                    id: '',
                    class: '',
                    style: ''
                }
            },

            i4: '',

            n4: {
                c: '',
                children: '',
                name: '',

                attrs: {
                    id: '',
                    class: '',
                    style: ''
                }
            },

            i5: '',

            n5: {
                c: '',
                children: '',
                name: '',

                attrs: {
                    id: '',
                    class: '',
                    style: ''
                }
            }
        };
    },
    props: {
        childs: Array,
        opts: Array
    },
    options: {
        addGlobalClass: true
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached: function () {
            this.$emit(
                'add',
                {
                    detail: this
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },

        noop: function () {},

        getNode: function (t) {
            try {
                for (e = t.split('_'), i = this.childs[e[0]], r = 1, void 0; r < e.length; r++) {
                    var e;
                    var i;
                    var r;
                    i = i.children[e[r]];
                }
                return i;
            } catch (t) {
                console.log('CatchClause', t);
                console.log('CatchClause', t);
                return {
                    text: '',
                    attrs: {},
                    children: []
                };
            }
        },

        play: function (t) {
            this.root.$emit('play');
            if (this.root.data.pauseVideo) {
                for (e = false, i = t.target.id, r = this.root._videos.length, void 0; r--; ) {
                    var e;
                    var i;
                    var r;
                    this.root._videos[r].id === i ? (e = true) : this.root._videos[r].pause();
                }
                if (!e) {
                    var o = uni.createVideoContext(i, this);
                    o.id = i;
                    if (this.root.playbackRate) {
                        o.playbackRate(this.root.playbackRate);
                    }
                    this.root._videos.push(o);
                }
            }
        },

        imgTap: function (t) {
            var e = this.getNode(t.target.dataset.i);
            if (e.a) {
                return this.linkTap(e.a);
            }
            if (
                !e.attrs.ignore &&
                (this.root.$emit('imgtap', {
                    detail: e.attrs
                }),
                this.root.data.previewImg)
            ) {
                var i = this.root.imgList[e.i];
                uni.previewImage({
                    showmenu: this.root.data.showImgMenu,
                    current: i,
                    urls: this.root.imgList
                });
            }
        },

        imgLoad: function (e) {
            var i;
            var r = e.target.dataset.i;
            var o = this.getNode(r);
            o.w ? ((this.opts[1] && !this.ctrl[r]) || -1 === this.ctrl[r]) && (i = 1) : (i = e.detail.width);
            if (i) {
                this.setData(t({}, 'ctrl.' + r, i));
            }
            this.checkReady();
        },

        checkReady: function () {
            var that = this;
            this.root.data.lazyLoad ||
                ((this.root.imgList._unloadimgs -= 1),
                this.root.imgList._unloadimgs ||
                    setTimeout(function () {
                        that.root
                            .getRect()
                            .then(function (e) {
                                that.root.$emit('ready', {
                                    detail: e
                                });
                            })
                            .catch(function () {
                                that.root.$emit('ready', {
                                    detail: {}
                                });
                            });
                    }, 350));
        },

        linkTap: function (t) {
            if (t.currentTarget) {
                var e = this.getNode(t.currentTarget.dataset.i);
            } else {
                var e = {};
            }
            var i = e.attrs || t;
            var r = i.href;
            this.root.$emit('linktap', {
                detail: Object.assign(
                    {
                        innerText: this.root.getText(e.children || [])
                    },
                    i
                )
            });
            if (r) {
                '#' === r[0]
                    ? this.root.navigateTo(r.substring(1)).catch(function () {})
                    : r.split('?')[0].includes('://')
                    ? this.root.data.copyLink &&
                      uni.setClipboardData({
                          data: r,
                          success: function () {
                              return uni.showToast({
                                  title: '链接已复制'
                              });
                          }
                      })
                    : uni.navigateTo({
                          url: r,
                          fail: function () {
                              uni.switchTab({
                                  url: r,
                                  fail: function () {}
                              });
                          }
                      });
            }
        },

        mediaError: function (e) {
            var i = e.target.dataset.i;
            var r = this.getNode(i);
            if ('video' === r.name || 'audio' === r.name) {
                var o = (this.ctrl[i] || 0) + 1;
                if (o > r.src.length) {
                    o = 0;
                }
                if (o < r.src.length) {
                    return this.setData(t({}, 'ctrl.' + i, o));
                }
            } else {
                if ('img' === r.name) {
                    if (this.opts[2]) {
                        this.setData(t({}, 'ctrl.' + i, -1));
                    }
                    this.checkReady();
                }
            }
            if (this.root) {
                this.root.$emit('error', {
                    detail: {
                        source: r.name,
                        attrs: r.attrs,
                        errMsg: e.detail.errMsg
                    }
                });
            }
        }
    },
    created: function () {}
};
</script>
<style>
._a {
    padding: 1.5px 0 1.5px 0;
    color: #366092;
    word-break: break-all;
}
._hover {
    text-decoration: underline;
    opacity: 0.7;
}
._img {
    max-width: 100%;
    -webkit-touch-callout: none;
}
._b,
._strong {
    font-weight: 700;
}
._code {
    font-family: monospace;
}
._del {
    text-decoration: line-through;
}
._em,
._i {
    font-style: italic;
}
._h1 {
    font-size: 2em;
}
._h2 {
    font-size: 1.5em;
}
._h3 {
    font-size: 1.17em;
}
._h5 {
    font-size: 0.83em;
}
._h6 {
    font-size: 0.67em;
}
._h1,
._h2,
._h3,
._h4,
._h5,
._h6 {
    display: block;
    font-weight: 700;
}
._ins {
    text-decoration: underline;
}
._li {
    display: list-item;
}
._ol {
    list-style-type: decimal;
}
._ol,
._ul {
    display: block;
    padding-left: 40px;
    margin: 1em 0;
}
._q::before {
    content: '"';
}
._q::after {
    content: '"';
}
._sub {
    font-size: smaller;
    vertical-align: sub;
}
._sup {
    font-size: smaller;
    vertical-align: super;
}
._tbody,
._tfoot,
._thead {
    display: table-row-group;
}
._tr {
    display: table-row;
}
._td,
._th {
    display: table-cell;
    vertical-align: middle;
}
._th {
    font-weight: 700;
    text-align: center;
}
._ul {
    list-style-type: disc;
}
._ul ._ul {
    margin: 0;
    list-style-type: circle;
}
._ul ._ul ._ul {
    list-style-type: square;
}
._abbr,
._b,
._code,
._del,
._em,
._i,
._ins,
._label,
._q,
._span,
._strong,
._sub,
._sup {
    display: inline;
}
._blockquote,
._div,
._p {
    display: block;
}
</style>
