import {
    View
} from 'yoho-mvc';

let Swiper = require('yoho-swiper');
let lazyLoad = require('yoho-jquery-lazyload');
let dialog = require('plugin/dialog');

export class DetailView extends View {
    constructor() {
        super('#global-detail-page');

        this.on('click', '.addto-cart', this.showDownLoadDialog.bind(this));
        this.on('click', '.illustrate-title', this.illustrateDown.bind(this));
        this.on('click', '.illustrate-contents', this.illustrateUp.bind(this));
        this.illustrateTitle = $('.illustrate-title');
        this.illustrateContents = $('.illustrate-contents');
        this.illustrateContents.hide().addClass('down-animate');

        setTimeout(() => {
            new Swiper('.banner-swiper', {
                preloadImages: false,
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                lazyLoadingOnTransitionStart: true,
                paginationClickable: true,
                pagination: '.banner-top .pagination-inner',
                nextButton: '.my-swiper-button-next',
                prevButton: '.my-swiper-button-prev',
                spaceBetween: 3
            });
        }, 500);

        let $cartBar = $('.cart-bar');
        let timer = setInterval(function() {
            if ($cartBar) {
                window.reMarginFooter('.cart-bar');
                clearInterval(timer);
            } else {
                $cartBar = $('.cart-bar');
            }
        }, 500);
    }

    showDownLoadDialog() {
        dialog.showDialog({
            dialogText: '进入有货APP',
            hasFooter: {
                rightBtnText: '打开Yoho!Buy有货APP'
            }
        }, function() {
            let appUrl = $('#main-wrap').data('apppath');
            let ifr = document.createElement('iframe');

            ifr.src = appUrl;
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
            window.location.href = appUrl;

            let time = Date.now();

            window.setTimeout(function() {
                document.body.removeChild(ifr);
                if (Date.now() - time < 3200) {
                    window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho';
                }
            }, 3000);

        }, null, true);

        $('.dialog-wrapper').off('touchstart').on('touchstart', function(para) {
            para.stopPropagation();
            if ($(para.target).hasClass('dialog-wrapper')) {
                dialog.hideDialog();
            }
        });
    }

    illustrateDown() {
        this.illustrateTitle.hide();
        this.illustrateContents.show();
        setTimeout(()=>{
            this.illustrateContents.removeClass('down-animate');
        }, 10);
    }

    illustrateUp() {
        this.illustrateContents.addClass('down-animate');
        setTimeout(()=>{
            this.illustrateContents.hide();
            this.illustrateTitle.show();
        }, 500);
    }

    getCart() {
        return $('#remove-cart-count').length;
    }

    setCartCount(count) {
        $('.cart-bar').find('.num-tag').html(count).removeClass('hide');
    }

    setDetailHtml(htmldata) {
        let $productDesc = $('#productDesc');

        $productDesc.append(htmldata);

        window.rePosFooter && window.rePosFooter();

        lazyLoad($productDesc.find('img.lazy'));

        this.productDescStyle();
    }

    productDescStyle() {
        new Swiper('#swiper-recommend', {
            slidesPerView: 'auto',
            grabCursor: true,
            slideElement: 'a',
            lazyLoading: true,
            watchSlidesVisibility: true
        });

        let $service = $('.service-cont'),
            serviceH = $service.height(),
            serviceLi = $service.find('li'),
            showH = parseInt(serviceLi.eq(0).height()) + parseInt(serviceLi.eq(1).height()) - parseInt(serviceLi.eq(1).find('.service-answer').height()) / 2; // eslint-disable-line

        $service.css({
            height: showH,
            overflow: 'hidden'
        });

        this.operation = {
            showH,
            serviceH
        };
        this.on('click', '.service-operation', this.serviceOperation.bind(this));
    }

    serviceOperation(e) {
        function serviceState(opt) {
            opt.dom.html(opt.txt + '<i class="service-icon shrink-btn-' + opt.btnClass + '"></i>');

            $('.service-cont').animate({
                height: opt.height
            }, 0, function() {
                $(this).css({
                    overflow: opt.of
                });
            });
        }

        let $this = $(e.currentTarget);
        let curState = $this.find('i').hasClass('shrink-btn-up');

        if (curState) {
            serviceState({
                dom: $this,
                txt: '展开',
                btnClass: 'down',
                height: this.operation.showH,
                of: 'hidden'
            });
        } else {
            serviceState({
                dom: $this,
                txt: '收起',
                btnClass: 'up',
                height: this.operation.serviceH,
                of: 'visible'
            });
        }
    }

    getSkn() {
        return this.$base.data('skn');
    }
}