<!DOCTYPE html>
<html lang="zh-CN">
<head>
    {include file="public/head"}

    <link href="/system/frame/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="/system/frame/css/style.min.css?v=3.0.0" rel="stylesheet">
    <title>{$title|default=''}</title>
    <style>
        .check{color: #f00}
        .demo-upload{
            display: block;
            height: 33px;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0,0,0,.2);
            margin-right: 4px;
        }
        .demo-upload img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .demo-upload-cover{
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.6);
        }
        .demo-upload:hover .demo-upload-cover{
            display: block;
        }
        .demo-upload-cover i{
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
        }
        .code-send{
            cursor: pointer;
        }
    </style>
    <script>
        window.test=1;
    </script>
</head>
<body>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>短信账号注册</h5>
                </div><div id="store-attr" class="mp-form" v-cloak="">
                    <i-Form :label-width="80" style="width: 100%">
                        <template >
                            <template >
                                <Form-Item>
                                    <Row>
                                        <i-Col span="13">
                                            <span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span><i-Input placeholder="短信平台账号" v-model="form.account" style="width: 80%" type="text"></i-Input>
                                        </i-Col>
                                    </Row>
                                </Form-Item>
                                <Form-Item>
                                    <Row>
                                        <i-Col span="13">
                                            <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span><i-Input placeholder="短信平台密码/token" v-model="form.password" style="width: 80%" type="password"></i-Input>
                                        </i-Col>
                                    </Row>
                                </Form-Item>
                                <Form-Item>
                                    <Row>
                                        <i-Col span="13">
                                            <span>域&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span><i-Input placeholder="网址域名" v-model="form.url" style="width: 80%"></i-Input>
                                        </i-Col>
                                    </Row>
                                </Form-Item>
                                <Form-Item>
                                    <Row>
                                        <i-Col span="13">
                                            <span>&nbsp;&nbsp;&nbsp;&nbsp;手机号：</span><i-Input placeholder="注册手机号" v-model="form.phone" style="width: 80%"></i-Input>
                                        </i-Col>
                                    </Row>
                                </Form-Item>
                                <Form-Item>
                                    <Row>
                                        <i-Col span="13">
                                            <span>短信签名：</span><i-Input placeholder="短信签名 例如:CRMEB" v-model="form.sign" style="width: 80%"></i-Input>
                                        </i-Col>
                                    </Row>
                                </Form-Item>
                                <Form-Item>
                                    <Row>
                                        <i-Col span="13">
                                            <span style="float: left">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</span>
                                            <i-Input placeholder="验证码" v-model="form.code" style="width: 80%">
                                                <span slot="append" @click="sendCode" v-text="codeMsg" class="code-send"></span>
                                            </i-Input>
                                        </i-Col>
                                    </Row>
                                </Form-Item>
                            </template>
                            <Form-Item>
                                <Row>
                                    <i-Col span="8" offset="6">
                                        <i-Button type="primary" @click="submit">提交</i-Button>
                                    </i-Col>
                                </Row>
                            </Form-Item>
                        </template>
                    </i-Form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var _vm ;
    mpFrame.start(function(Vue){
        new Vue({
            data () {
                return {
                    codeUrl : "{:Url('captcha')}",
                    codeMsg : "发送验证码",
                    form:{
                        account:'',
                        password:'',
                        url:'',
                        sign:'',
                        phone:'',
                        code:'',
                    },
                    isSend:true,
                }
            },
            methods: {
                isPhone:function(test){
                    var reg = /^1[3456789]\d{9}$/;
                    return reg.test(test);
                },
                sendCode:function(){
                    var that = this;
                    if(!that.isSend) return;
                    if(!that.form.phone.length){
                        $eb.message('error','请填写手机号');
                        return false;
                    }
                    if(!that.form.sign || !that.form.sign.length){
                        $eb.message('error','请填写短信签名');
                        return false;
                    }
                    if(!that.isPhone(that.form.phone)){
                        $eb.message('error','手机号格式错误');
                        return false;
                    }
                    that.isSend = false;
                    $eb.axios.post(that.codeUrl,{phone:that.form.phone}).then(function(res){
                        if(res.data.code == 200){
                            var cd = 60;
                            var timeClone = setInterval(function () {
                                cd--;
                                if(cd <= 0){
                                    that.codeMsg = '重新发送';
                                    clearInterval(timeClone);
                                    that.isSend=true;
                                }else{
                                    that.isSend = false;
                                    that.codeMsg = '剩余'+cd+'s';
                                }
                            },1000);
                            $eb.message('success',res.data.msg || '发送成功');
                        }else{
                            $eb.message('error',res.data.msg || '发送失败');
                        }
                        return false;
                    }).catch(function(err){
                        that.isSend = false;
                        $eb.message('error',err);
                    })
                },
                submit(){
                    var that = this;
                    $eb.axios.post("{:Url('save')}",that.form).then(function(res){
                        if(res.status == 200 && res.data.code == 200){
                            $eb.message('success',res.data.msg || '提交成功!');
                            $eb.closeModalFrame(window.name);
                            location.href = "{:url('sms.smsConfig/index', array('type'=>4, 'tab_id'=>18))}";
                        }else{
                            $eb.message('error',res.data.msg || '请求失败!');
                        }
                    }).catch(function(err){
                        $eb.message('error',err);
                    })
                },
            },
            mounted (){

            }
        }).$mount(document.getElementById('store-attr'));
    });
</script>
</body>