/**
 * 套餐购物车选择尺寸、颜色和数量面板
 * 显示时构造当前商品信息的HTML插入yoho-page；消失则是直接清除HTML
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/10/21
 */


// bikai
// 增加init函数，异步请求的接口需要重新初始化一下选择列表
// 异步渲染的模板统一插入 #chose-panel ,兼容页面多个选择框
let $ = require('yoho-jquery'),
    tip = require('plugin/tip'),
    loading = require('plugin/loading');

let innerScroll = require('plugin/inner-scroll');

let $chosePanel = $('.chose-panel'),
    $num,
    $chosed,
    $imgsThumb,
    $leftNum,
    leftNum,
    confirming,
    curColorIndex,
    curSizeIndex,
    hasChooseColor,
    hasChooseSize,
    $curSizeBlock,
    $sizeRowList,
    $curColorBlock,
    $colorRowList,
    $allChoseItems,
    queryString,
    $choseArea,
    $cartBar,
    $soonSoldOut = $('.soonSoldOut-tag'),
    $yohoPage = $('.yoho-page'),
    single = $('#single').val() || 0,
    $thumbImg;

let productSkn;

/* 为套装调整样式 */
function disableShowNum() {
    $('.num').css('display', 'none');
}

// 禁用数字编辑
function disableNumEdit() {
    let $numBtn = $chosePanel.find('.num .btn>.iconfont');

    // 添加disabled样式
    $numBtn.hasClass('disabled') ? null : $numBtn.addClass('disabled');
    $yohoPage.off('touchstart', '.btn-minus');
    $yohoPage.off('touchstart', '.btn-plus');
}

// 初始化 chose pannel
function init(sknId) {
    $('#chose-btn-sure').html('确认');
    hasChooseColor = false;
    hasChooseSize = false;
    $curSizeBlock = null;
    queryString = $.queryString();
    $imgsThumb = $('.chose-panel').find('.thumb');
    $choseArea = $('.chose-panel .main .chose-items');
    $allChoseItems = $('.chose-items');
    $sizeRowList = $('.size-list ul');
    $colorRowList = $('.color-list ul');
    $leftNum = $('#left-num');
    $cartBar = $('.cart-bar');
    curColorIndex = 0;
    curSizeIndex = 0;
    productSkn = sknId;
    disableShowNum();
    $thumbImg = $('.thumb-img');
}

// 删除面板
function removePannel() {
    let $promotionId = $('#promotionId');

    if ($chosePanel) {
        $chosePanel.remove();
    }

    if ($promotionId) {
        $promotionId.remove();
    }
}

function checkColorSizeNum() {
    if (!hasChooseColor && !hasChooseSize) {
        tip.show('请选择颜色和尺码~');
        return false;
    } else if (!hasChooseColor) {
        tip.show('请选择颜色~');
        return false;
    } else if (!hasChooseSize) {
        tip.show('请选择尺码~');
        return false;
    }
    return true;
}

function show() {
    $chosePanel.show();
    $num = $('#good-num');
    innerScroll.disableScroll($choseArea);
}

// 隐藏当前Panel
function hide() {
    $chosePanel.hide();
    innerScroll.enableScroll($choseArea);

    if ($cartBar.length > 0) {
        $cartBar.show();
    }
}

// 修改加入购物车的文字和背景
function updateConformButtonClassAndText() {
    $chosed = $allChoseItems.find('.chosed');
    if ($chosed.closest('.zero-stock').length === 2) {
        $('#chose-btn-sure').css('background-color', '#c0c0c0').html('已售罄');
    } else {
        $('#chose-btn-sure').css('background-color', '#eb0313').html('确认');
    }
    if ($chosed.closest('.zero-stock').length === 2) {
        $('#chose-btn-sure').css('background-color', '#c0c0c0').html('已售罄');
    }
}

// 显示剩余件数
function displayGoodNum(curGoodNum) {

    // 数量大于
    if (curGoodNum > 0) {
        if ($soonSoldOut.length > 0) {
            $allChoseItems.find('.num .left-num').html('即将售罄');
        } else {
            $allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
        }

        $leftNum.val(curGoodNum);

        // 数量小于0
    } else {
        $allChoseItems.find('.num .left-num').html('');
        $leftNum.val(0);
    }
}

// 老的选中尺码去掉勾选,新的选中尺码加上勾选
function changeSizeChosed(newSizeIndex) {
    let sizes,
        queryString,
        i;

    if (curColorIndex && $curSizeBlock && $curSizeBlock.length > 0) {
        $curSizeBlock.removeClass('chosed');
        sizes = $sizeRowList.eq(newSizeIndex).children();
        for (i = 0; i < sizes.length; i++) {
            if ($(sizes[i]).data('id') === $curSizeBlock.data('id')) {
                $curSizeBlock = $(sizes[i]);
                queryString = '#' + $curSizeBlock.data('id');
                curColorIndex = $(queryString).data('index');
                $curSizeBlock.addClass('chosed');
                return $curSizeBlock.data('num');
            }
        }

        // 特殊处理: 老的选中尺码在新选中的颜色对应尺码中不存在,需要下述1,2,3
        // 1.重置尺码选择的标志变量.
        $curSizeBlock = null;
        hasChooseSize = false;

        // 2.当前颜色行隐藏
        $colorRowList.eq(curColorIndex).addClass('hide');

        // 3.目标颜色行第一行显示
        $colorRowList.eq(0).removeClass('hide');
        curColorIndex = 0;
        return -1;
    }
    return 0;
}

// 老的选中颜色去掉勾选,新的选中颜色加上勾选
function changeColorChosed(newColorIndex) {
    if (curSizeIndex && $curColorBlock && $curColorBlock.length > 0) {
        $curColorBlock.removeClass('chosed');
        $curColorBlock = $($colorRowList.eq(newColorIndex).children().get(curSizeIndex - 1));
        $curColorBlock.addClass('chosed');
        return $curColorBlock.data('num');
    }
    return 0;
}

/**
 * 设置用户选择的 sku
 */
function choseEnsure(skn, sku, color, size) {
    let product = $('#gskn-' + skn);

    product.data('sku', sku);
    product.html('颜色：' + color + " 尺码：" + size);
}

init();

$yohoPage.on('touchstart', '.chose-panel', function (e) {
    let $cur = $(e.target);

    if ($cur.closest('.main').length > 0) {
        return;
    }

    // 点击蒙版消失
    hide();
    return false;
});

$yohoPage.on('touchstart', '.color-list .block', function () {
    let $this = $(this),
        index = $this.index(),
        curGoodNum;

    // 当前颜色已经是选中状态,再点击时
    if ($this.hasClass('chosed')) {

        // 清空剩余件数的提示
        $allChoseItems.find('.num .left-num').html('');
        $leftNum.val(0);
        hasChooseColor = false;

        // 当前尺码行隐藏
        $sizeRowList.eq(curSizeIndex).addClass('hide');

        // 目标尺码行显示
        $sizeRowList.eq(0).removeClass('hide');

        curSizeIndex = 0;

        // 老的选中尺码去掉勾选,新的选中尺码加上勾选
        changeSizeChosed(0);

        // 当前颜色不是选中状态,选中时
    } else {
        hasChooseColor = true;

        // 尺码行当前行隐藏
        $sizeRowList.eq(curSizeIndex).addClass('hide');

        // 老的选中尺码去掉勾选,新的选中尺码加上勾选
        curGoodNum = changeSizeChosed(index + 1);

        // 显示剩余数量
        displayGoodNum(curGoodNum);

        // 尺码对应行显示
        $sizeRowList.eq(index + 1).removeClass('hide');
        curSizeIndex = index + 1;
        $curColorBlock = $this;

        // 修改颜色时修改商品图片
        $imgsThumb.addClass('hide').eq(index).removeClass('hide');
    }

    // 颜色块切换勾选样式
    $this.siblings('.chosed').removeClass('chosed');

    // 特殊处理: 老的选中尺码在新选中的颜色对应尺码中不存在, 需要将颜色的第一行对应的颜色块加上勾选样式.
    if (curGoodNum === -1) {
        $curColorBlock = $($colorRowList.eq(0).children().get(index));
        $curColorBlock.addClass('chosed');
    } else {

        // 当前选择的颜色块,加上勾选样式
        $this.toggleClass('chosed');
    }

    $('#good-num').val(1);

    // 设置按钮的样式和文字
    updateConformButtonClassAndText();

}).on('touchstart', '.size-list .block', function () {
    let $this = $(this),
        index,
        curGoodNum;

    // 当前尺码已经是选中状态,再点击时
    if ($this.hasClass('chosed')) {

        // 清空剩余件数的提示
        $allChoseItems.find('.num .left-num').html('');
        $leftNum.val(0);
        hasChooseSize = false;

        // 当前颜色行隐藏
        $colorRowList.eq(curColorIndex).addClass('hide');

        // 目标颜色行显示
        $colorRowList.eq(0).removeClass('hide');
        curColorIndex = 0;

        // 老的选中颜色去掉勾选,新的选中颜色加上勾选
        changeColorChosed(0);

        // 当前尺码不是选中状态,选中时
    } else {
        hasChooseSize = true;
        index = $('#' + $this.data('id')).data('index') - 1;

        // 颜色当前行隐藏
        $colorRowList.eq(curColorIndex).addClass('hide');

        // 老的选中颜色去掉勾选,新的选中颜色加上勾选
        curGoodNum = changeColorChosed(index + 1);

        // 显示剩余数量
        displayGoodNum(curGoodNum);

        // 颜色对应行显示
        $colorRowList.eq(index + 1).removeClass('hide');
        curColorIndex = index + 1;
        $curSizeBlock = $this;
    }

    // 颜色块切换勾选样式
    $this.siblings('.chosed').removeClass('chosed');
    $this.toggleClass('chosed');
    $('#good-num').val(1);

    // 设置按钮的样式和文字
    updateConformButtonClassAndText();
});

$yohoPage.on('touchstart', '.btn-minus', function () {
    let num = parseInt($num.val(), 10);

    leftNum = $('#left-num').val();

    if (!checkColorSizeNum()) {
        return;
    }

    if (num === 1 || leftNum - 0 === 0) {
        tip.show('您选择的数量不能为零~');
        return;
    }

    if (num < 0) {
        tip.show('您选择的数量不能为负数~');
        return;
    }

    $num.val(num - 1);

}).on('touchstart', '.btn-plus', function () {
    let num = parseInt($num.val(), 10);

    leftNum = $('#left-num').val();

    if (!checkColorSizeNum()) {
        return;
    }

    if (num - 0 === leftNum || leftNum === 0) {
        return;
    }

    if (num > 0) {
        tip.show('套餐商品只能购买一件~');
        return;
    }

    $num.val(num + 1);

}).on('touchstart', '#chose-btn-sure', function () {

    let promotionId,
        num = parseInt($num.val(), 10);

    // 颜色尺码没有选择
    if (!checkColorSizeNum()) {
        return;
    }

    if ($('#chose-btn-sure').html() === '已售罄') {
        return;
    }

    leftNum = $('#left-num').val() - 0;

    if (num > leftNum) {
        tip.show('您选择的数量超过了最大库存量~');
        return;
    }

    if (num < 0) {
        tip.show('您选择的数量小于一件~');
        return;
    }

    $chosed = $('.block-list>ul>li.chosed');

    if ($chosed.length === 2 && $chosed.closest('.zero-stock').length === 0) {
        promotionId = $('#promotionId').val();
        if (confirming) {
            return false;
        }

        $('#chose-btn-sure').click(
            function () {
                let sizeChose = $('.size-list').find('.chosed'),
                    productSku = sizeChose.data('skuid'),
                    color = $('.color-list').find('.chosed').html().substring(0,4) + '...',
                    size = sizeChose.html();
                choseEnsure(productSkn, productSku, color, size);
                hide();
            }
        );
    }
});
$yohoPage.on('click', '.close', function() {
    hide();
});

$yohoPage.on('touchstart', '.thumb-img', function() {

    if ($thumbImg.hasClass('hover')) {
        $thumbImg.removeClass('hover');
    } else {
        $thumbImg.addClass('hover');
    }
});
exports.init = init;
exports.show = show;
exports.remove = removePannel;
exports.disableNumEdit = disableNumEdit;