<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月25日 09:08:12-->
<template>
    <div id="IframeTest" class="pd20">
        <IframeTemplate :src="src" :iframe-style="iframeStyle" />
        <div class="code-display-box mb32 mt40 ps-r border-top">
            <span class="code-display pointer ft12" @click="handleMore">
                {{ moreFlag ? '隐藏代码' : '显示代码' }}
                <i class="more-flag-icon" :class="moreFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
            </span>
        </div>
        <div v-if="moreFlag" class="ft16 line-height36">
            <div class="ps-r">
                <button class="copy-button" @click="handleCopy(htmlStrArr.join(''))">复制</button>
                <pre class="language-">
                    <code class="language-html" v-html="toHtml(htmlStrArr[0])" />
                    <code class="language-js" v-html="toJs(htmlStrArr.slice(1).join(''))" />
                </pre>
            </div>
        </div>
    </div>
</template>

<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import IframeTemplate from '@/components/iframe/IframeTemplate';
export default {
    // 组件名称
    name: 'IframeTest',
    // 局部注册的组件
    components: { IframeTemplate },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            moreFlag: true,
            src: '',
            iframeStyle: {
                width: '100%',
                height: '100%'
            },
            htmlStrArr: [`
<template>
    <div id="IframeTest">
        /*
        * IframeTemplate封装了NProgress加载样式
        * 入参说明
        * src: '需要嵌入的第三方的地址',
        * iframeStyle: '嵌入进来的样式'
        */
        <template>
            <IframeTemplate :src="src" :iframe-style="iframeStyle" />
        </template>
    </div>
</template>`, `
<script>

import IframeTemplate from '@/components/iframe/IframeTemplate';
export default {
    // 组件名称
    name: 'IframeTest',
    // 局部注册的组件
    components: { IframeTemplate },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            src: '',
            iframeStyle: {
                width: '100%',
                height: '100%'
            }
        };
    },
    created() {
        this.src = 'https://element.eleme.cn/#/zh-CN/component/installation';
    }
};
</scr`, 'ipt>']
        };
    },
    // 侦听器
    watch: {},
    created() {
        this.src = 'https://element.eleme.cn/#/zh-CN/component/installation';
    },
    mounted() {
    },
    methods: {
        toHtml(str) {
            return Prism.highlight(str, Prism.languages.html, 'html');
        },
        toJs(str) {
            return Prism.highlight(str, Prism.languages.js, 'js');
        },
        // 显示隐藏代码
        handleMore() {
            this.moreFlag = !this.moreFlag;
        },
        handleCopy(value) {
            this.$copyText(value)
                .then(() => {
                    this.$message('已成功复制，可直接去粘贴');
                })
                .catch(() => {
                    this.$message('复制失败');
                });
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>

</style>
