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 './common/page';

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

import topSelectHbs from 'redis/top-select.hbs';
import topSrvHbs from 'redis/top-srv.hbs';
import srvGraphSelectHbs from 'redis/srv-graph-select.hbs';
import rosTbody from 'redis/ros-tbody.hbs';
import tcTBodyHbs from 'redis/tc-tbody.hbs';
import tmTbodyHbs from 'redis/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 = {
            srvList: $('#srvList'),
            srv: $('#srv')[0],
            mc: $('#mc')[0],
            cp: $('#cp')[0],
            tc: $('#tc')[0],
            tm: $('#tm')[0],
            cloudSelect: $('#cloudSelect'),
            clusterSelect: $('#clusterSelect'),
            srvGraphSelect: $('#srvGraphSelect'),
            srvTimeSelect: $('#srvTimeSelect'),
            cpSelect: $('#cpSelect'),
            mcSelect: $('#mcSelect'),
            tcSelect: $('#tcSelect'),
            tmSelect: $('#tmSelect'),
            rosSelect: $('#rosSelect'),
            rosFilterBtn: $('#rosFilterBtn'),
            keyTemplateInput: $('#keyTemplateInput'),
            contextInput: $('#contextInput'),
            tcTbody: $('#tcTbody'),
            tmTbody: $('#tmTbody'),
            rosTbody: $('#rosTbody'),
            pageSlipt: $('#pageSlipt'),
            totalPage: $('#totalPage')
        };

        this.hasRedisCluster = false;
        this.srvLastTime = 5;
        this.cpLastTime;
        this.mcLastTime;
        this.tcLastTime = 5;
        this.tmLastTime = 5;
        this.rosSelectVal = 5;
        this.showWhichSrvGraph = {};
        this.mpMetric;
        this.srvGraphSelectVal;
        this.rosFilters = {};
        this.rosPage = {
            first: 1,
            current: 1,
            prev: 0,
            next: 2,
            last: null
        }

        this.selector.cloudSelect.on('change', this.cloudSelectChange.bind(this));
        this.selector.clusterSelect.on('change', this.clusterSelectChange.bind(this));
        this.selector.srvGraphSelect.on('change', this.srvSelectChange.bind(this));
        this.selector.srvTimeSelect.on('change', this.srvSelectChange.bind(this));
        this.selector.cpSelect.on('change', this.cpRender.bind(this));
        this.selector.mcSelect.on('change', this.mcRender.bind(this));
        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.selector.rosFilterBtn.on('click', this.rosFilter.bind(this));
        this.selector.pageSlipt.find('button').on('click', this.rosPageChange.bind(this));

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

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

        this.srv = echarts.init(this.selector.srv);
        this.srv.setOption(srvData());
        this.cp = echarts.init(this.selector.cp);
        this.cp.setOption(cpData());
        this.mc = echarts.init(this.selector.mc);
        this.mc.setOption(mcData());

        if (this.hasRedisCluster) {
            this.srvListRender();
            this.cpRender();
            this.mcRender();
            this.tcRender();
            this.tmRender();
            this.rosRender();
        }
    }

    /**
     * 服务器列表筛选
     */
    rosFilter() {
        let keyTemplate = this.selector.keyTemplateInput.val();
        let context = this.selector.contextInput.val();

        if (keyTemplate) {
            this.rosFilters.keyTemplate = keyTemplate;
        } else {
            delete this.rosFilters.keyTemplate;
        }

        if (context) {
            this.rosFilters.context = context;
        } else {
            delete this.rosFilters.context;
        }
        
        if (!$.isEmptyObject(this.rosFilters)) {
            this.rosRender(true);
        }
    }

    /**
     * 服务器单个指标改变
     */
    async srvSelectChange() {
        this.srvGraphSelectVal = this.selector.srvGraphSelect.val();
        this.srvLastTime = this.selector.srvTimeSelect.val();

        let mpResData =  await this.getMetricProcessed();

        this.srv.setOption({
            xAxis: {
                    data: mpResData.x
                },
            series: [
                {
                    data: mpResData.y
                }
            ]
        });
    }

    /**
     * 翻页
     */
    async rosPageChange(event) {
        let $elem = $(event.currentTarget);

        if ($elem.hasClass('pure-button-disabled')) {
            return false;
        }
       
        if ($elem.hasClass('first')) {
            this.rosPage.current = 1;
        } else if ($elem.hasClass('prev')) {
            this.rosPage.current--;
        } else if ($elem.hasClass('next')) {
            this.rosPage.current++;
        } else if ($elem.hasClass('last')) {
            this.rosPage.current = this.rosPage.last;
        }

        this.rosPage.prev = Math.max(this.rosPage.current - 1, 1);
        this.rosPage.next = Math.min(this.rosPage.current + 1, this.rosPage.last);

        if (this.rosPage.current === 1) {
            this.selector.pageSlipt.find('.prev').addClass('pure-button-disabled');
        } else {
            this.selector.pageSlipt.find('.prev').removeClass('pure-button-disabled');
        }

        if (this.rosPage.current === this.rosPage.last) {
            this.selector.pageSlipt.find('.next').addClass('pure-button-disabled');
        } else {
            this.selector.pageSlipt.find('.next').removeClass('pure-button-disabled');
        }

        this.rosRender(true);
    }

    /**
     * 导航筛选渲染
     */
    async navRender() {
        let influxCloudsData = await this.getInfluxClouds();

        if (influxCloudsData && influxCloudsData.length > 0) {
            this.cloud = influxCloudsData[0];
            $('#cloudSelect').html(topSelectHbs(influxCloudsData));

            let redisClusterData = await this.getRedisCluster();

            if (redisClusterData && redisClusterData.length > 0) {
                this.hasRedisCluster = true;
                this.redisCluster = redisClusterData[0];
                $('#clusterSelect').html(topSelectHbs(redisClusterData));
            } else {
                this.hasRedisCluster = false;
            }
        }
    }

    /**
     * 服务器列表渲染
     */
    async srvListRender() {
        let resData = await this.getLastedHealthy();

        if (!resData || resData.length < 1 || resData.code) {
            resData = [];
        }

        this.showWhichSrvGraph = resData[0] || {};

        let topSrvTables = $(topSrvHbs(resData));

        this.selector.srvList.html(topSrvTables);
        this.selector.srvc = $('.srvc');
        this.selector.srvc.on('click', (event) => {
            let $elem = $(event.currentTarget);

            this.showWhichSrvGraph = resData[$elem.data('index')] || {};
            this.srvGraphRender(true);
        });
    }

    /**
     * 服务器单个指标状态曲线图渲染
     */
    async srvGraphRender() {
        let resData = await this.getMetric();

        this.mpMetric = resData;
        
        let srvGraphSelect = srvGraphSelectHbs(resData);
        this.selector.srvGraphSelect.html(srvGraphSelect);

        if (this.srvGraphSelectVal) {
            this.selector.srvGraphSelect.val(this.srvGraphSelectVal);
        } else {
            this.srvGraphSelectVal = this.selector.srvGraphSelect.val();
        }
       
        let mpResData =  (await this.getMetricProcessed()) || {};

        this.srv.setOption({
            xAxis: {
                data: mpResData.x
            },
            series: [
                {
                    data: mpResData.y
                }
            ]
        });
    }

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

        this.cpLastTime = this.selector.cpSelect.val();

        let resData = (await this.getCommandProcessed()) || {};

        this.cp.setOption({
            xAxis: {
                data: resData.x
            },
            series: [{
                data: resData.y
            }]
        });
    }

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

        this.mcLastTime = this.selector.mcSelect.val();

        let resData = (await this.getWriteReadProcessed()) || {};

        this.mc.setOption({
            xAxis: {
                data: resData.x
            },
            series: [
                {
                    data: resData.yr
                },
                {
                    data: resData.yw
                }
            ]
        });
    }

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

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

        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(resData);

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

    /**
     * 服务器数据表渲染
     */
    async rosRender(refresh) {
        if (refresh) {
            this.rosSelectVal = this.selector.rosSelect.val();
        }

        let resData = await this.getRedisOpsStatistics();

        this.rosPage.last = (resData && resData.pageSize) || 1;

        if (this.rosPage.last === 1 || this.rosPage.last === resData.currPage) {
            this.selector.pageSlipt.find('.next').addClass('pure-button-disabled');
            this.selector.pageSlipt.find('.last').addClass('pure-button-disabled');
        } else {
            this.selector.pageSlipt.find('.next').removeClass('pure-button-disabled');
            this.selector.pageSlipt.find('.last').removeClass('pure-button-disabled');
        }

        let tbody = rosTbody(resData.list);

        this.selector.totalPage.text((resData && resData.pageSize) || 0);
        this.selector.rosTbody.html(tbody);
    }

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

        let redisClusterData = await this.getRedisCluster();

        if (redisClusterData && redisClusterData.length > 0) {
            this.hasRedisCluster = true;
        } else {
            this.hasRedisCluster = false;
        }

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

        this.refreshGraph();
    }

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

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

    /**
     * 获取从
     */
    getRedisCluster() {
        let resResut = Promise.resolve({});

        if (this.cloud) {
            resResut = this.ajax({
                url: '/redismonitor/getRedisCluster',
                data: {
                    cloud: this.cloud
                }
            });
        }

        return resResut;
    }

    /**
     * 获取服务器列表
     */
    getLastedHealthy() {
        let resResut = Promise.resolve({});

        if (this.cloud && this.redisCluster) {
            resResut =  this.ajax({
                url: '/redismonitor/getLastedHealthy',
                data: {
                    cloud: this.cloud,
                    redisCluster: this.redisCluster && this.redisCluster.split(':')[0] || ''
                }
            });
        }

        return resResut;
    }

    /**
     * 获取服务器指标筛选项
     */
    getMetric() {
        let resResut = Promise.resolve({});

        if (this.cloud && this.redisCluster) {
            resResut =  this.ajax({
                url: '/redismonitor/getMetric',
                data: {
                    cloud: this.cloud,
                    redisCluster: (this.showWhichSrvGraph && `${this.showWhichSrvGraph.ip}:${this.showWhichSrvGraph.port}`)
                        || this.redisCluster
                }
            });
        }

        return resResut;
    }

    /**
     * 获取服务器单个指标图表数据
     */
    getMetricProcessed() {
        let resResut = Promise.resolve({});

        if (this.showWhichSrvGraph.ip && this.showWhichSrvGraph.port && this.srvGraphSelectVal) {
            resResut = this.ajax({
                url: '/redismonitor/getMetricProcessed',
                data: {
                    ip: this.showWhichSrvGraph.ip,
                    port: this.showWhichSrvGraph.port,
                    metric: this.srvGraphSelectVal,
                    lastTime: this.srvLastTime
                }
            });
        }

        return resResut;
    }

    /**
     * 获取命令总数
     */
    getCommandProcessed() {
        let resResut = Promise.resolve({});

        if (this.cloud && this.redisCluster) {
            resResut = this.ajax({
                url: '/redismonitor/getCommandProcessed',
                data: {
                    cloud: this.cloud,
                    redisCluster: this.redisCluster,
                    lastTime: this.cpLastTime
                }
            });
        }

        return resResut;
    }

    /**
     * 获取全集群读写并发
     */
    getWriteReadProcessed() {
        let resResut = Promise.resolve({});

        if (this.cloud && this.redisCluster) {
            resResut = this.ajax({
                url: '/redismonitor/getWriteReadProcessed',
                data: {
                    cloud: this.cloud,
                    redisCluster: this.redisCluster,
                    lastTime: this.mcLastTime
                }
            });
        }

        return resResut;
    }

    /**
     * 获取 Top CMD
     */
    getTopCommandTotal() {
        let resResut = Promise.resolve({});

        if (this.cloud && this.redisCluster) {
            resResut = this.ajax({
                url: '/redismonitor/getTopCommand',
                data: {
                    cloud: this.cloud,
                    redisCluster: this.redisCluster,
                    lastTime: this.tcLastTime
                }
            });
        }

        return resResut;
    }

    /**
     * 获取 Top 命中率低
     */
    getTopMissRate() {
        let resResut = Promise.resolve({});

        if (this.cloud && this.redisCluster) {
            resResut = this.ajax({
                url: '/redismonitor/getTopMissRate',
                data: {
                    cloud: this.cloud,
                    redisCluster: this.redisCluster,
                    lastTime: this.tmLastTime
                }
            });
        }

        return resResut;
    }

    /**
     * 获取服务器数据表
     */
    getRedisOpsStatistics() {
        let resResut = Promise.resolve({});
        let resParams = {
            page: this.rosPage.current,
            cloud: this.cloud,
            redisCluster: this.redisCluster,
            lastTime: this.rosSelectVal
        };

        if (!$.isEmptyObject(this.rosFilters)) {
            $.extend(resParams, this.rosFilters);
        }

        if (this.cloud && this.redisCluster) {
            resResut = this.ajax({
                url: '/redismonitor/getRedisOpsStatistics',
                data: resParams
            });
        }

        return resResut;
    }

    /**
     * 集中刷新数据
     */
    async refreshGraph() {
        await this.srvListRender();
        await this.srvGraphRender();
        this.cpRender();
        this.mcRender();
        this.tcRender(true);
        this.tmRender(true);
        this.rosRender(true);
    }
}

export default new RedisLive();