<!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">
</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="formData" name="form">
        </form>
        <div class="btn" id="submit">提交申请Submit your application</div>
    </div>
</div>

<!--表单模板-->
<script type="text/x-handlebars-template" id="form-cell">
    <div class="form-item-cell">
        <p class="f13 label-text">您的姓名 Your name：</p>
        <div class="input-box form-input">
            <input class="weui-input f14" type="" id="name" name="name" placeholder="" value="{{name}}">
        </div>
    </div>
    <div class="form-item-cell">
        <p class="f13 label-text">您的邮箱 Your email：</p>
        <div class="input-box form-input">
            <input class="weui-input f14" type="" id="email" name="email" placeholder="" value="{{email}}">
        </div>
    </div>
    <div class="form-item-cell">
        <p class="f13 label-text">本次需求的入账成本中心<br/>Cost center allocated for your order：</p>
        <div class="input-box form-input-input">
            <input class="weui-input f14" type="" id="cost0" name="cost0" placeholder="" value="{{costCenter0}}">
            <span class="sq-line f14">-</span>
            <input class="weui-input f14" type="" id="cost1" name="cost1" placeholder="" value="{{costCenter1}}">
        </div>
    </div>
    <div class="form-item-cell">
        <p class="f13 label-text">所在部门 Division/Department：</p>
        <div class="input-box form-picker">
            <input class="weui-input f14" readonly="" id="dept" name="dept" placeholder="请选择" value="{{departmentName}}"> <span class="picker-icon"></span>
        </div>
    </div>
    <div class="form-item-cell">
        <p class="f13 label-text">您的直属领导姓名 Your line manager：</p>
        <div class="input-box form-input">
            <input class="weui-input f14" type="" id="line" name="line"  value="{{lineManager}}" placeholder="">
        </div>
    </div>
    <div class="form-item-cell">
        <p class="f13 label-text">您的直属领导邮箱 Your line manager’s email：</p>
        <div class="input-box form-input">
            <input class="weui-input f14" type="" id="lineEmail" name="lineEmail" value="{{lineManagerEmail}}" placeholder="">
        </div>
    </div>
    <div class="form-item-cell">
        <p class="f13 label-text">是否需要制作 Printing/production required:</p>
        <div class="input-box form-switch">
            <div class="weui-cell__ft">
                {{#if isMake}}
                <input class="weui-switch" type="checkbox" id="production" name="production" value="true" checked onclick="onSwitch(this)">
                {{else}}
                <input class="weui-switch" type="checkbox" id="production" name="production" value="false" onclick="onSwitch(this)">
                {{/if}}
            </div>
        </div>
    </div>
    <div class="form-slot" id="slot"></div>
    <div class="form-item-cell">
        <p class="f13 label-text">请选择您的需求类别 Please select a service category:</p>
        <div class="input-box form-picker">
            <input class="weui-input f14" readonly="" id="category" name="category" placeholder="请选择" value="{{categoryName}}"> <span class="picker-icon"></span>
        </div>
    </div>
    <div id="materialDiv">
        <p id='materialMsg' class="f13 label-text" style="color: #646464;">{{msg}}</p>
        {{#each details}}
        <div class="form-item-cell">
            <div class="input-box form-checkBox">
                <div class="check-box f14 checked">
                    <div class="check-state-box" onclick="checked(this)" data-prop="{{materialId}}" data-text="{{materialName}}">
                        <span class="check-icon"><img src="data:image/png;base64, "></span>
                        <span class="check-text">{{materialName}}</span>
                    </div>
                    {{#if ../isMake}}
                    <div class="count-box weui-count" style="display:block">
                        <span class="count-btn weui-count__decrease" onclick="decrease(this)">-</span>
                        <input class="weui-count__number" type="number" id="{{materialId}}" name="{{materialId}}" value="{{quantity}}" data-status="true">
                        <span class="count-btn weui-count__btn weui-count__increase" onclick="increase(this)">+</span>
                    </div>
                    {{else}}
                    <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="{{materialId}}" name="{{materialId}}" value="{{quantity}}" data-status="true">
                        <span class="count-btn weui-count__btn weui-count__increase" onclick="increase(this)">+</span>
                    </div>
                    {{/if}}

                </div>
            </div>
        </div>
        {{/each}}
    </div>


    <div class="form-item-cell">
        <p class="f13 label-text">您期望的交付日期 Expected delivery date：</p>
        <div class="input-box form-date">
            <input type="text" readonly="" class="f14" id="delivery" name="delivery" placeholder="请选择时间" value="{{deliveryDateStr}} "> <span class="picker-icon"></span>
        </div>
    </div>
    <div class="form-item-cell">
        <p class="f13 label-text">请说明需求用途 Briefly explain the reason for use：</p>
        <div class="input-box form-textarea">
            <textarea class="weui-textarea f14" id="explain" name="explain" placeholder="" rows="5">{{requireSpecify}}</textarea>
        </div>
    </div>
   <!-- <div class="form-item-cell">
        <p class="f13 label-text">其他备注 Remarks</p>
        <div class="input-box form-textarea">
            <textarea class="weui-textarea f14" id="remarks" name="remarks" placeholder="" rows="5">{{description}}</textarea>
        </div>
    </div>-->
</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/components/dateUtils.js"></script>
<script src='javascript/pages/wx-brand-update.js?v=20200409'></script>

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

    /**表单组件调用方法**/
    function onSwitch(that) {
        var arr = $('#formData').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>