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')
        };

        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() {
        if (this.selector.$userAvatar.data('avatar')) {
            this.selector.$userAvatar.css('background-image', 'url(' + this.selector.$userAvatar.data('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({
                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() {
        let integralData = {
            total: 18922,
            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
            data: [
                {value: 50, name: 'rose2', color: '#000', percent: '20%', plateType: 1},
                {value: 35, name: 'rose3', plateType: 2},
                {value: 30, name: 'rose4', plateType: 3},
                {value: 25, name: 'rose5'},
                {value: 20, name: 'rose6'},
                {value: 15, name: 'yoho!Bowb'},
            ]
        };

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

        this.selector.integralCh.setOption({
            calculable: true,
            color: ['#C1232B', '#B5C334', '#FCCE10'],
            series: [
                {
                    type: 'pie',
                    radius: [this.selector.chartWidth * 3 / 10, this.selector.chartWidth * 23 / 50],
                    roseType: 'radius',
                    center: ['48%', '50%'],
                    label: {
                        normal: false
                    },
                    data: integralData.data
                }
            ]
        });
    }

    // 资源位初始化
    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() {
        this.ajax({
            type: 'GET',
            url: location.protocol + '//m.yohobuy.com/home/family/downLoadData'
        }).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();

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

            if (result.code === 200) {
                this.selector.$invition.show();
                this.selector.$invitonSet.hide();
                this.selector.$invition.find('.trend-word').html(trendWord);
                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();
});