<!--
 * @Author: 15902849627 380091478@qq.com
 * @Date: 2024-08-08 11:24:36
 * @LastEditors: 15902849627 380091478@qq.com
 * @LastEditTime: 2024-09-19 10:12:58
 * @FilePath: \assets\src\components\map.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<!--
 * @Author: 15902849627 380091478@qq.com
 * @Date: 2024-08-08 11:24:36
 * @LastEditors: 15902849627 380091478@qq.com
 * @LastEditTime: 2024-08-08 11:30:29
 * @FilePath: \assets\src\components\map.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div style="width: 100%; height: 500px; position: relative">
        <div @click="back" class="back" v-if="parentInfo.length != 1">返回</div>
        <div id="chart-panel" style="width: 100%; height: 960px; margin: 0 auto"></div>
    </div>
</template>

<script>
import {mapJson} from './map.js'
function _random(a, b) {
    return Math.round(Math.random() * Math.abs(b - a) + a);
}
var geoJson = {
    features: []
};

var timeTitle = ['10.1', '10.2', '10.3', '10.4', '10.5', '10.6', '10.7', '10.8'];

var myChart;
var img2 =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAAA4CAMAAAALkqCbAAAAjVBMVEUAAAA6k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/85lP86k/82lv86k/86k/86k/86k/86k/86k/86k/86k/86k/83lf86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/86k/9NleEvAAAALnRSTlMALC8zTFw4QztHakBWUQkSBR1TZloOYRQYYwuaGyEmgnqPiHLm4JT407yu8MelLgw7GwAABJBJREFUWMPtmOt6ojAQhhXPqIBiDKCAB/BQu3P/l7eZiWMQ3HW3sY9/+rU/bB9JXme+yUxs/ehHP/q7CniDyhrECt6gQw1iASe3qjCM4+Vy2XuR1FJxHIZuVSV0KwCBkoTj/g5BAywWi4m11CIa5A5jD8ekwuCJxAs+4VBBQALcf37V9Ivi55EEOSoYKzjj5/eCQDPkqfByODNDjAxIgHt3XyCkQQ6kiJniEza4d5oQROLvRzIZQnFlYAQGGNnpBnLFYIoLOC1PtHe+hxSJnLqR8C6wMQwYhev+g4H6tdIVBaNhKHIoWoGQ81AmGsLZznzvA35pCGIgBL372FIahDCIQkOo7VqBv8YkoDE9f7bryCSEkw4EMRACAQytRSCEQRQ6FCfo4c7bjCCQx51HIoUjQlQZNEHfSsO+5qhSKIj9EaTKwTBXOSAIEXX3az84wdZ1MRDzOTMwQQd//lv0GMlQzOcYCtc9wAk37sWRQEugKdpoii2cyREUCGTQCB1rEcUQKSgU5Ioz7DAFmwFlQ5siH8qkCyVCUDZ0HK4IjpUYYzzGUGA+EKKAccuT2SGVlA3KR9yLhDjChixRCQQiWIsoOBQaYgOXoCWiwUbZQEPwX2dYIQRlgwPBDO0viSk4FJQPdOYv+ODPfoXguOzhswphAtG2EIfiHuITXHbBlYEd4sAljGsQjjUEqgqB6XCPkHI9MATXSgk5GfPbIsGe2EF5OxkYgk+NFXxQiRpjWofCQRljXkv0Aw50Rk7IElp8fk7gpExBJTqqVYcFAlcHl6iyRAld7hYagE3RjYSEo/vyGjUMbIklDlXcNysQIpq4ax/Hq7h3CwVTdOwQiIEcwdlYwRm3nLtsCTZFZ6ewcjjrDtY1FH37U5sZyJZUoBtq4122hDGFQ+MV9nLTRm9N9Mv7m8bBh0QcXsChHdtkCRZxTRWXGq+whzWb+VD9/I/4CdPITffKocDY93d3ljDtXM07PFIwhtKLJhpiWIZ6qBLRIrzLhmnnOF4hRW9SnfBeNtshAw1VVI+jGgRVbV8mNF6FYW3WfeGUy0OVJ9NDhm28lg93EQkar8zIzWP/6Itzv3oQNa0M2jRUYeTH+dpvQoywneN4daNADLwA2V58EOHGoIcqES2XtWyYdj6C8slV0PoKSEOVv87HMqkx8L+TI2yal2L7y7C5k9NQxZNdTRygM6xq3w/0LFX7VgCHKk5+HYKtsodvl8tl0IDgomnDtyvlA6HBoI+PmUy8mgLibSoImu978k5W4q+5jTdNsXDTWeTXlDxePfCEL6X0UfRCeH+kTWpLylk63T+yhG4pWZbO7rSO/OQxhIhSpRkJX3CKG1IM0fp+1SxT7ZLXredju3qgx4t7nQLuVDoc3gbuo1Xbvvc4wH7EqM8j4fnDYtdxMHJp5nS2Zd/3nkbCiJd9mGZf/qsnxHpQ7JxsFkWzzNmW47X4d0/46KCnNn7ueiyzQZFriF05NmZ/uqxZ1V6eiIbFBmObl/1IIMMbRBR5lu3eyMAUb2VgijcyMIXsd+QbGbiqqdzepgBrLxEioZKzAfkNVE8cUpUSARIAAAAASUVORK5CYII='
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
//获取数据    拼接，获取近五年的数据

var geoCoordMap = mapJson

let toolTipData = [];
function lineData() {
    return toolTipData.map((item) => {
        return {
            coords: geoCoordMap[item.name]?[geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]]:[]
        };
    });
}
// 柱状体的顶部
function scatterData() {
    return toolTipData.map((item) => {
        return geoCoordMap[item.name]?[geoCoordMap[item.name][0], geoCoordMap[item.name][1], item]:[];
    });
}

export default {
    data() {
        return {
            parentInfo: [
                {
                    cityName: '全国',
                    level: 'china',
                    code: 100000
                }
            ]
        };
    },
    props: {
        mapData: {
            type: [Array, null],
            default: null
        }
    },
    watch: {
        mapData: {
            handler() {
                
                if (this.mapData) {
                    toolTipData = this.mapData.map(r => {
                        return {
                            name: r.field,
                            value: Number(r.amount),
                            datas: r.items.map(r=>r.field+' '+r.amount)
                        }
                    })
                    this.$nextTick(()=>{
                        this.getGeoJson(100000);
                    })
                    
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {

    },
    computed: {
        parentInfoShow() {
            console.log(this.parentInfo.length);
            return this.parentInfo.length;
        }
    },
    methods: {
        getGeoJson(adcode) {
            let that = this;
            AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
                var districtExplorer = new DistrictExplorer();
                districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
                    if (error) {
                        javascript: ;
                        console.error(error);
                        return;
                    }
                    let Json = areaNode.getSubFeatures();
                    if (Json.length > 0) {
                        geoJson.features = Json;
                    } else if (Json.length === 0) {
                        geoJson.features = geoJson.features.filter((item) => item.properties.adcode == adcode);
                        if (geoJson.features.length === 0) return;
                    }
                    that.getMapData();
                });
            });
        },
        initEchartMap(mapData, pointData) {
            myChart = echarts.init(document.getElementById('chart-panel'));
            //这里做个切换，全国的时候才显示南海诸岛  只有当注册的名字为china的时候才会显示南海诸岛
            if (this.parentInfo.length === 1) {
                echarts.registerMap('china', geoJson); //注册
            } else {
                echarts.registerMap('map', geoJson); //注册
            }
            const xData = [],
                yData = [];
            var min = 1;
            var max = 10000;
            if (mapData.length === 1) {
                min = 0;
            }
            mapData.forEach((c) => {
                xData.unshift(c.name);
                yData.unshift(c.value);
            });
            var options = {
                backgroundColor: 'transparent',
                tooltip: {
                    show: false,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },

                geo: {
                    map: this.parentInfo.length === 1 ? 'china' : 'map',
                    layoutSize: '105%', //大小
                    roam: true,
                    layoutCenter: ['50%', '44%'], //位置
                    tooltip: {
                        show: false,
                        trigger: 'item'
                    },
                    aspectScale: 1,
                    label: {
                        normal: {
                            show: false,
                            color: 'rgb(249, 249, 249)', //省份标签字体颜色
                            formatter: (p) => {
                                switch (p.name) {
                                    case '内蒙古自治区':
                                        p.name = '内蒙古';
                                        break;
                                    case '西藏自治区':
                                        p.name = '西藏';
                                        break;
                                    case '新疆维吾尔自治区':
                                        p.name = '新疆';
                                        break;
                                    case '宁夏回族自治区':
                                        p.name = '宁夏';
                                        break;
                                    case '广西壮族自治区':
                                        p.name = '广西';
                                        break;
                                    case '香港特别行政区':
                                        p.name = '香港';
                                        break;
                                    case '澳门特别行政区':
                                        p.name = '澳门';
                                        break;
                                    default:
                                        break;
                                }
                                return p.name;
                            }
                        },
                        emphasis: {
                            show: false,
                            color: '#0568f8'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            // borderColor: "rgba(57, 132, 188,0.4)",
                            borderColor: "rgba(58,149,253,0.6)",
                            shadowColor: "rgba(65, 214, 255,0.6)",
                            shadowOffsetY: 5,
                            shadowBlur: 15,
                            areaColor: "rgba(5,21,35,0.1)",
                        },
                        emphasis: {
                            areaColor: '#8dd7fc',
                            borderWidth: 1.6,
                            shadowBlur: 25
                        }
                    }
                },
                tooltip: {
                    triggerOn: "click",
                },
                series: [
                    {
                        name: '游客来源',
                        type: 'map',
                        geoIndex: 0,
                        map: this.parentInfo.length === 1 ? 'china' : 'map',
                        roam: true,
                        zoom: 1.5,
                        tooltip: {
                            trigger: 'item'
                            // formatter: (p) => {
                            //     let val = p.value;
                            //     if (p.name == '南海诸岛') return;
                            //     if (window.isNaN(val)) {
                            //         val = 0;
                            //     }
                            //     let txtCon = "<div style='text-align:left'>" + p.name + ':' + val + '人</div>';
                            //     return txtCon;
                            // }
                        },
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        data: mapData
                    },
                    // //柱状体的主干
                    // {
                    //     type: 'lines',
                    //     zlevel: 5,
                    //     effect: {
                    //         show: false,
                    //         symbolSize: 5 // 图标大小
                    //     },
                    //     lineStyle: {
                    //         width: 6, // 尾迹线条宽度
                    //         color: 'rgba(249, 105, 13, .6)',
                    //         opacity: 1, // 尾迹线条透明度
                    //         curveness: 0 // 尾迹线条曲直度
                    //     },
                    //     label: {
                    //         show: 0,
                    //         position: 'end',
                    //         formatter: '245'
                    //     },
                    //     silent: true,
                    //     data: lineData()
                    // },
                    // 柱状体的顶部
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        zlevel: 5,
                        tooltip: {
                            position: function (point, params, dom, rect, size) {
                                console.log(rect);

                                // 固定在顶部
                                return [rect['x'] - 16, rect['y'] - 130];
                            },
                            padding: 0,
                            show: true,
                            backgroundColor: 'transprent',
                            textStyle: {
                                fontSize: 12,
                                lineHeight: 30
                            },
                            formatter: (param) => {
                                let html = ''
                                param.data[2].datas.map(r => {
                                    html += `<p>${r}</p>`
                                })
                                return `<div style="box-sizing:border-box; padding:13px 17px;width:180px;height:136px;background:url(https://cdn.sckaiwu.cn/kll/app/static/img/mapModal.png) no-repeat 100% 100%">
                                    ${html}
                                    </div>`
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    var name = params.data[2].name;
                                    var value = params.data[2].value;
                                    var text = `{tline|${name}}   {fline|${value}}`;
                                    // var text = `{tline|项目个数} : {fline|${value}}`
                                    return text;
                                },
                                color: '#fff',
                                verticalAlign: 'center',
                                rich: {
                                    fline: {
                                        // padding: [0, 25],
                                        color: '#fff',
                                        fontSize: 14,
                                        fontWeight: 600
                                    },
                                    tline: {
                                        // padding: [0, 27],
                                        color: '#fff',
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            color: '#00FFF6',
                            opacity: 1
                        },
                        symbol: 'image://https://cdn.sckaiwu.cn/kll/app/static/img/point2.png',
                        symbolSize: [132, 56],
                        symbolOffset: [0, -50],
                        z: 999,
                        data: scatterData()
                    },
                    {
                        name: 'Top5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(toolTipData),
                        showEffectOn: 'render',
                        itemStyle: {
                            normal: {
                                color: '#04CACE'
                            }
                        },
                        rippleEffect: {
                            scale: 5,
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'bottom',
                                show: false,
                                color: '#fff',
                                distance: 10
                            }
                        },
                        symbol: 'circle',
                        symbolSize: [20, 10],
                        itemStyle: {
                            normal: {
                                color: '#16ffff',
                                shadowBlur: 10,
                                shadowColor: '#16ffff'
                            },
                            opacity: 1
                        },
                        zlevel: 4
                    }
                ]
            };

            myChart.setOption(options, true);

            myChart.hideLoading();
            //点击前解绑，防止点击事件触发多次
            myChart.off('click');
            myChart.on('click', this.echartsMapClick);
        },
        getMapData() {
            const mapData = [
                {
                    name: '青海省',
                    value: 2983.3048524592427,
                    level: 'province',
                    cityCode: 630000
                },
                {
                    name: '吉林省',
                    value: 2959.2463688315747,
                    level: 'province',
                    cityCode: 220000
                },
                {
                    name: '黑龙江省',
                    value: 2959.178718812589,
                    level: 'province',
                    cityCode: 230000
                },
                {
                    name: '贵州省',
                    value: 2858.6789806023394,
                    level: 'province',
                    cityCode: 520000
                },
                {
                    name: '上海市',
                    value: 2843.096833606342,
                    level: 'province',
                    cityCode: 310000
                },
                {
                    name: '江西省',
                    value: 2751.6483389204977,
                    level: 'province',
                    cityCode: 360000
                },
                {
                    name: '山东省',
                    value: 2718.7679846534443,
                    level: 'province',
                    cityCode: 370000
                },
                {
                    name: '湖南省',
                    value: 2532.564233676725,
                    level: 'province',
                    cityCode: 430000
                },
                {
                    name: '安徽省',
                    value: 2409.668140637018,
                    level: 'province',
                    cityCode: 340000
                },
                {
                    name: '北京市',
                    value: 2255.462183846231,
                    level: 'province',
                    cityCode: 110000
                },
                {
                    name: '海南省',
                    value: 2173.1543156242155,
                    level: 'province',
                    cityCode: 460000
                },
                {
                    name: '浙江省',
                    value: 2097.5994824633253,
                    level: 'province',
                    cityCode: 330000
                },
                {
                    name: '天津市',
                    value: 1580.3501393263246,
                    level: 'province',
                    cityCode: 120000
                },
                {
                    name: '新疆维吾尔自治区',
                    value: 1554.4750533682477,
                    level: 'province',
                    cityCode: 650000
                },
                {
                    name: '西藏自治区',
                    value: 1551.4412913554345,
                    level: 'province',
                    cityCode: 540000
                },
                {
                    name: '辽宁省',
                    value: 1274.1176670000025,
                    level: 'province',
                    cityCode: 210000
                },
                {
                    name: '台湾省',
                    value: 1238.0339612705866,
                    level: 'province',
                    cityCode: 710000
                },
                {
                    name: '湖北省',
                    value: 1096.4835151753957,
                    level: 'province',
                    cityCode: 420000
                },
                {
                    name: '山西省',
                    value: 1091.9852147176646,
                    level: 'province',
                    cityCode: 140000
                },
                {
                    name: '广东省',
                    value: 1080.453819241357,
                    level: 'province',
                    cityCode: 440000
                },
                {
                    name: '河南省',
                    value: 1037.9121531812843,
                    level: 'province',
                    cityCode: 410000
                },
                {
                    name: '福建省',
                    value: 880.5542725330653,
                    level: 'province',
                    cityCode: 350000
                },
                {
                    name: '四川省',
                    value: 680.1758456201347,
                    level: 'province',
                    cityCode: 510000
                },
                {
                    name: '云南省',
                    value: 577.1151680087661,
                    level: 'province',
                    cityCode: 530000
                },
                {
                    name: '宁夏回族自治区',
                    value: 564.3971876251948,
                    level: 'province',
                    cityCode: 640000
                },
                {
                    name: '甘肃省',
                    value: 439.0259400077368,
                    level: 'province',
                    cityCode: 620000
                },
                {
                    name: '河北省',
                    value: 419.7815882423199,
                    level: 'province',
                    cityCode: 130000
                },
                {
                    name: '陕西省',
                    value: 375.3413856375156,
                    level: 'province',
                    cityCode: 610000
                },
                {
                    name: '澳门特别行政区',
                    value: 155.79857787302132,
                    level: 'province',
                    cityCode: 820000
                },
                {
                    name: '内蒙古自治区',
                    value: 73.30315291206003,
                    level: 'province',
                    cityCode: 150000
                },
                {
                    name: '江苏省',
                    value: 50.730242810774094,
                    level: 'province',
                    cityCode: 320000
                },
                {
                    name: '香港特别行政区',
                    value: 34.46993969299128,
                    level: 'province',
                    cityCode: 810000
                },
                {
                    name: '广西壮族自治区',
                    value: 14.17476652327565,
                    level: 'province',
                    cityCode: 450000
                },
                {
                    name: '重庆市',
                    value: 0.8685779809038952,
                    level: 'province',
                    cityCode: 500000
                }
            ];
            const sum = 111111;
            const pointData = [
                {
                    name: '北京市',
                    value: [116.405285, 39.904989, 1286.2885765930978],
                    cityCode: 110000
                },
                {
                    name: '天津市',
                    value: [117.190182, 39.125596, 1438.1524781957098],
                    cityCode: 120000
                },
                {
                    name: '河北省',
                    value: [114.502461, 38.045474, 1616.412384315042],
                    cityCode: 130000
                },
                {
                    name: '山西省',
                    value: [112.549248, 37.857014, 871.2879620328589],
                    cityCode: 140000
                },
                {
                    name: '内蒙古自治区',
                    value: [111.670801, 40.818311, 2408.624788163257],
                    cityCode: 150000
                },
                {
                    name: '辽宁省',
                    value: [123.429096, 41.796767, 2900.75270134033],
                    cityCode: 210000
                },
                {
                    name: '吉林省',
                    value: [125.3245, 43.886841, 1437.095494033697],
                    cityCode: 220000
                },
                {
                    name: '黑龙江省',
                    value: [126.642464, 45.756967, 2142.2714831906674],
                    cityCode: 230000
                },
                {
                    name: '上海市',
                    value: [121.472644, 31.231706, 2690.8121695012296],
                    cityCode: 310000
                },
                {
                    name: '江苏省',
                    value: [118.767413, 32.041544, 90.1037448387092],
                    cityCode: 320000
                },
                {
                    name: '浙江省',
                    value: [120.153576, 30.287459, 2805.927176075527],
                    cityCode: 330000
                },
                {
                    name: '安徽省',
                    value: [117.283042, 31.86119, 1033.9567749510265],
                    cityCode: 340000
                },
                {
                    name: '福建省',
                    value: [119.306239, 26.075302, 2661.944864907178],
                    cityCode: 350000
                },
                {
                    name: '江西省',
                    value: [115.892151, 28.676493, 1884.3595178046317],
                    cityCode: 360000
                },
                {
                    name: '山东省',
                    value: [117.000923, 36.675807, 2354.2444264349806],
                    cityCode: 370000
                },
                {
                    name: '河南省',
                    value: [113.665412, 34.757975, 2561.0729188262058],
                    cityCode: 410000
                },
                {
                    name: '湖北省',
                    value: [114.298572, 30.584355, 2020.0464532115154],
                    cityCode: 420000
                },
                {
                    name: '湖南省',
                    value: [112.982279, 28.19409, 393.0939464512297],
                    cityCode: 430000
                },
                {
                    name: '广东省',
                    value: [113.280637, 23.125178, 2341.8961608335626],
                    cityCode: 440000
                },
                {
                    name: '广西壮族自治区',
                    value: [108.320004, 22.82402, 1971.3160894719774],
                    cityCode: 450000
                },
                {
                    name: '海南省',
                    value: [110.33119, 20.031971, 667.9173732191856],
                    cityCode: 460000
                },
                {
                    name: '重庆市',
                    value: [106.504962, 29.533155, 424.91008227581204],
                    cityCode: 500000
                },
                {
                    name: '四川省',
                    value: [104.065735, 30.659462, 488.9481808365865],
                    cityCode: 510000
                },
                {
                    name: '贵州省',
                    value: [106.713478, 26.578343, 2410.221845388686],
                    cityCode: 520000
                },
                {
                    name: '云南省',
                    value: [102.712251, 25.040609, 726.5999979582824],
                    cityCode: 530000
                },
                {
                    name: '西藏自治区',
                    value: [91.132212, 29.660361, 2208.6740655369986],
                    cityCode: 540000
                },
                {
                    name: '陕西省',
                    value: [108.948024, 34.263161, 1736.7350174435087],
                    cityCode: 610000
                },
                {
                    name: '甘肃省',
                    value: [103.823557, 36.058039, 896.2127177839492],
                    cityCode: 620000
                },
                {
                    name: '青海省',
                    value: [101.778916, 36.623178, 2729.7735894888438],
                    cityCode: 630000
                },
                {
                    name: '宁夏回族自治区',
                    value: [106.278179, 38.46637, 1146.2827101631633],
                    cityCode: 640000
                },
                {
                    name: '新疆维吾尔自治区',
                    value: [87.617733, 43.792818, 1204.9773707295383],
                    cityCode: 650000
                },
                {
                    name: '台湾省',
                    value: [121.509062, 25.044332, 2016.1856418414018],
                    cityCode: 710000
                },
                {
                    name: '香港特别行政区',
                    value: [114.173355, 22.320048, 1152.1638602322766],
                    cityCode: 810000
                },
                {
                    name: '澳门特别行政区',
                    value: [113.54909, 22.198951, 16.545942804256477],
                    cityCode: 820000
                }
            ];
            this.initEchartMap(mapData, pointData);
        },
        //echarts点击事件
        echartsMapClick(params) {
            if (!params.data || !params.data.cityCode) {
                return;
            } else {
                //如果当前是最后一级，那就直接return
                if (this.parentInfo[this.parentInfo.length - 1].code == params.data.cityCode) {
                    return;
                }
                myChart.showLoading();
                let data = params.data;
                this.parentInfo.push({
                    cityName: data.name,
                    level: data.level,
                    code: data.cityCode
                });
                this.getGeoJson(data.cityCode);
            }
        },
        back() {
            if (this.parentInfo.length === 1) {
                return;
            }
            myChart.showLoading();
            this.parentInfo.pop();
            this.getGeoJson(this.parentInfo[this.parentInfo.length - 1].code);
        }
    }
};
</script>

<style lang="less" scoped>
.back {
    position: absolute;
    right: -50px;
    top: 30px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    z-index: 100;
    background: #24cff4;
    width: 80px;
    border-radius: 10px;
    padding: 10px 0;
    text-align: center;
    box-sizing: border-box;
    letter-spacing: 5px;
    margin-left: -120px;
    padding-left: 5px;
}
</style>