import 'home/family.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import tip from 'plugin/tip';
import yoho from 'yoho-app';
import integral from 'home/integral-paradise.hbs';
import vipDetailInfo from 'home/vip-detail.hbs';
import downLoadInfo from 'home/down-load-detail.hbs';

const Swiper = require('yoho-swiper2');
const echarts = require('echarts/lib/echarts');

require('echarts/lib/chart/pie');

class FamilyIndex extends Page {
    constructor() {
        super();

        this.selector = {
            $diaC: $('.dia-c'),
            $userAvatar: $('.user-avatar'),
            $codeSet: $('.code-set'),
            $invition: $('.invition'),
            $invitonSet: $('.inviton-set'),
            $textarea: $('textarea'),
            integralCh: echarts.init(document.getElementById('charts')),
            chartWidth: $('.charts').width(),
            $integralContent: $('.integral-content'),
            $contentItem: $('.content-item'),
            $close: $('.close'),
            $userName: $('.user-name'),
            $trendWord: $('.trend-word'),
            $wordOuter: $('.word-outer'),
            $bannerCenterSwiper: $('.banner-center-swiper'),
            $back: $('.back'),
            $vipMore: $('more'),
            $trendCode: $('.trend-code')
        };

        this.view = {
            integral,
            vipDetailInfo,
            downLoadInfo
        };

        this.vipInfo;

        this.init();
    }

    init() {
        this.headIco();
        this.integralCharts();
        this.bindEvents();
        this.viewVipInfo();
        this.initTrend();
        this.trendWordMarquee();
        this.resources();
        this.downLoadInfo();
    }

    bindEvents() {
        this.selector.$codeSet.on('click', this.setTrendPop.bind(this));
        this.selector.$textarea.on('blur', this.saveTrendWord.bind(this));
        this.selector.integralCh.on('click', this.jump.bind(this));
        this.selector.$contentItem.on('click', this.showInfo.bind(this));
        this.selector.$diaC.on('click', this.selector.$close, this.hideVipInfo.bind(this));
        this.selector.$back.on('click', this.goBack.bind(this));
    }

    // 头像
    headIco() {
        let myImage = new Image(),
            avatar;

        avatar = this.selector.$userAvatar.data('avatar');
        myImage.src = avatar;
        myImage.onload = () => {
            this.selector.$userAvatar.css('background-image', 'url(' + avatar + ')');
        };
    }

    // 潮流口令滚动
    trendWordMarquee() {
        let diff = $('.word-outer').scrollLeft() - $('.trend-word').eq(0).width();

        $('.word-outer').scrollLeft($('.word-outer').scrollLeft() + 1);

        if (diff > 0) {
            $('.word-outer').scrollLeft(Math.abs(diff));
        }
    }

    // 潮流口令初始化判断
    initTrend() {
        if (this.selector.$trendWord.eq(0).width() > parseInt(this.selector.$wordOuter.css('max-width'), 10)) {

            this.selector.$trendWord.width(this.selector.$trendWord.width() + 40);

            this.selector.$wordOuter.append('<span class="trend-word">' + this.selector.$trendWord.html() + '</span>').css({  // eslint-disable-line
                width: 2 * this.selector.$trendWord.width()
            });

            this.selector.$trendWord = $('.trend-word');

            this.selector.$trendWord.addClass('rem-lin');

            setInterval(this.trendWordMarquee, 40);
        } else {
            this.selector.$trendWord = $('.trend-word');

            if (this.selector.$trendWord.length > 1) {
                this.selector.$trendWord.eq(1).remove();
            }

            this.selector.$trendWord.removeClass('rem-lin');
        }
    }

    // 积分乐园图表
    integralCharts() {
        this.ajax({
            type: 'GET',
            url: location.protocol + '//m.yohobuy.com/home/family/integralCharts'
        }).then(result => {
            if (result) {
                result.totalHref = location.protocol + '//m.yohobuy.com/home/family/coinDetail?openby:yohobuy={"action":"go.h5","params":{"url":"' + location.protocol + '//m.yohobuy.com/home/family/coinDetail"}}', // eslint-disable-line

                this.selector.$integralContent.append(this.view.integral(result));

                this.selector.integralCh.setOption({
                    calculable: true,
                    color: result.colorList,
                    series: [
                        {
                            type: 'pie',
                            radius: [this.selector.chartWidth * 3 / 10, this.selector.chartWidth * 11 / 25],
                            roseType: 'radius',
                            center: ['50%', '50%'],
                            label: {
                                normal: false
                            },
                            data: result.list
                        }
                    ]
                });
            }
        }).catch(() => {
            tip.show('服务异常，请稍后重试');
        });
    }

    // 资源位初始化
    resources() {
        if (this.selector.$bannerCenterSwiper.length > 0) {
            new Swiper('.banner-center-swiper', {
                pagination: '.swiper-pagination',
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                paginationClickable: true,
                autoplay: 3000
            });
        }
    }

    // 查看VIP信息
    viewVipInfo() {
        this.ajax({
            type: 'GET',
            url: location.protocol + '//m.yohobuy.com/home/family/vipDetailData'
        }).then(result => {
            this.vipInfo = result;
        }).catch(() => {
            tip.show('服务异常，请稍后重试');
        });
    }

    // 下载弹窗初始页面渲染
    downLoadInfo() {
        let codeArr = [];

        $('.content-item').each(function() {
            codeArr.push({
                name: $(this).data('name'),
                code: $(this).data('code')
            });
        });

        this.ajax({
            type: 'GET',
            url: location.protocol + '//m.yohobuy.com/home/family/downLoadData',
            data: {
                codeArr: codeArr
            }
        }).then(result => {
            $('.yoho-family-page').append(this.view.downLoadInfo(result));

            this.selector.$downLoadDetail = $('.down-load-detail');
            this.selector.$downClose = $('.down-close');
            this.selector.$downClose.on('click', this.downClose.bind(this));
        });
    }

    // 设置潮流口令
    setTrendPop() {
        this.selector.$invition.hide();
        this.selector.$invitonSet.show();
        this.selector.$textarea.focus();
    }

    // 提交口令
    saveTrendWord() {
        let trendWord = this.selector.$textarea.val();

        if (trendWord === '') {
            this.selector.$invition.show();
            this.selector.$invitonSet.hide();
            return;
        }

        this.ajax({
            type: 'GET',
            url: location.protocol + '//m.yohobuy.com/home/family/set-trend-word',
            data: {
                trendWord: trendWord
            }
        }).then(result => {
            tip.show(result.message);

            if (result.code === 200) {
                this.selector.$invition.show();
                this.selector.$invitonSet.hide();
                if (this.selector.$invition.find('.trend-word') > 0) {
                    this.selector.$invition.find('.trend-word').html(trendWord);
                } else {
                    this.selector.$trendCode.html('# <span class="word-outer"><span class="trend-word">' +
                        trendWord + '</span></span> #');
                }
                this.selector.$trendWord.css({
                    width: 'auto'
                });
                this.selector.$wordOuter.css({
                    width: 'auto'
                });
                this.initTrend();
            } else {
                this.selector.$textarea.focus();
            }
        }).catch(() => {
            tip.show('服务异常，请稍后重试');
        });
    }

    // 积分图表点击跳转
    jump(params) {
        yoho.goH5(`${location.protocol}//m.yohobuy.com/home/family/coinDetail?plateType=${params.data.plateType}`);
    }

    // 点击APP图标显示信息
    showInfo(e) {
        let $this = $(e.currentTarget);
        let appType = $this.data('name').toLowerCase();
        let isLogin = $this.data('login');

        if (isLogin) {
            if (this.vipInfo[appType]) {
                this.selector.$diaC.append(this.view.vipDetailInfo(this.vipInfo[appType]));
            } else {
                this.viewVipInfo();

                this.selector.$diaC.append(this.view.vipDetailInfo(this.vipInfo[appType]));
            }

            $('.vip-detail').addClass(appType);

            if (this.selector.$userAvatar.data('avatar')) {
                $('.base .pic').css('background-image', 'url(' + this.selector.$userAvatar.data('avatar') + ')');
            }

            if (this.selector.$userName.text() !== '') {
                $('.intro .name span').text($('.user-name').text() + '，');
            }
        } else {
            this.selector.$downLoadDetail.removeClass('hide');

            this.selector.$downLoadDetail.find('.detail-content .' + appType).removeClass('hide');
            this.selector.$downLoadDetail.find('.detail-content .' + appType).siblings().addClass('hide');
        }
    }

    // 点击关闭会员信息弹框
    hideVipInfo() {
        $('.vip-detail').remove();
    }

    // 返回上一页
    goBack() {
        if (yoho.isApp) {
            yoho.invokeMethod('go.back');
        }
    }

    downClose() {
        this.selector.$downLoadDetail.addClass('hide');
    }
}

$(() => {
    new FamilyIndex();
});