<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月18日 15:00:20-->
<template>
    <div id="TestPage">
        <router-view />
        <div v-if="$route.name === 'testpage'" id="TestPage" class="pd24">
            <el-button type="primacy" @click="jumpAddTestPage">跳转新增测试页面</el-button>
        </div>
        <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 pd20">
            <code>
                <p>注意：跳转子页面需要手动嵌入&lt;router-view /&gt; 且需要判断当前路由</p>
                <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>
            </code>
        </div>
    </div>
</template>

<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'TestPage',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            moreFlag: true,
            htmlStrArr: [`
<template>
    <div id="TestPage">
        <router-view />
        <div v-if="$route.name === 'testpage'" id="TestPage" class="pd24">
            <el-button type="primacy" @click="jumpAddTestPage">跳转新增测试页面</el-button>
        </div>
    </div>
</template>`, `
<script>

export default {
    data() {
        return {
        };
    },
    methods: {
        jumpAddTestPage() {
            this.$router.push('/testpage/addtest');
        }
    }
};
</scr`, `ipt>`]
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        jumpAddTestPage() {
            this.$router.push('/testpage/addtest');
        },
        handleMore() {
            this.moreFlag = !this.moreFlag;
        },
        toHtml(str) {
            return Prism.highlight(str, Prism.languages.html, 'html');
        },
        toJs(str) {
            return Prism.highlight(str, Prism.languages.js, 'js');
        },
        handleCopy(value) {
            this.$copyText(value)
                .then(() => {
                    this.$message('已成功复制，可直接去粘贴');
                })
                .catch(() => {
                    this.$message('复制失败');
                });
        }
    }
};
</script>

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