<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-data-analysis"></i>  {{ $route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div
            class="container"
            v-loading="loading"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <div class="handle-box">
                <el-select
                    v-model="journal_id"
                    filterable
                    placeholder="Please select a Journal"
                    value-key="groupID"
                    style="width: 300px"
                    @change="chan_id"
                >
                    <el-option v-for="item in evaList" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
                </el-select>
            </div>

            <div id="myChart" class="schart" style="width: 40%; height: calc(70vh * 0.25); margin: 0 auto; float: right; z-index: 20"></div>
            <!-- <div style="width: 100%; height: 200px; margin: 0 auto; margin-bottom: 40px; overflow: hidden">
                
                <div id="myChart" class="schart" style="width: 50%; height: 100%; margin: 0 auto; float: right"></div>
            </div> -->

            <div id="myChartgjhp" class="schart" style="width: 100%; height: 70vh; margin: 0 auto"></div>
            <!-- <div style="width: 100%; display: flex; align-items: center; justify-content: space-between"> -->

            <!-- </div> -->

            <!-- 国家内外(饼状图) -->
        </div>
    </div>
</template>

<script>
var p_year = new Date().getFullYear() - 1;
var year = new Date().getFullYear();
export default {
    data() {
        return {
            evaList: [],
            user_id: localStorage.getItem('U_id'),
            user_cap: localStorage.getItem('U_role'),
            loading: false,
            df_jour: [],
            tableData: [],
            journal_id: '',
            journal_data: {},

            myChart1: '',
            myChart: '',
            myChartgjh: '',
            myChartgjhp: '',
            Ech_1: [
                {
                    value: 0,
                    name: '国内'
                },
                {
                    value: 0,
                    name: '国外'
                }
            ],
            Ech_2: [],
            Ech_3: [],
            Ech_4_1: [],
            Ech_4_2: [],
            Ech_5: [],
            tab_le6: [],
            tab_le7_1: [],
            tab_le7_2: [],
            tab_le8_1: [],
            tab_le8_2: [],
            category: [
                {
                    title: this.$t('evaluationsis.articles'),
                    key: 'mq'
                },
                {
                    title: this.$t('evaluationsis.zr'),
                    key: 'zr'
                },
                {
                    title: this.$t('evaluationsis.zc'),
                    key: 'zc'
                }
                // {
                //     title: '录用率',
                //     key: 'lyl'
                // }
            ],
            option: {
                legend: {
                    // type: 'scroll',
                    // orient: 'vertical',
                    right: 0
                    // top: 10,
                    // bottom: 20
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                dataset: {
                    source: []
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        // formatter: function (value) {
                        //     console.log('value at line 86:', value);
                        //     // 格式化标签，例如只显示年月日
                        // }
                    }
                },
                yAxis: {
                    gridIndex: 0
                },
                grid: [
                    {
                        top: '25%',
                        width: '100%',
                        bottom: '5%',
                        left: 0,
                        containLabel: true
                    }
                ],

                series: []
            },

            optiongjh: {
                title: {
                    text: '文章国际化分布'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: [
                    {
                        top: 50,
                        width: '100%',
                        bottom: '34%',
                        left: 10,
                        containLabel: true
                    },
                    {
                        top: '33%',
                        width: '100%',
                        bottom: 0,
                        left: 10,
                        containLabel: true
                    }
                ],
                xAxis: [],
                yAxis: [
                    { gridIndex: 0, type: 'value', boundaryGap: [0, 0.01] },
                    { gridIndex: 1, type: 'value', boundaryGap: [0, 0.01] }
                ],

                series: []
            },

            name: [
                { title: p_year + '', key: 'p_year' },
                { title: year + '', key: 'year' }
            ]
        };
    },
    watch: {
        // df_jour: function(val) {
        // 	var _this = this;
        // 	_this.$nextTick(function() {
        // 		this.drawLine1();
        // 		this.drawLine2();
        // 		this.drawLine3();
        // 		this.drawLine4();
        // 		this.drawLine5();
        // 	});
        // },
    },
    mounted() {
       
      
        this.getData();
        // this.drawLine();
    },
    created() {},
    computed: {
        opened() {}
    },
    methods: {
        async chan_id(value) {
            this.loading = true;
            console.log('value at line 138:', value);
            this.$echarts.init(document.getElementById('myChart')).clear();
            this.$echarts.init(document.getElementById('myChartgjhp')).clear();
            this.journal_id = value;
            console.log('this.evaList at line 169:', this.evaList);
            this.journal_data = this.evaList.find((e) => e.journal_id == this.journal_id);

            await this.initEcharts();
            await this.initEchartsgjh();
            this.loading = false;
        },
        // 获取数据
        async getData() {
            this.loading = true;

            this.$api
                .post('api/Super/editorJournal', {
                    editor_id: this.user_id
                })
                .then(async (res) => {
                    if (res.code == 0) {
                        this.loading = false;
                        this.evaList = res.data.list;
                        this.journal_id = res.data.list[0].journal_id;
                        console.log('this.evaList at line 169:', this.evaList);
                        this.journal_data = this.evaList.find((e) => e.journal_id == this.journal_id);

                        await this.initEcharts();
                        await this.initEchartsgjh();
                    } else {
                        this.loading = false;
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.loading = false;
                    this.$message.error(err);
                });
        },
        initEcharts() {
            this.myChart = this.$echarts.init(document.getElementById('myChart'));

            const downloadJson = { ...this.journal_data.board };
            var option = {
                title: {
                    text: `${this.$t('evaluationsis.InternationalDistributionNumber')} `,
                    textStyle: {
                        fontSize: 14
                    },
                    // top: index == 0 ? '27%' : '62%',
                    right: '10%',
                    textAlign: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    // formatter函数动态修改tooltip样式
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    show: false,
                    // type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: Object.keys(downloadJson.country).map(function (key) {
                        return key;
                    })
                },
                label: {
                    formatter: '\n  {b|{b}：}{c}',

                    rich: {
                        b: {
                            color: '#4C5058',
                            fontSize: 12,
                            fontWeight: 'bold',
                            lineHeight: 10
                        }
                    }
                },
                series: [
                    {
                        name: this.$t('evaluationsis.boardMembers'),

                        type: 'pie',
                        radius: '65%',
                        center: ['40%', '65%'],
                        data: Object.keys(downloadJson.country).map(function (key) {
                            return {
                                name: key,
                                value: downloadJson.country[key]
                            };
                        }),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.myChart.setOption(option);
            console.log('option at line 194:', option);
        },
        uniqueArr(arr1, arr2) {
            //合并两个数组
            arr1.push(...arr2); //或者arr1 = [...arr1,...arr2]
            //去重
            let arr3 = Array.from(new Set(arr1)); //let arr3 = [...new Set(arr1)]
            console.log(arr3);
            return arr3;
        },

        async initEchartsgjh(type, title) {
            this.myChartgjhp = this.$echarts.init(document.getElementById('myChartgjhp'));
            var p_year = [];
            var year = [];
            var xAxis = [];
            var series = [];
            var legend = [];
            var title = [];
            var category = this.category;
            var sourceList = [];
            var product = ['product'];

            var xcategory = this.category.map((e) => e.title);
            console.log('xcategory at line 306:', xcategory);
            for (let i in this.journal_data['p_year'].gjh) {
                p_year.push(i);
            }
            for (let i in this.journal_data['year'].gjh) {
                year.push(i);
            }
            var yAxisData = this.uniqueArr(p_year, year);
            console.log('yAxisData at line 333:', yAxisData);
            var str = '';
            this.name.forEach((e, index) => {
                var otherInfo = { ...this.journal_data[e.key] };
                console.log('otherInfo at line 312:', otherInfo);
                var value = [];
                var sourceListYear = [];
                this.category.forEach((v, i) => {
                    sourceListYear.push({ value: this.journal_data[e.key][v.key] ? this.journal_data[e.key][v.key] : 0, ...otherInfo });
                });

                console.log('sourceListYear at line 359:', sourceListYear);
                series[index] = {
                    name: e.title,
                    type: 'bar',
                    label: {
                        position: 'top',
                        show: true
                    },
                    hoverAnimation: true, // 悬浮的动画加上
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: sourceListYear,
                    barWidth: 20
                };
                var strValue = Number(this.journal_data[e.key]['lyl']) * 100;
                if (index == 0) {
                    str += `${e.title} : ${Number(strValue).toFixed(2)}%  \n\n`;
                } else {
                    str += `${e.title} : ${Number(strValue).toFixed(2)}%`;
                }
            });

            title[0] = {
                text: this.$t('evaluationsis.EmploymentRate'),
                subtext: str,
                top: '0%',
                left: '30%',
                textAlign: 'left',
                textStyle: {
                    fontSize: 14
                }
            };
            this.name.forEach((e, index) => {
                var otherInfo = { ...this.journal_data[e.key] };

                title[index + 1] = {
                    text:
                        !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en'
                            ? `${this.$t('evaluationsis.InternationalDistributionArticles')} in ${e.title} `
                            : `${e.title} 年 ${this.$t('evaluationsis.InternationalDistributionArticles')}`,
                    // subtext: '总计 ',
                    top: index == 0 ? '27%' : '62%',
                    left: '0%',
                    textAlign: 'left',
                    textStyle: {
                        fontSize: 14
                    }
                };
                legend.push(e.title);

                series[index + 3] = {
                    name: e.title,
                    type: 'bar',

                    label: {
                        position: 'top',
                        show: true
                    },
                    hoverAnimation: true, // 悬浮的动画加上
                    data: [],

                    // type: 'bar',
                    barWidth: 20
                };
                var value = [];
                yAxisData.forEach((v, i) => {
                    value.push({ value: this.journal_data[e.key].gjh[v] ? this.journal_data[e.key].gjh[v] : 0, ...otherInfo });
                });
                series[index + 3] = { ...series[index + 3], xAxisIndex: index + 1, yAxisIndex: index + 1, data: value };
                console.log('series at line 352:', series);
            });

            console.log('series at line 352:', series);

            var option = {
                color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                // color: ['#bfa', '#baf', 'pink', '#baf'], // 配置数据颜色
                grid: [
                    // 配置第一个折线图的位置
                    {
                        left: '5%',
                        right: '2%',
                        width: '400',
                        top: '5%',
                        height: '15%'
                    },
                    // 配置第二个折线图位置
                    {
                        left: '5%',
                        right: '2%',
                        top: '35%',
                        height: '20%'
                    },
                    // 配置第二个折线图位置
                    {
                        left: '5%',
                        right: '2%',
                        top: '75%',
                        height: '20%'
                    },
                    {
                        left: '5%',
                        right: '2%',
                        width: '900',
                        top: '5%',
                        height: '15%'
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    // formatter函数动态修改tooltip样式
                    formatter: function (params) {
                        var that = this;
                       
                        if (params) {
                            var htmlStr = '';
                            // htmlStr += params[0].name.replace(/\-/g, '/') + '<br/>'; //x轴的名称

                            if (params[0].axisIndex == 0) {
                                htmlStr += '<div>';
                                htmlStr += params[0].name + '<br/>';
                                //圆点后面显示的文本
                                for (var i = 0; i < params.length; i++) {
                                    var param = params[i]; // 存一份item项
                                    console.log('param at line 404:', param);
                                    var seriesName = param.seriesName; //图例名称
                                    var value = param.value; //y轴值
                                    var color = param.color; //图例颜色

                                    htmlStr +=
                                        '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                                        color +
                                        ';"></span>';
                                    htmlStr += `${param.seriesName}: ${value}<br/>`; //2023年

                                    htmlStr += '</div>';
                                }
                            } else if (params[0].axisIndex == 1 || params[0].axisIndex == 2) {
                                htmlStr += '<div>';
                                htmlStr +=
                                    !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en'
                                        ? 'Contry' + `：` + params[0].name + '<br/>'
                                        : '国家' + ` ：` + params[0].name + '<br/>';
                                //圆点后面显示的文本
                                for (var i = 0; i < params.length; i++) {
                                    var param = params[i]; // 存一份item项
                                    console.log('param at line 404:', param);
                                    var seriesName = param.seriesName; //图例名称
                                    var value = param.value; //y轴值
                                    var color = param.color; //图例颜色

                                    htmlStr +=
                                        '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                                        color +
                                        ';"></span>';
                                    htmlStr += `${param.seriesName}: ${value}<br/>`; //2023年

                                    htmlStr += '</div>';
                                }
                            }

                            return htmlStr;
                        } else {
                            return;
                        }
                    },
                    backgroundColor: '#ccc',
                    borderWidth: 1,
                    borderColor: '#ccc',
                    padding: 10,
                    textStyle: {
                        color: '#000',
                        fontSize: 12,
                        align: 'left'
                    }
                },

                title: title,
                legend: {
                    show: true,
                    // left: '0',
                    x: 'center',
                    y: '0',
                    data: legend,
                    textStyle: {
                        fontSize: 12
                    }
                },

                // 将上下两个tootip合成一个
                axisPointer: {
                    link: { xAxisIndex: [1, 2] }
                },
                xAxis: [
                    {
                        gridIndex: 0,
                        type: 'category',
                        scale: true,

                        axisLabel: { interval: 0, show: true, fontSize: 12 },
                        axisTick: {
                            alignWithLabel: true
                        },
                        splitLine: {
                            show: false
                        },
                        data: xcategory //x轴时间的数据
                    },
                    {
                        gridIndex: 1,
                        type: 'category',
                        scale: true,

                        axisLabel: { interval: 0, show: true, fontSize: 12 },
                        axisTick: {
                            alignWithLabel: true
                        },
                        splitLine: {
                            show: false
                        },
                        data: yAxisData //x轴时间的数据
                    },
                    {
                        gridIndex: 2,
                        type: 'category',
                        scale: true,

                        axisLabel: { interval: 0, show: true, fontSize: 12 },
                        axisTick: {
                            alignWithLabel: true
                        },
                        splitLine: {
                            show: false
                        },
                        data: yAxisData //x轴时间的数据
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        nameLocation: 'center',
                        gridIndex: 0,
                        nameGap: 30,
                        nameTextStyle: {
                            fontSize: 12
                        },
                        axisLabel: {
                            fontSize: 12
                        },
                        min: function (value) {
                            return parseInt(value.min);
                        },
                        max: function (value) {
                            return parseInt(value.max * 1.05);
                        },
                        scale: true,
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: false
                        }
                        // splitNumber: 4 //设置坐标轴的分割段数
                    },
                    {
                        type: 'value',
                        name: '',
                        nameLocation: 'center',
                        nameGap: 50,
                        gridIndex: 1,
                        nameTextStyle: {
                            fontSize: 12,
                            fontWeight: '500'
                        },
                        axisLabel: {
                            fontSize: 12
                        },
                        min: function (value) {
                            return parseInt(value.min);
                        },
                        max: function (value) {
                            return parseInt(value.max * 1.05);
                        },
                        scale: false,
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: false
                        }
                        // splitNumber: 4 //设置坐标轴的分割段数
                    },

                    {
                        type: 'value',
                        name: '',
                        nameLocation: 'center',
                        gridIndex: 2,
                        nameGap: 30,
                        nameTextStyle: {
                            fontSize: 12
                        },
                        axisLabel: {
                            fontSize: 12
                        },
                        min: function (value) {
                            return parseInt(value.min);
                        },
                        max: function (value) {
                            return parseInt(value.max * 1.05);
                        },
                        scale: true,
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: false
                        }
                        // splitNumber: 4 //设置坐标轴的分割段数
                    }

                    // {
                    //     type: 'value',
                    //     name: '负荷/百分比',
                    //     nameLocation: 'center',
                    //     gridIndex: 1,
                    //     nameGap: 42,
                    //     nameTextStyle: {
                    //         fontSize: 12
                    //     },
                    //     axisLabel: {
                    //         fontSize: 12
                    //     },
                    //     // min: function (value) {
                    //     //   return parseInt(value.min);
                    //     // },
                    //     // max: function (value) {
                    //     //   return parseInt(value.max * 1.05);
                    //     // },
                    //     scale: true,
                    //     boundaryGap: [0, '100%'],
                    //     splitLine: {
                    //         show: false
                    //     },
                    //     splitNumber: 4 //设置坐标轴的分割段数
                    // }
                ],
                dataZoom: [
                    {
                        type: 'inside',
                        // startValue: this.y1Data.length - 4, // 放置最后4个数组
                        // endValue: this.y1Data.length - 1,
                        xAxisIndex: [0, 1] // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题
                    }
                ],
                series: series
            };

            await this.myChartgjhp.setOption(option);
            // await this.myChartgjh.setOption(this.getgjhData('year', this.name[1].title));
        }
        // async initEchartsgjh() {
        //     this.myChartgjhp = this.$echarts.init(document.getElementById('myChartgjhp'));

        //     var option = { ...this.optiongjh };
        //     var datas = [];
        //     var series = [];
        //     var p_year = [];
        //     var year = [];
        //     var xAxis = [];
        //     for (let i in this.journal_data['p_year'].gjh) {
        //         p_year.push(i);
        //     }
        //     for (let i in this.journal_data['year'].gjh) {
        //         year.push(i);
        //     }
        //     var yAxisData = this.uniqueArr(p_year, year);
        //     this.name.forEach((e, index) => {
        //         xAxis[index] = {
        //             type: 'category',
        //             gridIndex: index,
        //             axisLabel: {
        //                 interval: 0
        //                 // formatter: function (value) {
        //                 //     console.log('value at line 86:', value);
        //                 //     // 格式化标签，例如只显示年月日
        //                 // }
        //             },
        //             data: yAxisData
        //         };
        //         series[index] = {
        //             name: e.title,
        //             type: 'bar',
        //             barWidth: 20,
        //             label: {
        //                 position: 'top',
        //                 show: true
        //             },
        //             data: []
        //         };
        //         var value = [];
        //         yAxisData.forEach((v, i) => {
        //             console.log('v at line 292:', v, i);
        //             value.push(this.journal_data[e.key].gjh[v] ? this.journal_data[e.key].gjh[v] : 0);
        //         });
        //         if (index == 0) {
        //             series[index] = { ...series[index], data: value };
        //         } else {
        //             series[index] = { ...series[index], xAxisIndex: index, yAxisIndex: index, data: value };
        //         }
        //     });

        //     option.xAxis = xAxis;
        //     option.series = series;

        //     await this.myChartgjhp.setOption(option);
        //     // await this.myChartgjh.setOption(this.getgjhData('year', this.name[1].title));
        // }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.table {
    width: 100%;
    font-size: 14px;
    margin-bottom: 30px;
}

.ta_tit {
    text-align: center;
    margin: 50px 0 20px 0;
}

.schart-box {
    width: 100%;
    margin-bottom: 50px;
    /* display: inline-block; */
}

.schart-box .schart {
    width: 100%;
    height: 300px;
}
</style>
