/**
 * Created by qiujun on 2017/3/27.
 */
var $ = require('yoho-jquery');
require('dashboard.scss');

var $dashboard_tab = $('.dashboard-tab');
var dashboard_interface = 'http://run.yohops.com/data-analysis-web/cvrkpi/queryCvrKpi';
var dashboard_data;
var now_tab_index = 0;
var data_arr = [];

$(document).ready(function() {
    init_tabs();
    init_data();


});

/**
 * 选项卡
 */
function init_tabs() {
    $dashboard_tab.each(function(i) {
        let tab_index = i;
        $(this).on('click',function() {
            now_tab_index = tab_index;
            if(!$(this).hasClass('active')) {
                $(this).siblings().removeClass('active');
                $(this).addClass('active');
                change_list(now_tab_index);
            }
        });
    });
}

function init_data() {
    $.ajax({
        url: dashboard_interface,
        type: 'get',
        data:'',
        success: function(res) {
            dashboard_data = res;
            change_list(now_tab_index);
            setTimeout(init_data,30000);
        }
    })
}

function change_list(tab_index) {
    console.log('dashboard_data=',dashboard_data);
    if(dashboard_data) {
        let data;
        switch (tab_index) {
            case 0:
                data = dashboard_data.data.androidCvrKpi;
                break;
            case 1:
                data = dashboard_data.data.iosCvrKpi;
                break;
            case 2:
                data = dashboard_data.data.totalCvrKpi;
                break;
            default:
                data = dashboard_data.data.androidCvrKpi;
        }
        manage_list(data);
    }

}

function manage_list(data) {
    console.log('data=',data);
    if(data) {
        data_arr = [];
        let obj = {};
        let todayTotalUv = data.todayTotalUv;
        let yesterdayTotalUv = data.yesterdayTotalUv;
        let totalUvRate = get_rate((todayTotalUv - yesterdayTotalUv) / yesterdayTotalUv,true);

        obj = {};
        obj.name = '总UV';
        obj.total = todayTotalUv;
        obj.rate = totalUvRate;
        data_arr.push(obj);

        let todayDetailUv = data.todayDetailUv;
        let yesterdayDetailUv = data.yesterdayDetailUv;
        let detailUvRate = get_rate((todayDetailUv - yesterdayDetailUv) / yesterdayDetailUv,true);

        obj = {};
        obj.name = '商品详情页UV';
        obj.total = todayDetailUv;
        obj.rate = detailUvRate;
        data_arr.push(obj);

        let todayShopCartUv = data.todayShopCartUv;
        let yesterdayShopCartUv = data.yesterdayShopCartUv;
        let shopcartUvRate = get_rate((todayShopCartUv - yesterdayShopCartUv) / yesterdayShopCartUv,true);

        obj = {};
        obj.name = '加购物车UV';
        obj.total = todayShopCartUv;
        obj.rate = shopcartUvRate;
        data_arr.push(obj);

        let todayTotalOrder = data.todayTotalOrder;
        let yesterdayTotalOrder = data.yesterdayTotalOrder;
        let totalOrderRate = get_rate((todayTotalOrder - yesterdayTotalOrder) / yesterdayTotalOrder,true);

        obj = {};
        obj.name = '下单数';
        obj.total = todayTotalOrder;
        obj.rate = totalOrderRate;
        data_arr.push(obj);

        let todayTotalPayedOrder = data.todayTotalPayedOrder;
        let yesterdayTotalPayedOrder = data.yesterdayTotalPayedOrder;
        let totalPayedOrderRate = get_rate((todayTotalPayedOrder - yesterdayTotalPayedOrder)
            / yesterdayTotalPayedOrder,true);

        obj = {};
        obj.name = '支付成功订单数';
        obj.total = todayTotalPayedOrder;
        obj.rate = totalPayedOrderRate;
        data_arr.push(obj);

        let firstRate = get_rate(todayDetailUv / todayTotalUv,false);
        let firstRateChange = get_rate((todayDetailUv / todayTotalUv - yesterdayDetailUv / yesterdayTotalUv)
            / (yesterdayDetailUv / yesterdayTotalUv),true);

        obj = {};
        obj.name = '一级转化';
        obj.total = firstRate;
        obj.rate = firstRateChange;
        data_arr.push(obj);


        let secondRate = get_rate(todayShopCartUv / todayDetailUv,false);
        let secondRateChange = get_rate((todayShopCartUv / todayDetailUv - yesterdayShopCartUv / yesterdayDetailUv)
            / (yesterdayShopCartUv / yesterdayDetailUv),true);

        obj = {};
        obj.name = '二级转化';
        obj.total = secondRate;
        obj.rate = secondRateChange;
        data_arr.push(obj);

        let thirdRate = get_rate(todayTotalOrder / todayShopCartUv,false);
        let thirdRateChange = get_rate((todayTotalOrder / todayShopCartUv - yesterdayTotalOrder / yesterdayShopCartUv)
            / (yesterdayTotalOrder / yesterdayShopCartUv),true);

        obj = {};
        obj.name = '三级转化';
        obj.total = thirdRate;
        obj.rate = thirdRateChange;
        data_arr.push(obj);

        let fourthRate = get_rate(todayTotalPayedOrder / todayTotalOrder,false);
        let fourthRateChange = get_rate((todayTotalPayedOrder / todayTotalOrder - yesterdayTotalPayedOrder / yesterdayTotalOrder)
            / (yesterdayTotalPayedOrder / yesterdayTotalOrder),true);

        obj = {};
        obj.name = '四级转化';
        obj.total = fourthRate;
        obj.rate = fourthRateChange;
        data_arr.push(obj);

        let li_html = '';
        for (let i = 0; i < data_arr.length; i ++) {
            li_html += list_template(data_arr[i]);
        }

        $('.dashboard-data ul').html(li_html);
    }
}

function list_template(obj) {
    let rate_class = obj.rate.includes('-') ? 'rate-down' : 'rate-up';

    return `<li>
                        <div class="list-left">
                            ${obj.name} : 
                        </div>
                        <div class="list-right">
                            <p class="total-num">${obj.total}</p>
                            <p class="change-rate ${rate_class}">${obj.rate}</p>
                        </div>
                    </li>`;
}

function get_rate(num,need_arrow) {
    let new_num;
    let arrow = '';

    if(!isNaN(num)) {
        if(num > 0) {
            if(need_arrow) {
                arrow = '↑'
            }
        }
        else if(num < 0) {
            if(need_arrow) {
                arrow = '↓'
            }
        }
        new_num = (num * 100).toFixed(2) + '%' + arrow;
    }
    else {
        new_num = '0.00%'
    }
    return new_num;
}