import 'home/family-userInfo.page.css';
import 'home/family/city-swiper.css';
import CitySwiper from 'plugin/city-swiper';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import tip from 'plugin/tip';
import cityRender from 'home/chosen-city.hbs';
import yoho from 'yoho-app';

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

        this.selector = {
            $chosenCity: $('#chosen-city'),
            $citySwiper: $('.city-swiper'),
            $modifyInp: $('.inp.modify'),
            $nickName: $('.inp.nick-name'),
            $gender: $('.inp.gender'),
            $birthday: $('.inp.birthday'),
            $height: $('.inp.height'),
            $weight: $('.inp.weight'),
            $userAvatar: $('.user-avatar'),
            $province: $('#province'),
            $city: $('#city'),
            $cancelBtn: $('.swiper-header .cancel'),
            $okBtn: $('.swiper-header .ok'),
            $provinceText: $('.province-text'),
            $cityText: $('.city-text'),
            $userPic: $('.user-pic'),
            $noDate: $('.inp.modify[type!=date]'),
        };

        this.view = {
            cityRender
        };

        this.CityId = 0;
        this.province = this.selector.$provinceText.text();
        this.city = this.selector.$cityText.text();
        this.init();
    }

    init() {
        this.bindEvents();

        // city-swiper的回调函数
        this.on('citySwiperCb', (event, data) => { // data是返回选中的slide
            let $data = $(data);
            let $parent = $data.parents('.swiper-wrapper');

            if (($parent.attr('id') === 'province')) { // 当滑动省份列表时出发城市列表
                this.CityId = $data.attr('id');
                this.getCity();
            }
        });
        this.defaultPic();
        this.getCity();

        if (yoho && yoho.isMarsApp) {
            yoho.ready(() => {
                yoho.invokeMethod('set.removeTopRightButton');
            });
        }
    }

    bindEvents() {
        this.selector.$chosenCity.on('click', this.chosenCity.bind(this));
        this.selector.$cancelBtn.on('click', this.cancelFun.bind(this));
        this.selector.$okBtn.on('click', this.okFun.bind(this));
        this.selector.$chosenCity.on('DOMNodeInserted', this.modifyInp.bind(this));
        this.selector.$userPic.on('click', this.userPic.bind(this));
        this.selector.$modifyInp.on('click', this.closeCitySwiper.bind(this));
        if (yoho.isApp) {
            this.selector.$modifyInp.on('change', this.modifyInp.bind(this));
        } else {
            this.selector.$noDate.on('change', this.modifyInp.bind(this));
            this.selector.$birthday.on('blur', this.modifyInp.bind(this));
        }
    }

    closeCitySwiper(e) {
        let $this = $(e.currentTarget);

        if ($this.attr('id') !== 'chosen-city') {
            this.selector.$citySwiper.hide();
        }
    }

    userPic() {
        if (yoho.isApp) {
            yoho.ready(() => {
                if (yoho.isYohoApp) {
                    yoho.invokeMethod('go.setAvatar', {}, (data) => {
                        if (data) {
                            let reg = /(\w*){mode}(.*){width}(.*){height}(.*)/g;

                            data = data.replace(reg, '$12$2100$3100$4');
                            this.selector.$userAvatar.css('background-image', `url(${data})`);
                        }
                    });
                } else if (yoho.isMarsApp) {
                    yoho.invokeMethod('go.modify_user', {}, (data) => {
                        if (data) {
                            this.selector.$userAvatar.css('background-image', `url(${data})`);
                        }
                    });
                }
            });
        }
    }

    cancelFun() {
        this.selector.$citySwiper.hide();
    }

    okFun() {
        let $provinceActive = $('#province .swiper-slide-active');
        let $cityActive = $('#city .swiper-slide-active');
        let $chosenCityText = '';

        this.province = $provinceActive.text();
        this.city = $cityActive.text();
        $chosenCityText = `<span class="province-text">
        ${this.province}</span>&nbsp;<span class="city-text">${this.city}</span>`;
        this.selector.$chosenCity.find('.inp').html($chosenCityText);
        this.selector.$citySwiper.hide();
    }

    defaultPic() {
        let myImage = new Image(),
            avatar;

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

    modifyInp() {
        this.ajax({
            url: '/home/family/modify',
            data: {
                nickName: this.selector.$nickName.val(),
                gender: this.selector.$gender.val(),
                birthday: this.selector.$birthday.val(),
                height: this.selector.$height.val(),
                weight: this.selector.$weight.val(),
                province: this.province,
                city: this.city,
            },
        }).then(result => {
            if (result && result.code === 200) {
                location.href = location.href;
            } else {
                tip.show(result.message);
            }
        }).catch(error => {
            tip.show(error);
        });
    }

    chosenCity() {
        this.getCity();
        this.selector.$citySwiper.show();
    }

    getCity() {
        this.ajax({
            url: '/home/family/userInfo/getCity',
            data: {
                id: this.CityId
            }
        }).then(result => {
            if (this.CityId === 0) {
                this.selector.$province.append(this.view.cityRender(result));
                new CitySwiper({
                    lineNum: 5, // 每列行数
                    centeredSlides: true, // 剧中显示
                    hidePartingLine: false // 隐藏两条分割线
                });
            } else {
                this.selector.$city.empty();
                this.selector.$city.append(this.view.cityRender(result));
            }
        }).catch(error => {
            console.error(error);
        });
    }
}

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