<!-- 功能：下载; 作者：LZJ; 时间：2022年10月25日 09:04:21-->
<template>
    <div id="DownloadTest" class="pd20">
        <el-button type="primary" size="small" @click="templateDownload">下载xls模版</el-button>
        <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(htmlCont + setCont.join(''))">复制</button>
                <pre class="language-">
                    <code class="language-html" v-html="toHtml(htmlCont)" />
                    <code class="language-js" v-html="toJs(setCont.join(''))" />
                </pre>
            </div>

            <div class="ps-r">
                <button class="copy-button" @click="handleCopy(toolCont)">复制</button>
                <pre class="language-js" v-html="toJs(toolCont)" />
            </div>
        </div>
    </div>
</template>

<script>
import api_testPage from '@/api/api_testPage';
import { openDownload } from '@/tool/func';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'DownloadTest',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            moreFlag: true,
            htmlCont: `
<template>
    <div id="DownloadTest" class="pd20">
        <el-button type="primary" size="small" @click="templateDownload">下载xls模版</el-button>
    </div>
</template>`,
            setCont: [`
<script>
import api_testPage from '@/api/api_testPage';
import { openDownload } from '@/tool/func';
export default {
    methods: {
        // 接口请求
        templateDownload() {
            const params = { excelName: 'basicServicePricingDetail' };
            // 接口成功后直接调用封装好的方法，这里只支持后台返回的是文件，而不是二进制流
            api_testPage.templateDownload({ params: params }).then(res => {
                // 调用工具类封装的方法
                openDownload(res.url);
            }).catch(() => {});
        }
    }
};
</scr`, `ipt>
`],
            toolCont: `// 封装的创建文件的方法
export function openDownload(url) {
    const fileName = '';
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.target = '_blank';
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    link.remove();
}`
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        toHtml(str) {
            return Prism.highlight(str, Prism.languages.html, 'html');
        },
        toJs(str) {
            return Prism.highlight(str, Prism.languages.js, 'js');
        },
        // 接口请求
        templateDownload() {
            const params = { excelName: 'basicServicePricingDetail' };
            api_testPage.templateDownload({ params: params }).then(res => {
                openDownload(res.url);
            }).catch(() => {});
        },
        // 显示隐藏代码
        handleMore() {
            this.moreFlag = !this.moreFlag;
        },
        handleCopy(value) {
            this.$copyText(value)
                .then(() => {
                    this.$message('已成功复制，可直接去粘贴');
                })
                .catch(() => {
                    this.$message('复制失败');
                });
        }
    }
};
</script>

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

</style>
