{% load static %}

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    {% include 'admin/includes/css-part.html' %}
    <style>
        body {
            background-color: #2f4155;
        }

        .box-card {
            background-color: #130f2c;
            color: #ffefef;
        }

        .chart-button {
            float: right;
            margin-right: 5px;
        }
    </style>
</head>
<body>
<div id="status">
    <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
            <span>数据总量</span>
            <span>

                <el-button type="warning" size="mini" class="chart-button"
                           @click="setTree">矩形树图</el-button>
                <el-button type="success" size="mini" class="chart-button"
                           @click="setBar">柱状图</el-button>
                <el-button type="primary" size="mini" class="chart-button"
                           @click="setPie">饼图</el-button>
                <el-switch
                        class="chart-button"
                        v-model="begInvite"
                        active-color="#13ce66"
                        inactive-text="求药模式"
                        inactive-color="#ff4949">
                </el-switch>
            </span>
        </div>
        <div class="body">
            <charts ref="charts" style="height: 700px;" :option="option"></charts>
        </div>
    </el-card>
</div>

{% include 'admin/includes/js-part.html' %}
<script src="{% static 'admin/simpleui-x/js/axios.min.js' %}"></script>
<script src="{% static 'js/echarts.min.js' %}"></script>
<script src="{% static 'js/echarts-component.js' %}"></script>
<script>
    function renderSize(value) {
        if (null == value || value == '') {
            return 0;
        }
        var unitArr = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
        var index = 0;
        var srcsize = parseFloat(value);
        index = Math.floor(Math.log(srcsize) / Math.log(1024));
        var size = srcsize / Math.pow(1024,
            index);
        size = size.toFixed(2);//保留的小数位数
        return size + ' ' + unitArr[index];
    }

    const vm = new Vue({
        el: '#status',
        data() {
            return {
                chart: {},
                ptData: {},
                option: {},
                begInvite: false,
                showLogo: false,
            }
        },
        beforeMount() {

        },
        mounted() {
            this.chart = this.$refs.charts.chart
            this.getData()
        },
        watch: {
            obj: {
                option(newValue, oldValue) {
                    // option发生变化时自动重新渲染
                    this.chart.setOption(newValue)
                },
                // immediate: true,
                deep: true,
            }
        },
        methods: {
            setChartOption(option){
                this.option = option
                this.$refs.charts.chart.clear()
                this.$refs.charts.chart.setOption(this.option)
                window.addEventListener("resize", () => {
                    if (this.$refs.charts.chart) {
                        this.$refs.charts.chart.resize()
                    }
                })
            },
            setPie() {
                let uploadedList = []
                let siteList = []
                let ptData = this.ptData
                let begInvite = !this.begInvite
                ptData.status_list.forEach((site, index) => {
                    uploadedList.push({
                        'value': site.uploaded,
                        'path': 'uploaded/' + site.name,
                        'name': site.name
                    })
                    //downloadedList.push({
                    //    'value': site.downloaded,
                    //    'path': 'downloaded/' + site.name,
                    //    'name': site.name
                    //})
                    siteList.push({
                        name: site.name,
                        icon: begInvite ? `image://${site.icon}` : 'roundRect'
                    })
                })
                let option = {
                    title: {
                        text: 'PT站点数据',
                        subtext: `上传量：${renderSize(ptData.total_data.uploaded)}\n做种量：${renderSize(ptData.total_data.seeding_size)}\n下载量：${renderSize(ptData.total_data.downloaded)}\n分享率：${ptData.total_data.ratio}`,
                        subtextStyle: {
                            color: '#969696',
                            fontWeight: 'bold',
                            fontFamily: '黑体',
                            fontSize: '16',
                            lineHeight: 32,
                        },
                        left: '5%',
                        top: '10%',
                    },
                    tooltip: {
                        show: true,
                        //formatter: function (params) {
                        //    return params.name + '\t' + renderSize(params.data.value)
                        //}
                        valueFormatter: function (value) {
                            return renderSize(value)
                        }
                    },
                    color: [
                        '#f66c73',
                        '#f68645',
                        '#7af6ad',
                        '#f4d55f',
                        '#488ff6',
                        '#0fba8d',
                        '#8a47dc',
                        '#d677f6',
                    ],
                    legend: {
                        {#show: false,#}
                        {#type: 'scroll',#}
                        {#top: 'bottom',#}
                        right: '2%',
                        orient: 'vertical',
                        data: [],
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            {#dataView: {show: true, readOnly: false},#}
                            {#restore: {show: true},#}
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: 'PT数据展示',
                            type: 'pie',
                            bottom: '7%',
                            radius: '55%',
                            {#visualDimension: 1,#}
                            center: ['45%', '50%'],
                            roseType: '',
                            label: {
                                show: true,
                                formatter: function (params) {
                                    {#return params.name + ' \t ' + renderSize(params.data.value)#}
                                    return `${begInvite ? params.name : ''} \t ${renderSize(params.data.value)}`
                                },
                                itemHeight: 12,
                                itemWidth: 20
                            },
                            itemStyle: {
                                borderRadius: 7
                            },
                            data: [
                                {value: 40, name: 'rose 1'},
                                {value: 38, name: 'rose 2'},
                                {value: 32, name: 'rose 3'},
                                {value: 30, name: 'rose 4'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
                option.series[0].data = uploadedList
                option.legend.data = siteList
                this.setChartOption(option)
            },
            setTree() {
                let ptData = this.ptData
                let begInvite = !this.begInvite
                let uploadedList = []
                let downloadedList = []
                ptData.status_list.forEach((site, index) => {
                    uploadedList.push({
                        'value': site.uploaded,
                        'path': 'uploaded/' + site.name,
                        'name': `${site.name}\t${renderSize(site.uploaded)}`
                    })
                    downloadedList.push({
                        'value': site.downloaded,
                        'path': 'downloaded/' + site.name,
                        'name': `${site.name}\t${renderSize(site.downloaded)}`
                    })
                })
                let option = {
                    backgroundColor: '#130f2c',
                    title: {
                        text: 'PT站点数据',
                        subtext: `上传量：${renderSize(ptData.total_data.uploaded)}\t做种量：${renderSize(ptData.total_data.seeding_size)}\t下载量：${renderSize(ptData.total_data.downloaded)}\t分享率：${ptData.total_data.ratio}`,
                        subtextStyle: {
                            color: '#969696',
                            fontWeight: 'bold',
                            fontFamily: '黑体',
                            fontSize: '16',
                            lineHeight: 32,
                        },
                        left: '10%',
                    },
                    tooltip: {
                        show: true,
                        //formatter: function (params) {
                        //    return params.name + '\t' + renderSize(params.data.value)
                        //}
                        valueFormatter: function (value) {
                            return renderSize(value)
                        }
                    },
                    color: [
                        '#f66c73',
                        '#f68645',
                        '#7af6ad',
                        '#f4d55f',
                        '#488ff6',
                        '#0fba8d',
                        '#8a47dc',
                        '#d677f6',
                        '#130f2c',
                        '#2f4155',
                    ],
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            type: 'treemap',
                            name: '数据汇总',
                            colorMappingBy: 'index',
                            {#colorSaturation: [0.9, 0.9],#}
                            label: {
                                show: true,
                                formatter: function (params) {
                                    {#return params.name + '\t' + renderSize(params.data.value)#}
                                    return `${begInvite ? params.name : ''} \t ${renderSize(params.data.value)}`
                                }
                            },
                            data: [
                                {
                                    name: '上传',
                                    value: 0,
                                }
                            ]
                        }
                    ]
                }
                /**
                 console.log(this.treeOption.series[0].data)
                 this.treeOption.series[0].data.push({
                            name: '总下载',
                            value: ptData.total_data.downloaded,
                        })
                 let treeData = this.treeOption.series[0].data[0]
                 treeData.value = ptData.total_data.uploaded
                 treeData.children = dataList
                 **/
                option.series[0].data.push({
                    name: `总上传\t${renderSize(ptData.total_data.uploaded)}`,
                    value: ptData.total_data.uploaded,
                    path: "uploaded",
                    children: uploadedList
                }, {
                    name: `总下载\t${renderSize(ptData.total_data.downloaded)}`,
                    value: ptData.total_data.downloaded,
                    path: "downloaded",
                    children: downloadedList
                })
                {#this.treeOption.series[0].data.push()#}
                {#this.$refs.charts.chart.setOption(treeOption)#}
                this.setChartOption(option)
            },
            setBar() {
                let option = {
                    title: {
                        text: 'PT数据聚合图'
                    },
                    color: [
                        'skyblue',
                        'orange'
                    ],
                    tooltip: {
                        trigger: 'axis',
                        show: true,
                        axisPointer: {
                            type: 'shadow'
                        },
                        valueFormatter: function (value) {
                            return renderSize(value)
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: function (value, index) {
                                return renderSize(value);
                            }
                        },
                        label: {
                            formatter: function (value, index) {
                                return renderSize(value);
                            }
                        },
                        boundaryGap: [0, 0.01]
                    },
                    series: []
                };
                let ptData = this.ptData
                let uploadedList = []
                let downloadedList = []
                let siteList = []
                {#uploadedList.push(ptData.total_data.uploaded)#}
                {#downloadedList.push(ptData.total_data.downloaded)#}
                {#siteList.push('总量')#}
                ptData.status_list.forEach((site, index) => {
                    downloadedList.push(site.downloaded)
                    uploadedList.push(site.uploaded)
                    siteList.push(site.name)
                })
                let uploaded = {
                    name: '上传量',
                    type: 'bar',
                    stack: 'Ad',
                    data: uploadedList
                }
                let downloaded = {
                    name: '下载量',
                    type: 'bar',
                    stack: 'Ad',
                    data: downloadedList
                }
                option.series.push(downloaded, uploaded)
                option.xAxis.data = siteList
                this.setChartOption(option)
            },
            getData() {
                axios.get(
                    "{% url "site_status_api" %}"
                ).then(res => {
                    console.log('获取数据列表成功', res.data)
                    if (res.data.code === 0) {
                        console.log(res.data.data)
                        {#this.ptData = res.data.data#}
                        this.ptData = res.data.data
                        this.setPie()
                    } else {
                        this.loading = false
                        this.$message({
                            type: 'warning',
                            message: '获取数据列表失败！'
                        });
                    }
                }).catch(res => {
                    console.log('获取数据列表失败', res)
                    this.$message({
                        type: 'warning',
                        message: '获取数据列表失败！' + res
                    });
                })
            }
        }
    });
</script>
</body>
</html>