import utils from 'somes';
import { React } from '../lib';
import { ViewController } from '../lib/ctr';
require('cport-nifty/css/demo/nifty-demo.css');
export default class Login extends ViewController {
    constructor() {
        super(...arguments);
        this._verificationtext = '获取验证码';
        this._disabledbtn = false;
        this.state = { $$url: '' };
    }
    triggerRemove() {
        clearTimeout(this.m_vcode_delay_id);
    }
    set_vcode_delay(vcode_delay) {
        vcode_delay--;
        if (vcode_delay) {
            this._verificationtext = vcode_delay + '秒';
            this._disabledbtn = true;
            this.forceUpdate();
            this.m_vcode_delay_id =
                setTimeout(() => this.set_vcode_delay(vcode_delay), 1000);
        }
        else {
            this._verificationtext = '获取验证码';
            this._disabledbtn = false;
            this.forceUpdate();
        }
    }
    async getVerificationCode() {
        if (this._disabledbtn)
            return;
        var iphone = this.getCheckPhone().replace(/\s+/g, '');
        await this.getVerificationCodeImpl(iphone);
        this.set_vcode_delay(61);
    }
    getCheckPhone() {
        var iphone = this.refs.uname.value;
        utils.assert(/^1[34578]\d{9}$/.test(iphone), '手机输入不正确');
        return iphone;
    }
    getCheckVcode() {
        var vcode = this.refs.upwd.value;
        utils.assert(/^\d{6}$/.test(vcode), '手机验证码输入不正确');
        return vcode;
    }
    showErrordialog(text) {
        alert(text);
    }
    phoneChange(e) {
    }
    triggerMounted() {
        var $imgHolder = $('#demo-bg-list');
        var $bgBtn = $imgHolder.find('.demo-chg-bg');
        var $target = $('#bg-overlay');
        var self = this;
        $bgBtn.on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var $el = $(this);
            if ($el.hasClass('active') || $imgHolder.hasClass('disabled'))
                return;
            if ($el.hasClass('bg-trans')) {
                self.setState({ $$url: '' });
                $target.css('background-image', 'none').removeClass('bg-img');
                $imgHolder.removeClass('disabled');
                $bgBtn.removeClass('active');
                $el.addClass('active');
                return;
            }
            $imgHolder.addClass('disabled');
            var url = ($el.attr('src') || '').replace('/thumbs', '');
            $('<img/>').load(url, function () {
                self.setState({ $$url: url });
                $target.css('background-image', 'url("' + url + '")').addClass('bg-img');
                $imgHolder.removeClass('disabled');
                $bgBtn.removeClass('active');
                $el.addClass('active');
                $(this).remove();
            });
        });
    }
    render() {
        const { admin } = this.props;
        return (React.createElement("div", { id: "container", className: "cls-container" },
            React.createElement("div", { id: "bg-overlay", className: this.state.$$url ? 'bg-img' : '', style: { backgroundImage: this.state.$$url ? `url(${this.state.$$url})` : 'none' } }),
            React.createElement("div", { className: "cls-content" },
                React.createElement("div", { className: "cls-content-sm panel" },
                    React.createElement("div", { className: "panel-body" },
                        React.createElement("div", { className: "mar-ver pad-btm" },
                            React.createElement("h3", { className: "h4 mar-no" }, this.props.title ? this.props.title : '后台管理系统')),
                        React.createElement("div", { className: "form-group" },
                            React.createElement("input", { type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u624B\u673A\u53F7", ref: "uname", autoFocus: true, onChange: (e) => this.phoneChange(e), maxLength: 11 })),
                        React.createElement("div", { className: "form-group", style: { position: 'relative' } },
                            React.createElement("input", { type: admin ? 'password' : 'text', maxLength: 6, className: "form-control", placeholder: admin ? '请输入密码' : '请输入验证码', ref: "upwd" }),
                            React.createElement("button", { className: "btn btn-default", style: { position: 'absolute', top: '1px', right: '1px', padding: '4px 12px', border: 'none', display: admin ? 'none' : 'block' }, onClick: () => { this.getVerificationCode(); }, disabled: this._disabledbtn ? true : false }, this._verificationtext)),
                        React.createElement("div", { className: "checkbox pad-btm text-left" }),
                        React.createElement("button", { className: "btn btn-primary btn-lg btn-block", type: "submit", onClick: () => { this.signin(); } }, "\u767B\u5F55")),
                    this.props.padAll == 'none' ? null :
                        React.createElement("div", { className: "pad-all" },
                            React.createElement("a", { href: "pages-password-reminder.html", className: "btn-link mar-rgt" }, "Forgot password ?"),
                            React.createElement("a", { href: "pages-register.html", className: "btn-link mar-lft" }, "Create a new account"),
                            React.createElement("div", { className: "media pad-top bord-top" },
                                React.createElement("div", { className: "pull-right" },
                                    React.createElement("a", { href: "#", className: "pad-rgt" },
                                        React.createElement("i", { className: "demo-psi-facebook icon-lg text-primary" })),
                                    React.createElement("a", { href: "#", className: "pad-rgt" },
                                        React.createElement("i", { className: "demo-psi-twitter icon-lg text-info" })),
                                    React.createElement("a", { href: "#", className: "pad-rgt" },
                                        React.createElement("i", { className: "demo-psi-google-plus icon-lg text-danger" }))),
                                React.createElement("div", { className: "media-body text-left" }, "Login with"))))),
            React.createElement("div", { className: "demo-bg" },
                React.createElement("div", { id: "demo-bg-list" },
                    React.createElement("div", { className: "demo-loading" },
                        React.createElement("i", { className: "psi-repeat-2" })),
                    React.createElement("img", { className: "demo-chg-bg bg-trans active", src: require('cport-nifty/img/bg-img/thumbs/bg-trns.jpg'), alt: "Background Image" }),
                    React.createElement("img", { className: "demo-chg-bg", src: require('cport-nifty/img/bg-img/thumbs/bg-img-1.jpg'), alt: "Background Image" }),
                    React.createElement("img", { className: "demo-chg-bg", src: require('cport-nifty/img/bg-img/thumbs/bg-img-2.jpg'), alt: "Background Image" }),
                    React.createElement("img", { className: "demo-chg-bg", src: require('cport-nifty/img/bg-img/thumbs/bg-img-3.jpg'), alt: "Background Image" }),
                    React.createElement("img", { className: "demo-chg-bg", src: require('cport-nifty/img/bg-img/thumbs/bg-img-4.jpg'), alt: "Background Image" }),
                    React.createElement("img", { className: "demo-chg-bg", src: require('cport-nifty/img/bg-img/thumbs/bg-img-5.jpg'), alt: "Background Image" }),
                    React.createElement("img", { className: "demo-chg-bg", src: require('cport-nifty/img/bg-img/thumbs/bg-img-6.jpg'), alt: "Background Image" }),
                    React.createElement("img", { className: "demo-chg-bg", src: require('cport-nifty/img/bg-img/thumbs/bg-img-7.jpg'), alt: "Background Image" })))));
    }
}
