<template>
    <div class="container" style="padding-bottom: 50px; width: 100%; height: auto">
        <div style="width: 100%; height: 38vh; margin-bottom: 2vh; position: relative">
            <i class="el-icon-refresh refresh" @click="getCharts('year')"></i>
            <div id="yearchart" style="width: 100%; height: 100%"></div>
        </div>
        <div style="width: 100%; height: 44vh; position: relative; margin-bottom: 80px">
            <i class="el-icon-refresh refresh" @click="getCharts('month')"></i>
            <div id="monthchart" style="width: 100%; height: 100%"></div>
        </div>
        <div style="width: 100%; height: auto; margin-bottom: 50px">
            <jAtableY type="year" ref="yearTableData"></jAtableY>
        </div>
        <div style="width: 100%; height: auto; margin-bottom: 50px !important">
            <jAtableM type="month" ref="monthTableData"></jAtableM>
        </div>
    </div>
</template>

<script>
const jAtableY = () => import('@/components/common/journalArticleTable');
const jAtableM = () => import('@/components/common/journalArticleTable');

export default {
    data() {
        return {
            loading: null
        };
    },
    components: {
        jAtableY,
        jAtableM
    },
    async created() {
        this.loading = this.$loading({
            lock: true,
            text: 'Loading...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        await this.getCharts('year');
        await this.getCharts('month');
        await this.getTableData();

        this.$forceUpdate();
    },
    methods: {
        handleRefresh() {},
        async getEchartsData() {
            await this.getCharts('year');
            await this.getCharts('month');
            this.$forceUpdate();
        },
        async getCharts(type) {
            var optionsData = await this.getdata(type);
            console.log('🚀 ~ getCharts ~ optionsData:', optionsData);

            const chartBox = await this.$echarts.init(document.getElementById(`${type}chart`));
            var option = {};
            option = {
                title: {
                    text: this.$t(`journalArticleCount.${type}Title`)
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                //   legend: {
                //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                //   },
                toolbox: {
                    // feature: {
                    // //   dataZoom: {
                    // //     yAxisIndex: 'none'
                    // //   },
                    //   restore: {},
                    // }
                },
                dataZoom:
                    type == 'month'
                        ? [
                              {
                                  show: true,
                                  realtime: true,
                                  start: 1,
                                  end: 100,
                                  xAxisIndex: [0, 1]
                              },
                              {
                                  type: 'inside',
                                  realtime: true,
                                  start: 1,
                                  end: 100,
                                  xAxisIndex: [0, 1]
                              }
                          ]
                        : [],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: type == 'month' ? '20%' : '4%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLabel: {},
                        // axisLabel:
                        //     type == 'year'
                        //         ? {}
                        //         : {
                        //               interval: 0,
                        //               rotate: 30
                        //           },
                        boundaryGap: false,
                        data: optionsData.xAxisData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: this.$t(`journalArticleCount.dataTitle`),
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            opacity: 0.8,
                            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: type == 'year' ? 'rgb(0, 221, 255)' : 'rgb(0, 102, 153)'
                                },
                                {
                                    offset: 1,
                                    color: type == 'month' ? 'rgb(77, 119, 255)' : 'rgb(1, 191, 236)'
                                }
                            ])
                        },
                        smooth: true,
                        emphasis: {
                            focus: 'series'
                        },
                        data: optionsData.seriesData
                    }
                ]
            };
            chartBox.clear();
            chartBox.setOption(option, true);
            // 根据页面大小自动响应图表大小
            window.addEventListener('resize', function () {
                chartBox.resize();
            });
            this.$forceUpdate();
        },

        // 获取文章列表数据
        async getdata(type) {
            var data = {};
            var url = '';
            if (type == 'month') {
                url = '/api/Monitor/getArticleNumByMonth';
            } else if (type == 'year') {
                url = '/api/Monitor/getArticleNumByYear';
            }
            await this.$api
                .post(url)
                .then((res) => {
                    var that = this;
                    if (res.code == 0) {
                        console.log('🚀 ~ .then ~ res1998:' + type, res.data.articles);
                        var xAxisData = [];
                        var seriesData = [];
                        Object.entries(res.data.articles).forEach(([key, value]) => {
                            xAxisData.push(key);
                            seriesData.push(value);

                            data = { type: type, xAxisData: xAxisData, seriesData: seriesData };
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            return data;
        },
        // 获取文章列表数据
        async getTableData() {
            this.$nextTick(async () => {
                await this.getTableDataInfo('year');
                await this.getTableDataInfo('month');
            });
        },
        async getTableDataInfo(type) {
            var that = this;
            var data = {};
            var timeData = [];
            var tableData = [];
            var url = '';
            if (type == 'month') {
                url = '/api/Monitor/getArticleNumByMonthForJournal';
            } else if (type == 'year') {
                url = '/api/Monitor/getArticleNumByYearForJournal';
            }
            await this.$api
                .post(url)
                .then(async (res) => {
                    var that = this;
                    if (res.code == 0) {
                        for (let i in res.data.data) {
                            tableData.push({ ...res.data.data[i].journal, ...res.data.data[i].articles });
                        }

                        for (let i in res.data.data[0].articles) {
                            timeData.push(i);
                        }

                        data = { tableData: tableData, timeData: timeData };
                    }
                })
                .catch((err) => {
                    console.log(err);
                    this.loading = false;
                });
            console.log(data, type, '98999');
            if (type == 'year') {
                this.$refs.yearTableData.getTableInfo(type, data);
            } else if (type == 'month') {
                this.$refs.monthTableData.getTableInfo(type, data);
                setTimeout(() => {
                    that.loading.close();
                }, 100);
            }

            return data;
        }
    }
};
</script>

<style scoped>
.container {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
}
.refresh {
    position: absolute;
    top: 20px;
    right: 0px;
    z-index: 10;
}
</style>