import $ from 'jquery';

import echarts from 'echarts/lib/echarts';
import dataZoom from 'echarts/lib/component/dataZoom';
import bar from 'echarts/lib/chart/bar';
import line from 'echarts/lib/chart/line';

import Page from './page';

import srvData from '../data/srv';
import mcData from '../data/mc';
import cpData from '../data/cp';

import topSelectHbs from '../hbs/top-select.hbs';
import rosTbody from '../hbs/ros-tbody.hbs';
import tcTBodyHbs from '../hbs/tc-tbody.hbs';
import tmTbodyHbs from '../hbs/tm-tbody.hbs';

class RedisLive extends Page {
    constructor() {
        super();

        /* 图表实例 */
        this.srv;
        this.cp; // 命令总数
        this.mc; // 全集群读写并发
        this.tc; // Top CMD
        this.tm; // Top Key
     

        /* 数据存储 */
        this.cloud; // 云
        this.redisCluster; // 从服务器

        this.selector = {
            srv: $('#srv')[0],
            mc: $('#mc')[0],
            cp: $('#cp')[0],
            tc: $('#tc')[0],
            tm: $('#tm')[0],
            cloudSelect: $('#cloudSelect'),
            clusterSelect: $('#clusterSelect'),
            cpSelect: $('#cpSelect'),
            mcSelect: $('#mcSelect'),
            tcSelect: $('#tcSelect'),
            tmSelect: $('#tmSelect'),
            rosSelect: $('#rosSelect'),
            rosTbody: $('#rosTbody')
        };

        this.cpLastTime;
        this.mcLastTime;
        this.tcLastTime = 5;
        this.tmLastTime = 5;
        this.rosSelectVal = 5;

        this.selector.cloudSelect.on('change', this.cloudSelectChange.bind(this));
        this.selector.clusterSelect.on('change', this.clusterSelectChange.bind(this));
        this.selector.cpSelect.on('change', this.cpRender.bind(this, true));
        this.selector.mcSelect.on('change', this.mcRender.bind(this, true));
        this.selector.tcSelect.on('change', this.tcRender.bind(this, true));
        this.selector.tmSelect.on('change', this.tmRender.bind(this, true));
        this.selector.rosSelect.on('change', this.rosRender.bind(this, true));

        this.init();
        setInterval(() => {
            this.refreshGraph();
        }, 1000 * 20);
    }

    async init() {
        await this.navRender();

        this.srvRender();
        this.cpRender();
        this.mcRender();
        this.rosRender();
    }

    async navRender() {
        let influxCloudsData = await this.getInfluxClouds();
        this.cloud = influxCloudsData[0];
        $('#cloudSelect').html(topSelectHbs(influxCloudsData));

        let redisClusterData = await this.getRedisCluster();
        this.redisCluster = redisClusterData[0];
        $('#clusterSelect').html(topSelectHbs(redisClusterData));
    }

    async srvRender() {
        this.srv = echarts.init(this.selector.srv);

        let resData = await this.getLastedHealthy();

        this.srv.setOption(srvData);
    }

    /**
     * 命令总数
     */
    async cpRender(refresh) {
        let option = {};

        this.cp = echarts.init(this.selector.cp);
        this.cpLastTime = this.selector.cpSelect.val();

        let resData = await this.getCommandProcessed();

        if (refresh) {
            option = {
                xAxis: {
                    data: resData.x
                },
                series: [{
                    data: resData.y
                }]
            };
        } else {
            option = cpData(resData);
        }

        this.cp.setOption(option);
    }

    /**
     * 全集群读写并发
     */
    async mcRender(refresh) {
        let option = {};

        this.mc = echarts.init(this.selector.mc);
        this.mcLastTime = this.selector.mcSelect.val();

        let resData = await this.getWriteReadProcessed();

        if (refresh) {
            option = {
                xAxis: {
                    data: resData.x
                },
                series: [
                    {
                        data: resData.yr
                    },
                    {
                        data: resData.yw
                    }
                ]
            };
        } else {
            option = mcData(resData);
        }

        this.mc.setOption(option);
    }

    /**
     * Top CMD
     */
    async tcRender(refresh) {
        if (refresh) {
            this.tcLastTime = this.selector.tcSelect.val();
        }

        let resData = await this.getTopCommandTotal();
        let tcTbody = tcTBodyHbs();

        this.selector.tcTbody.html(tcTbody);
    }

    /**
     * Top 命中率低
     */
    async tmRender(refresh) {
        if (refresh) {
            this.tmLastTime = this.selector.tmSelect.val();
        }

        let resData = await this.getTopMissRate();
        let tmTbody = tmTbodyHbs();

        this.selector.tmTbody.html(tmTbody);
    }

    async rosRender(refresh) {
        if (refresh) {
            this.rosSelectVal = this.selector.rosSelect.val();
        }

        let resData = await this.getRedisOpsStatistics();
        let tbody = rosTbody(resData.list);

        this.selector.rosTbody.html(tbody);
    }

    /**
     * 选择云
     */
    async cloudSelectChange() {
        this.cloud = this.selector.cloudSelect.val();

        let redisClusterData = await this.getRedisCluster();

        this.redisCluster = redisClusterData[0];
        $('#clusterSelect').html(topSelectHbs(redisClusterData));

        if (redisClusterData.length) {
            this.refreshGraph();
        }
    }

    /**
     * 选择从服务器
     */
    clusterSelectChange() {
        this.redisCluster = this.selector.clusterSelect.val();
        this.refreshGraph();
    }

    /**
     * 获取云
     */
    getInfluxClouds() {
        return this.ajax({
            url: '/redismonitor/getInfluxClouds'
        });
    }

    /**
     * 获取从
     */
    getRedisCluster() {
        return this.ajax({
            url: '/redismonitor/getRedisCluster',
            data: {
                cloud: this.cloud
            }
        });
    }

    getLastedHealthy() {
        return this.ajax({
            url: '/redismonitor/getLastedHealthy',
            data: {
                cloud: this.cloud,
                redisCluster: 'redis-no-sync-1.yohoops.org' || this.redisCluster
            }
        });
    }

    getMetric() {
        return this.ajax({
            url: '/redismonitor/getMetric',
            data: {
                cloud: this.cloud,
                redisCluster: this.redisCluster
            }
        });
    }

    getMetricProcessed() {
        return this.ajax({
            url: '/redismonitor/getMetricProcessed',
            data: {
                ip: this.mpIp,
                port: this.this.mpPort,
                metric: this.mpMetric
            }
        });
    }

    /**
     * 获取命令总数
     */
    getCommandProcessed() {
        return this.ajax({
            url: '/redismonitor/getCommandProcessed',
            data: {
                cloud: this.cloud,
                redisCluster: this.redisCluster,
                lastTime: this.cpLastTime
            }
        });
    }

    /**
     * 获取全集群读写并发
     */
    getWriteReadProcessed() {
        return this.ajax({
            url: '/redismonitor/getWriteReadProcessed',
            data: {
                cloud: this.cloud,
                redisCluster: this.redisCluster,
                lastTime: this.mcLastTime
            }
        });
    }

    /**
     * 获取 Top CMD
     */
    getTopCommandTotal() {
        return this.ajax({
            url: '/redismonitor/getTopCommandTotal',
            data: {
                cloud: this.cloud,
                redisCluster: this.redisCluster,
                lastTime: this.tcLastTime
            }
        });  
    }

    /**
     * 获取 Top 命中率低
     */
    getTopMissRate() {
        return this.ajax({
            url: '/redismonitor/getTopMissRate',
            data: {
                cloud: this.cloud,
                redisCluster: this.redisCluster,
                lastTime: this.tmLastTime
            }
        });         
    }

    getRedisOpsStatistics() {
        return this.ajax({
            url: '/redismonitor/getRedisOpsStatistics',
            data: {
                page: 1,
                cloud: this.cloud,
                redisCluster: this.redisCluster,
                lastTime: this.rosSelectVal
            }
        });      
    }

    /**
     * 刷新数据
     */
    refreshGraph() {
        this.mcRender(true);
        this.cpRender(true);
        this.tcRender(true);
        this.tmRender(true);
        this.rosRender(true);
    }
}

export default new RedisLive();