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

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

        this.view = {
            cityRender
        };

        this.init();
        this.CityId = 0;
    }

    init() {
        this.bindEvents();
        this.on('citySwiperCb', (event, 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();
    }

    bindEvents() {
        this.selector.$chosenCity.on('click', this.chosenCity.bind(this));
        this.selector.$modifyInp.on('blur', this.modifyInp.bind(this));
        this.selector.$cancelBtn.on('click', this.cancelFun.bind(this));
        this.selector.$okBtn.on('click', this.okFun.bind(this));
    }

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

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

        this.selector.$chosenCity.find('.inp').text($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()
            },
        }).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({
                    swiperNum: 2, // swiper列数
                    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();
});