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

const echarts = require('echarts/lib/echarts');

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

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

        this.selector = {
            $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')
        };

        this.view = {
            integral
        };

        this.init();
    }

    init() {
        this.headIco();
        this.integralCharts();
        this.bindEvents();
    }

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

    // 头像
    headIco() {
        if (this.selector.$userAvatar.data('avatar')) {
            this.selector.$userAvatar.css('background-image', 'url(' + this.selector.$userAvatar.data('avatar') + ')');
        }
    }

    // 积分乐园图表
    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: 40, 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: 'rose7'},
            ]
        };

        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, this.selector.chartWidth / 2],
                    roseType: 'radius',
                    center: ['50%', '50%'],
                    label: {
                        normal: false
                    },
                    data: integralData.data
                }
            ]
        });
    }

    // 设置潮流口令
    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-code').html('# ' + trendWord + ' #');
            } else {
                this.selector.$textarea.focus();
            }
        }).catch(() => {
            tip.show('服务异常，请稍后重试');
        });
    }

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

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