// ==UserScript==
// @name         小米路由器PC端设备实时网速
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  小米路由器PC端后台管理界面设备实时网速
// @author       过去终究是个回忆
// @license      MIT
// @match        http://192.168.31.1/cgi-bin/luci/*/web/home*
// @require      https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/dayjs/1.10.8/dayjs.min.js
// @require      https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js
// @require      https://unpkg.com/ajax-hook@2.1.3/dist/ajaxhook.min.js
// @require      https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @grant        GM_addStyle
// @grant        unsafeWindow
// @resource     element-ui https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css
// @run-at       document-start
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';

    GM_addStyle(GM_getResourceText('element-ui'))
    GM_addStyle(`
        @font-face{font-family:element-icons;src:url(https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/fonts/element-icons.woff) format("woff"),url(https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/fonts/element-icons.ttf) format("truetype");font-weight:400;font-display:"auto";font-style:normal}
        #net-speed {
            float: left;
            margin-top: 40px;
            width: 100%;
            }
            .demo-table-expand {
            font-size: 0;
        }
        .speed-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .speed-line div[role="progressbar"] {
            width: 300px;
        }
    `)

    const maxEachDataStorage = 100
    const updateDevDataEvent = new Event('updateDevData')
    const initData = {
        history: {},
        tableData: []
    }

    window.ah.proxy({
        //请求成功后进入
        onResponse: (response, handler) => {
            if (response.config.url.includes('/api/misystem/status')) {
                const data = JSON.parse(response.response)
                initData.tableData = data.dev
                data.dev.forEach(item => {
                    if (!initData.history[item.mac]) {
                        initData.history[item.mac] = []
                    }
                    const each = {
                        ...item,
                        dateSecond: Date.now(),
                        combinedSpeed: item.upspeed + item.downspeed,
                    }
                    if (initData.history[item.mac].length === maxEachDataStorage) {
                        initData.history[item.mac][maxEachDataStorage] = each
                    } else if (initData.history[item.mac].length < maxEachDataStorage) {
                        initData.history[item.mac].push(each)
                    } else if (initData.history[item.mac].length > maxEachDataStorage) {
                        initData.history[item.mac].splice(maxEachDataStorage - 1, initData.history.length, each)
                    }
                })
                document.dispatchEvent(updateDevDataEvent)
            }
            handler.next(response)
        }
    }, unsafeWindow)

    window.onload = function () {
        const container = document.createElement('div')
        container.id = 'net-speed'
        console.log('net-speed starting...')

        const target = document.querySelector('#bd>.mod-routerstatus.nav-tab-content')
        target.appendChild(container)

        new Vue({
            el: container,
            data() {
                return {
                    dialogTableTitle: 'dialogTableTitle',
                    dialogTableVisible: false,
                    currentRow: {},
                    history: {},
                    tableData: [],
                }
            },
            created() {
                this.history = initData.history
                this.tableData = initData.tableData
                document.addEventListener("updateDevData", () => {
                    this.history = initData.history
                    this.tableData = initData.tableData
                })
            },
            methods: {
                byteFormat: byteFormat,
                secondToDate: secondToDate,
                speedFormat(number, precision, isarray) {
                    return this.byteFormat(number, precision, isarray) + '/S'
                },
                speedFormatter(row, column, cellValue) {
                    return this.speedFormat(cellValue, 100)
                },
                dataFormatter(row, column, cellValue) {
                    return this.byteFormat(cellValue, 100)
                },
                secondFormatter(row, column, cellValue) {
                    return this.secondToDate(cellValue)
                },
                dateTimeFormatter(row, column, cellValue) {
                    return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
                },
                showHistoryData(row) {
                    this.dialogTableVisible = true
                    this.dialogTableTitle = `${row.devname}(${row.mac}) 历史数据`
                    this.currentRow = row
                    console.log(this.history)
                }
            },
            template: `
            <div id="net-speed">
                <el-table
                    v-loading="!tableData.length"
                    :data="tableData"
                    :default-sort="{prop: 'combinedSpeed', order: 'ascending'}"
                    border
                    fit
                    max-height="500px"
                    style="width: 100%;"
                >
                    <el-table-column
                        prop="devname"
                        label="设备"
                        sortable
                        width="200"
                    />
                    <el-table-column
                        prop="mac"
                        label="MAC"
                        sortable
                        width="148"
                    />
                    <el-table-column
                        prop="combinedSpeed"
                        label="网速"
                        width="540"
                        sortable
                        sort-by="combinedSpeed"
                    >
                        <template slot-scope="scope">
                            <p class="speed-line">上传速度: <el-progress :percentage="scope.row.upspeed / scope.row.maxuploadspeed * 100" :show-text="false" color="#2673bf"></el-progress>{{speedFormat(scope.row.upspeed, 100)}}</p>
                            <p class="speed-line">下载速度: <el-progress :percentage="scope.row.downspeed / scope.row.maxdownloadspeed * 100" :show-text="false" color="#33cc33"></el-progress>{{speedFormat(scope.row.downspeed, 100)}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="maxuploadspeed"
                        label="历史最大上传速度"
                        width="158"
                        sortable
                        :formatter="speedFormatter"
                    />
                    <el-table-column
                        prop="maxdownloadspeed"
                        label="历史最大下载速度"
                        width="158"
                        sortable
                        :formatter="speedFormatter"
                    />
                    <el-table-column
                        prop="upload"
                        label="上传流量"
                        width="102"
                        sortable
                        :formatter="dataFormatter"
                    />
                    <el-table-column
                        prop="download"
                        label="下载流量"
                        width="102"
                        sortable
                        :formatter="dataFormatter"
                    />
                    <el-table-column
                        prop="online"
                        label="在线时间"
                        width="140"
                        sortable
                        :formatter="secondFormatter"
                    />
                    <el-table-column
                        prop="devname"
                        label="操作"
                        fixed="right"
                    >
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="showHistoryData(scope.row)">历史数据</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog :title="dialogTableTitle" :visible.sync="dialogTableVisible">
                    <el-table
                        :data="this.history[this.currentRow.mac]"
                        :default-sort="{prop: 'dateSecond', order: 'descending'}"
                        border
                        fit
                        max-height="500px"
                        style="width: 100%;"
                    >
                        <el-table-column
                            property="dateSecond"
                            sortable
                            label="时间"
                            width="164"
                            :formatter="dateTimeFormatter"
                        />
                        <el-table-column
                            label="网速"
                            sortable
                            min-width="540"
                            sort-by="combinedSpeed"
                        >
                            <template slot-scope="scope">
                                <p class="speed-line">上传速度: <el-progress :percentage="scope.row.upspeed / scope.row.maxuploadspeed * 100" :show-text="false" color="#2673bf"></el-progress>{{speedFormat(scope.row.upspeed, 100)}}</p>
                                <p class="speed-line">下载速度: <el-progress :percentage="scope.row.downspeed / scope.row.maxdownloadspeed * 100" :show-text="false" color="#33cc33"></el-progress>{{speedFormat(scope.row.downspeed, 100)}}</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-dialog>
            </div>
        `
        })
    }
})();