<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>品牌服务</title>
    <script src='javascript/components/flexible.js'></script>
    <link rel="stylesheet" href="style/share/reset.css">
    <link rel="stylesheet" href="style/share/weui.min.css">
    <link rel="stylesheet" href="style/share/jquery-weui.css">
    <link rel="stylesheet" href="style/share/datePicker.css">
    <link rel="stylesheet" href="style/page/common.css">
    <link rel="stylesheet" href="style/pageCss/brand-application.css?v=20200320">
    <style>
        .weui-dialog__hd{
            padding: 0.1em 1.6em .5em !important;
        }
        .tempTextdoc{
            overflow: inherit;
            display: none;
        }
        .tempTextdoc .weui-dialog__title{
            font-size: 15px;
        }
        .tempTextdoc .weui-dialog__bd{
            text-align: left;
            color: #333333;
            height: 7rem;
            overflow: scroll;
            margin-bottom: 0.7rem;
            font-size: 13px;
        }
        .tempTextdoc .weui-dialog__ft{
            position: absolute;
            bottom: 0px;
            width:100%;
        }
        .pdt10{
            padding-top: 23px;
        }

        .weui-dialog__bd {
            padding: 0 1.6em .8em;
            min-height: 40px;
            font-size: 15px;
            line-height: 1.3;
            word-wrap: break-word;
            word-break: keep-all;
            color: #999;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="weui-mask weui-mask--visible diymask" style="display: none"></div>
    <div class="content" id="maincontent">
        <header class="bg-white box-center-center" style="    height: 1.25rem;"><img src="image/logo.png" alt="" style="width: 3.8438rem;"></header>
        <form class="application-form-wrap" id="form-wrap" name="form">
        </form>
        <div class="btn" id="submit">提交申请Submit your application</div>
    </div>

    <div style="width: 1.0667rem;height: 1.0667rem;border-radius: 100%;position: fixed;z-index: 500;
    bottom: 4.5rem;right: 0.4rem" class="mark">
        <img src="image/brandApplyModal.png" style=" width: 100%;height: 100%;position: absolute;top:50%; left:50%;transform: translate(-50%,-50%)">
    </div>
</div>

<!--表单模板-->
<script type="text/x-handlebars-template" id="form-cell">
    {{#each this}}

    {{#if_eq type "materialDiv"}}
    <div id="materialDiv"></div>
    {{else}}
    <div class="form-item-cell">
        {{#if label}}
        <p class="f13 label-text">{{{label}}}：</p>
        {{/if}}
        <div class="input-box form-{{type}}">
            {{#if_eq type "input"}}
            <input class="weui-input f14" type="{{subType}}" id="{{prop}}" name="{{prop}}" placeholder="{{placeholder}}">
            {{/if_eq}}

            {{#if_eq type "input-input"}}
            <input class="weui-input f14" type="{{subType}}" id="{{prop}}0" name="{{prop}}0" placeholder="{{placeholder0}}">
            <span class="sq-line f14">-</span>
            <input class="weui-input f14" type="{{subType}}" id="{{prop}}1" name="{{prop}}1" placeholder="{{placeholder1}}">
            {{/if_eq}}

            {{#if_eq type "textarea"}}
            <textarea class="weui-textarea f14" id="{{prop}}" name="{{prop}}" placeholder="{{placeholder}}" rows="5"></textarea>
            {{/if_eq}}

            {{#if_eq type "switch"}}
            <div class="weui-cell__ft">
                <input class="weui-switch" type="checkbox" id="{{prop}}" name="{{prop}}" value="false" onclick="onSwitch(this)">
            </div>
            {{/if_eq}}

            {{#if_eq type "picker"}}
            <input class="weui-input f14" readonly id="{{prop}}" name="{{prop}}" placeholder=""/> <span class="picker-icon"></span>
            {{/if_eq}}

            {{#if_eq type "date"}}
            <input type="text" readonly class="f14" id="{{prop}}" name="{{prop}}" placeholder="" /> <span class="picker-icon"></span>
            {{/if_eq}}

        </div>
    </div>
    {{/if_eq}}
    {{/each}}
</script>

<script  type="text/x-handlebars-template" id="material-cell">
    <p id='materialMsg' class="f13 label-text" style="color: #646464;">{{msg}}</p>
    {{#each this}}
    <div class="form-item-cell materialObj">
        <div class="input-box form-checkBox">
            <div class="check-box f14">
                <div class="check-state-box" onclick="checked(this)" data-prop="{{id}}" data-text="{{name}}">
                    <span class="check-icon"><img src="data:image/png;base64, "></span>
                    <span class="check-text">{{name}}</span>
                </div>
                <div class="count-box weui-count" style="display: none">
                    <span class="count-btn weui-count__decrease" onclick="decrease(this)">-</span>
                    <input class="weui-count__number" type="number" id="{{id}}" name="{{id}}" value="0"/>
                    <span class="count-btn weui-count__btn weui-count__increase" onclick="increase(this)">+</span>
                </div>
            </div>
        </div>
    </div>
    {{/each}}
</script>
</body>

<script src='javascript/components/jquery-2.2.4.min.js'></script>
<script src="javascript/components/handlebars.min-latest.js"></script>
<script src="javascript/crypto-js-master/crypto-js.js"></script>
<script src="javascript/components/cryptomain.js"></script>
<script src='javascript/components/g.js'></script>
<script src='javascript/components/jquery-weui.js'></script>
<script src='javascript/components/niceClick.js'></script>
<script src='javascript/components/fastclick.js'></script>
<script src='https://res.wx.qq.com/open/js/jweixin-1.2.0.js'></script>
<script src='javascript/components/StringValidateUtils.js?vt=20171221'></script>
<script src='javascript/components/mcfApp.js'></script>
<script src='javascript/components/iscroll.js'></script>
<script src='javascript/components/datePicker.js'></script>
<script src='javascript/pages/wx-brand-application.js?v=20200422'></script>

<script>
    var devMode = G.devMode();
    var bindNextEvent = function (app) {
        var brandApplicationApp=new brandApplication({
            devMode: devMode,
            cfApp: app
        });
        brandApplicationApp.init();
    };
    var cfapp = new cfApp({
        devMode: devMode,
        initWxApi: false,
        nextAction: bindNextEvent,
        vt: new Date().getTime()
    });
    cfapp.init();

    /**表单组件调用方法**/
    function onSwitch(that) {
        var arr = $('#form-wrap').find(".weui-count")
        if ($(that).is(':checked')) {
            $(that).val(true)
            if (arr && arr.length) {
                for (var i = 0; i < arr.length; i++) {
                    $(arr[i]).css('display','block')
                }
            }
            $("#materialMsg").html('请勾选左侧需求项，如需制作请在右方输入数量。' +
                'Click left to select a Service, then click right to select a quantity ');

        } else {
            $(that).val(false)
            if (arr && arr.length) {
                for (var i = 0; i < arr.length; i++) {
                    $(arr[i]).css('display','none')
                }
            }
            $("#materialMsg").html('请先勾选左侧需求项 please select a Service from below (see left side options)');
        }
    }
    function checked(that) {
        if ($(that).parent().hasClass('checked')) {
            $(that).parent().removeClass('checked')
            var $input = $(that).parent().find('.weui-count__number')
            $input.val(0)
            $input.attr('data-status',false);
            $(that).find("input[name="+$(that).data().prop + "Text]").remove()
        } else {
            var $input = $(that).parent().find('.weui-count__number')
            $input.attr('data-status',true);
            $(that).parent().addClass('checked')
            $(that).append(`<input type="hidden" name='${$(that).data().prop}Text' value='${$(that).data().text}'>`);
        }
    }
    function decrease(that) {
        var $input = $(that).parent().find('.weui-count__number')
        var number = parseInt($input.val() || "0") - 1
        if (number < 0) number = 0;
        $input.val(number)
    }
    function increase(that) {
        var $input = $(that).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") + 1
        $input.val(number)
    }
    /******end******/
</script>

</html>