let $ = require('yoho-jquery');
let dbClass = 'data-bind',
    $chosePanel = $('.chose-panel');

module.exports = function(data, callback) {
    render(data); // eslint-disable-line
    callback && callback();
};
function render(data) {
    let htmlTemplate = '<div class="main">' +
    '    <div class="close iconfont">&#xe626;</div>' +
    '    <div class="infos">' +
    '        <div class="basic-info" >' +
    '            <div class="thumb-img">' +
    '                <img class="thumb" src="">' +
    '            </div>' +
    '            <div class="text-info">' +
    '                <p class="price">' +
    '                    <span class="sale-price"></span>' +
    '                    <span class="market-price data-bind"></span>' +
    '                </p>' +
    '                <p class="not-choose">请选择颜色、尺码</p>' +
    '                <p class="choosed-info hide"></p>' +
    '                <p class="size-info hide"></p>' +
    '            </div>' +
    '        </div>' +
    '        <div class="chose-items">' +
    '            <div class="color-list block-list">' +
    '                <span class="name"></span>' +
    '                <ul id="" data-index="" class="size-row clearfix ">' +
    '                    <li class="block" data-num="">' +
    '                    </li>' +
    '                </ul>' +
    '            </div>' +
    '            <div class="size-list block-list">' +
    '                <span class="name"></span>' +
    '                <ul class="size-row clearfix">' +
    '                    <li class="block " data-num="" data-id="" data-skuid="" data-info="">' +
    '                    </li>' +
    '                </ul>' +
    '            </div>' +
'' +
    '            <div class="num">' +
    '                <span class="name">数量</span>' +
    '                <div class="clearfix">' +
    '                    <a class="btn btn-minus" href="javascript:void(0);">' +
    '                        <span class="iconfont ">&#xe625;</span>' +
    '                    </a>' +
    '                    <input id="good-num" class="good-num disabled" type="text" value="1" disabled="true">' +
    '                    <a class="btn btn-plus" href="javascript:void(0);">' +
    '                        <span class="iconfont ">&#xe624;</span>' +
    '                    </a>' +
    '                </div>' +
    '                <span class="left-num"></span>' +
    '                <input id="left-num" type="hidden" value="0">' +
    '                <input id="limitNum" type="hidden" value="">' +
    '            </div>' +
'' +
    '        </div>' +
    '    </div>' +
    '    <div class="btn-wrap">' +
    '        <button id="chose-btn-sure" class="btn btn-sure"></button>' +
    '    </div>' +
    '</div>';

    $('#promotionId').remove();
    $('#single').remove();
    $('.chose-panel').addClass('data-bind')
        .html(htmlTemplate)
        .append('<input id="promotionId" type="hidden" value="">')
        .append('<input id="single" type="hidden" value="">');

    if (data.cartInfo.thumbs) {
        $chosePanel.removeClass(dbClass);
        let cartInfo = data.cartInfo;
        let thumbClone = $chosePanel.find('.thumb').remove();

        for (let i = cartInfo.thumbs.length - 1; i >= 0; i--) {
            let thumbEle = thumbClone.clone();

            thumbEle.attr('src', cartInfo.thumbs[i].img);
            if (i !== 0) {
                thumbEle.addClass('hide');
            }
            $chosePanel.find('.thumb-img').prepend(thumbEle);
        }
        $chosePanel.find('.text-info>.name').text(cartInfo.name);
        $chosePanel.find('.sale-price').text(cartInfo.salePrice);
        if (!cartInfo.price) {
            if (data.isSecKill === 'Y') {
                $('.price').append('<span class="market-price">' + cartInfo.salePrice + '</span>');
            } else {
                $chosePanel.find('.sale-price').addClass('no-price');
            }
        } else {
            $chosePanel.find('.market-price').text(cartInfo.price).removeClass(dbClass);
        }
        let colorsClone = $chosePanel.find('.color-list>.size-row').remove();
        let colorClone = colorsClone.find('li').remove();

        for (let i = 0; i < cartInfo.colors.length; i++) {
            let colors = cartInfo.colors[i];
            let colorsEle = colorsClone.clone();

            colorsEle.attr('id', colors.id).attr('data-index', i);
            if (i !== 0) {
                colorsEle.addClass('hide');
            }
            for (let o = 0; o < colors.color.length; o++) {
                let color = colors.color[o];
                let colorEle = colorClone.clone();

                colorEle.attr('data-num', color.colorNum).text(color.name);
                if (color.chosed) {
                    colorEle.addClass('chosed');
                }
                if (!color.colorNum) {
                    colorEle.addClass('zero-stock');
                }
                colorsEle.append(colorEle);
            }
            $chosePanel.find('.color-list').append(colorsEle);
        }
        let sizesClone = $chosePanel.find('.size-list>.size-row').remove();
        let sizeClone = sizesClone.find('li').remove();

        for (let i = 0; i < cartInfo.sizes.length; i++) {
            let sizes = cartInfo.sizes[i];
            let sizesEle = sizesClone.clone();

            if (i !== 0) {
                sizesEle.addClass('hide');
            }
            for (let o = 0; o < sizes.size.length; o++) {
                let size = sizes.size[o];
                let sizeEle = sizeClone.clone();

                sizeEle.attr('data-num', size.sizeNum)
                    .attr('data-id', size.id)
                    .attr('data-skuid', size.skuId)
                    .text(size.name)
                    .attr('data-info', size.sizeInfo);
                if (size.chosed) {
                    sizeEle.addClass('chosed');
                }
                if (!size.sizeNum) {
                    sizeEle.addClass('zero-stock');
                }
                sizesEle.append(sizeEle);
            }
            $chosePanel.find('.size-list').append(sizesEle);
        }
    }
    if (data.tickets) {
        $chosePanel.find('.infos').addClass('tickets-info');
        $chosePanel.find('.color-list>.name').text('日期');
        $chosePanel.find('.size-list>.name').text('区域');
    } else {
        $chosePanel.find('.color-list>.name').text('颜色');
        $chosePanel.find('.size-list>.name').text('尺码');
    }
    if (data.single) {
        $chosePanel.find('.size-list').addClass('hide');
    }
    if (data.cartInfo.promotionId) {
        $('.btn-minus,.btn-plus').find('span').addClass('disabled');
    }

    /* tar modified 161205 量贩商品数量限制 */
    let $discountBuy = $('#discount-buy'),
        $promotionPhrase = $('#promotion-phrase');

    if ($discountBuy.length > 0) {
        $('#good-num').val($discountBuy.val());
    }

    if ($promotionPhrase.length > 0) {
        $('.left-num').html('<span style="color: #e10">' + $promotionPhrase.val() + '</span>');
    }

    $('#limitNum').val(data.cartInfo.limit);
    $('#promotionId').val(data.cartInfo.promotionId);
    $('#single').val(data.single);
    $('#chose-btn-sure').text(data.tickets ? '立即购买' : '加入购物车');

}