<!-- 功能：CommonEchartsTest; 作者：LZJ; 时间：2022年10月17日 15:39:42-->
<template>
    <div id="CommonEchartsTest" class="pd20">
        <div class="flex-between">
            <div v-for="(item, index) in chartArr" :key="index">
                <CommonEcharts :chart-option="item.chartOption" width="300px" height="400px" />
                <p class="ta-c">{{ item.name }}</p>
                <div class="code-display-box mb32 mt40 ps-r border-top">
                    <span class="code-display pointer ft12" @click="handleMore(index)">
                        {{ moreFlag===index ? '隐藏代码' : '显示代码' }}
                        <i class="more-flag-icon" :class="moreFlag===index ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
                    </span>
                </div>
            </div>
        </div>
        <div v-if="moreFlag||moreFlag===0" class="ft16 line-height36">
            <code>
                <div class="ps-r">
                    <button class="copy-button" @click="handleCopy(htmlCont + jsCont)">复制</button>
                    <pre class="language-">
                        <code class="language-html" v-html="toHtml(htmlCont)" />
                        <code class="language-js" v-html="toJs(jsCont)" />
                    </pre>
                </div>
            </code>
        </div>
    </div>
</template>

<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import { CommonEcharts } from '@/components';
import { barChartOption, barChartOptionString, pieChartOption, pieChartOptionString, lineChartOption, lineChartOptionString, funnelChartOption, funnelChartOptionString, ringChartOption, ringChartOptionString } from './dataSource/testPageData';
export default {
    // 组件名称
    name: 'CommonEchartsTest',
    // 局部注册的组件
    components: { CommonEcharts },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            chartArr: [
                { name: '柱形图', chartOption: barChartOption },
                { name: '折线图', chartOption: lineChartOption },
                { name: '环形图', chartOption: ringChartOption },
                { name: '饼图', chartOption: pieChartOption },
                { name: '漏斗图', chartOption: funnelChartOption }
            ],
            chartOption: '',
            moreFlag: '',
            scriptObj: {
                created: true,
                importArr: [
                    { component: '{ CommonEcharts }', componentUrl: '@/components' },
                    { component: '{ pieColors }', componentUrl: '@/constant', note: '颜色设置，一般不需要修改' }
                ]
            },
            htmlCont: `
<template>
    <div>
        <CommonEcharts :chart-option="chartOption" width="300px" height="400px" />
    </div>
</template>`,
            jsCont: ''
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        handleMore(index) {
            let str = '';
            if (this.moreFlag !== index) {
                switch (index) {
                    case 0: str = barChartOptionString; break;
                    case 1: str = lineChartOptionString; break;
                    case 2:str = ringChartOptionString; break;
                    case 3:str = pieChartOptionString; break;
                    case 4:str = funnelChartOptionString; break;
                    default:
                        break;
                }
                this.jsCont = `
<script>
import { CommonEcharts } from '@/components';
import { pieColors } from '@/constant';
export default {
    components: { CommonEcharts },
    data() {
        return {
            chartOption: {}
        };
    },
    created() {
        this.chartOption = ${str};
    }
};
</scr` + `ipt>
`;
                this.moreFlag = index;
            } else {
                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>
