{% extends "mobileui/mobile_base.html" %}
{% block title %}
申购设定
{% endblock %}
{% block css %}
<style>
    .pagelet {
        padding:0;
    }
    p.explain {
        font-size: 15px;
        color: #c9151e;
        margin:0;
        padding:20px 10px;
        line-height:23px;
        background:#F9F9F9;
    }
    .pure-form-aligned .pure-control-group label{
        margin-top:0;
        margin-bottom:0;
    }
    .labeltitle {
        color:#929292;
        line-height:22px;
        padding:20px 10px 10px 10px;
        background-color:#F3F3F3;
    }
    .pure-form-aligned .pure-control-group{
        margin-bottom:0;
    }
    #agreementlabel a {
        color: black;
    }
    .pure-form input[type="text"] {
        display: block;
        width:100%;
        height:60px;
        border-radius:0;
        box-shadow:none;
        border: 1px solid #D4D4D4;
        border-right:0px;
        border-left:0px;
        margin:0px;
        -webkit-appearance:none;
        outline:none;
    }
    .pure-form input[type="text"]:focus {
        outline:none;
        border: 1px solid #D4D4D4;
        border-right:0px;
        border-left:0px;
        -webkit-appearance:none;
    }
    
    .pure-control-group .bankradio {
        display: block;
        margin:0;
    }
    .radiobox-group .radiobox {
        margin:0;
        float: none;
        width: auto;
        height:85px;
        border-bottom:0;
        border-right:0;
        border-left:0;
    }
    .bankradio .radiobox dt {
        font-size:16px;
    }
    .bankradio .radiobox dd {
        font-size:15px;
        color:#929292; 
    }

    .pure-form button{
        height:60px;
        width:90%;
        border-radius:10px;
        font-size:18px;
        word-spacing:25px;
    }
    .pure-form input[type=radio] {
        display: none;
    }
    //.pure-form input[type=radio] + label{
    //}
    .pure-form input[type=radio] + label  dl:after{
        position:absolute;
        bottom:28px;
        right:20px;
        content: "\e901";
    }
    //.pure-form input[type=radio]:checked + label {
    //}
    .pure-form input[type=radio]:checked + label dl:after {
        position:absolute;
        bottom:28px;
        right:20px;
        content: "\e900";
        color: red;
    }
    .pure-form select {
        width:100%;
        border-radius:10px;
        height:60px; 
    }

    //@media screen and (max-width: 60.625em) {
    //    .pure-control-group .bankradio {
    //      display: block;
    //    }
    //    .bankradio .radiobox {
    //      width: auto;
    //    }
    //    .radiobox-group .radiobox {
    //      float: none;
    //    }
    //    input[type="text"],input[type="password"],select {
    //      width: 100%;
    //    }
    //}
</style>
{% endblock %}
{% block content %}
<div class="pagelet">
  <div class="pagelet_inner">
    <p class="explain">设定申购金额后，系统会在每月的固定日期按照设定的金额从银行卡中扣款，自动申购货币基金。</p>
    <div class="error-tip-wrapper"><div class="error-tip"><span></span><b></b><i></i></div></div>
    <form class="pure-form pure-form-aligned" method="POST" id="form">
        <div class="pure-control-group">
            <label class="labeltitle" for="tradeacco">选择银行卡</label>
            <div class="radiobox-group bankradio">
            <input type='radio' name='foo' value='1' id="foo1"/>
            <label for="foo1">
                <div class="radiobox iconf-select" data-tradeacco="111" data-serial="005" data-capitalmode="M">
                    <dl class="ico_jianshe">
                        <dt><span>中国工商银行</span></dt>
                        <dd><span>**** 8888</span></dd>
                    </dl>
                </div>
            </label>

            <input type='radio' name='foo' value='2' id="foo2"/>
            <label for="foo2">
                <div class="radiobox iconf-select" data-tradeacco="111" data-serial="005" data-capitalmode="M">
                    <dl class="ico_jianshe">
                        <dt><span>中国工商银行</span></dt>
                        <dd><span>**** 8888</span></dd>
                    </dl>
                </div>
            </label> 
            </div>
        </div>
        <div class="pure-control-group">
          {#<label for="amount" class="labeltitle">申购金额</label><input id="amount" name="amount" type="text" placeholder="请输入申购金额" data-validation="applyamount" data-notify="申购金额格式错误" value="">#}
          <label for="amount" class="labeltitle">设置申购比例</label>
            <select>
                <option>11</option>
                <option>11</option>
                <option>11</option>
                <option>11</option>
            </select>
        </div>
        <div class="pure-controls">
          <label for="agreement" class="pure-checkbox f12" id="agreementlabel">
              <input checked id="agreement" name="agreement" type="checkbox" placeholder="请同意《直销电子交易智能申购业务协议》" data-validation="boolean" data-notify-element="agreementlabel"> 我已阅读并同意《<a href="https://www.tkfunds.com.cn/assets/docs/%E4%B8%AD%E5%85%B4%E6%B3%B0%E5%BA%B7%E5%9F%BA%E9%87%91%E7%9B%B4%E9%94%80%E7%94%B5%E5%AD%90%E4%BA%A4%E6%98%93%E6%99%BA%E8%83%BD%E7%94%B3%E8%B4%AD%E4%B8%9A%E5%8A%A1%E5%8D%8F%E8%AE%AE.html" target="_blank">直销电子交易智能申购业务协议</a>》
          </label>
        </div>
        <div class="pure-controls">
          <button type="submit" class="pure-button pure-button-primary">设定</button>
        </div>
    </form>
  </div>
</div>
{% endblock %}
{% block js %}
<script>
    Spoon.use(['jquery', 'toolbox', 'form/submitter', 'panel/MessageBox'], function() {
        var $ = require('jquery'),
            Submitter = require('form/submitter'),
            MessageBox = require('panel/MessageBox'),
            ToolBox = require('toolbox');

        $(function() {
          var form = $('#form'),
          tradeaccoinput = $('input[name="tradeacco"]', form);
          //$('.bankradio div', form).click(function(){
          //  var self = $(this);
          //  $('.bankradio div', form).removeClass("checked");
          //  self.addClass("checked");
          //  tradeaccoinput.val(self.data('tradeacco'));
          //});
          $('#form').submit(Submitter(function(form){
              var done = function(data) {
                alert('设定成功');
                location.reload();
              };
              var el_amount = $('#amount');
              return {
                errorformat: {
                  2027 : el_amount
                },
                done: done
              };
          }));
      });
    });
</script>
{% endblock %}