<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="__CSS__/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="__CSS__/common.css" media="all">
    <link rel="stylesheet" type="text/css" href="__CSS__/style.css" media="all">
    <link rel="stylesheet" type="text/css" href="__CSS__/default_color.css" media="all">
    <link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
    <link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="__CSS__/select2.min.css" type="text/css" />

    <script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="__JS__/select2.min.js"></script>
    <script type="text/javascript" src="__STATIC__/layer3/layer.js"></script>
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
    <script src="__STATIC__/juicer-min.js" type="text/javascript"></script>
</head>
<style>
    html {
        min-width: 100%;
    }

    body {
        padding: 0px 0px 150px;
        width: 960px;
        margin: auto;

    }

    .tabcon1711 table {
        width: 480px;
    }

    table {

        margin: auto;
    }

    .hidebox {
        display: none;
    }

    .r {
        width: 300px;
    }

    .l {
        width: 180px;
    }

    .select2-container--default .select2-selection--single {
        color: #000;
        resize: none;
        border-width: 1px;
        border-style: solid;
        border-color: #a7b5bc #ced9df #ced9df #a7b5bc;
        box-shadow: 0px 3px 3px #F7F8F9 inset;
        height: 35px;
        height: 28px;
        border-radius: 3px;
        font-size: 12px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 35px;
        line-height: 28px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 26px;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        height: 26px;
        line-height: 26px;
        font-size: 12px;
    }

    .select2-results__option[aria-selected] {
        font-size: 12px;
    }

    .input-list,
    .i_list {
        float: left;
        margin: 0;
    }
</style>

<body>
    <!-- <div style="width: 100%;line-height: 100px;font-size: 25px;font-weight: 600;text-align: center;">
        海南万盟天下科技有限公司
    </div> -->
    <div style="display: flex;margin: auto;">
        <div class="tab-content tabcon1711" id="firstPartBaseInfo">
            <table border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="l">甲方:</td>
                        <td class="r">
                            <div class="input-list input-list-game search_label_rehab">
                                <select id="first_partner_id" name="partner_id" class="select_gallery">
                                    <option value="{$data['first_party_info']['id']}" selected>{$data['first_party_info']['partner']}</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                <tbody id="first_part_bser_info_show">
                    <tr>
                        <td class="l">联系人:</td>
                        <td class="r">
                            <input type="text" class="txt" name="link_man" value="" placeholder="请输入联系人">
                        </td>
                    </tr>
                    <tr>
                        <td class="l">联系电话:</td>
                        <td class="r">
                            <input type="text" class="txt" name="link_phone" value="" placeholder="请输入联系电话">
                        </td>
                    </tr>
                    <tr>
                        <td class="l">邮寄地址:</td>
                        <td class="r">
                            <input type="text" class="txt" name="address" value="" placeholder="请输入地址">
                        </td>
                    </tr>
                    <tr>
                        <td class="l">公司税号:</td>
                        <td class="r">
                            <input type="text" class="txt" name="company_tax_no" value="" placeholder="请输入公司税号">
                        </td>
                    </tr>
                </tbody>
                </tbody>
            </table>
        </div>
        <div class="tab-content tabcon1711" id="secondPartBaseInfo">
            <table border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td class="l">乙方:</td>
                        <td class="r">
                            <div class="input-list input-list-game search_label_rehab">
                                <select id="second_partner_id" name="partner_id" class="select_gallery">
                                    <option value="{$data['second_party_info']['id']}" selected>{$data['second_party_info']['partner']}</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                <tbody id="second_part_bser_info_show">
                    <tr>
                        <td class="l">联系人:</td>
                        <td class="r">
                            <input type="text" class="txt" name="link_man" value="" disabled="disabled"
                                placeholder="请先选择合作公司">
                        </td>
                    </tr>
                    <tr>
                        <td class="l">联系电话:</td>
                        <td class="r">
                            <input type="text" class="txt" name="link_phone" value="" disabled="disabled"
                                placeholder="请先选择合作公司">
                        </td>
                    </tr>
                    <tr>
                        <td class="l">邮寄地址:</td>
                        <td class="r">
                            <input type="text" class="txt" name="address" value="" disabled="disabled"
                                placeholder="请先选择合作公司">
                        </td>
                    </tr>
                    <tr>
                        <td class="l">公司税号:</td>
                        <td class="r">
                            <input type="text" class="txt" name="company_tax_no" value="" disabled="disabled"
                                placeholder="请先选择合作公司">
                        </td>
                    </tr>
                </tbody>
                </tbody>
            </table>
        </div>
    </div>
    <div style="padding: 30px 0px 10px;display: block;height:30px;">
        <div class="input-list input-list-server search_label_rehab">
            <p style="font-size: 20px;font-weight: 600;">支付给:<spen style="margin-left: 15px;font-size: 16px;">{$data.company_name}
                </spen>
            </p>
        </div>

    </div>
    <div class="data_list box_mt" style="margin-top: 40px;">
        <div class="">
            <table>
                <thead>
                    <tr>
                        <th style="border-right: solid 1px #b6cad2;">结算时间</th>
                        <th style="border-right: solid 1px #b6cad2;">产品</th>
                        <th style="border-right: solid 1px #b6cad2;">平台总额(元)</th>
                        <if condition="$data['withdraw_type'] eq 2">
                            <th style="border-right: solid 1px #b6cad2;">补点比例</th>
                        <else />
                            <th style="border-right: solid 1px #b6cad2;">分成比例</th>
                        </if>
                    
                        <th style="border-right: solid 1px #b6cad2;">税费费率</th>
                        <th >结算金额(元)</th>
                    </tr>
                </thead>

                <!-- 列表 -->
                <tbody id="statementInit" class="">
                    <tr style="height: 100px;">
                        <td colspan=8>
                            请先选择生成条件后点击生成对账数据
                        </td>
                    </tr>
                </tbody>

                <tbody id="statementShow">

                </tbody>
            </table>
        </div>
    </div>
    <div id="partpatinfo" style="display: flex;margin: auto;">
        <div class="tab-content tabcon1711" id="skf_payinfo">
            <div class="tab-content tabcon1711" id="skf_payinfo">
                <table  border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td class="l">收款方名称:</td>
                            <td class="r">
                                <input type="text" class="txt" name=""  disabled="disabled" placeholder="" value="{$data.payinfo.payee_name}">
                            </td>
                        </tr>
                        <tr>
                            <td class="l">银行账号:</td>
                            <td class="r">
                                <input type="text" class="txt" name="" value="{$data.payinfo.bank_account}" disabled="disabled" placeholder="">
                            </td>
                        </tr>
                        <tr>
                            <td class="l">开户行:</td>
                            <td class="r">
                            <input type="text" class="txt" name="password" value="{$data.payinfo.opening_bank}" disabled="disabled" placeholder="请先选择支付给谁">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-content tabcon1711" id="fkf_payinfo">
                <table  border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td class="l">开票项目:</td>
                            <td class="r">
                                <input type="text" class="txt" disabled="disabled" placeholder=""  name="invoice_item" value="{$data.payinfo.invoice_content}">
                            </td>
                        </tr>
                        <tr>
                            <td class="l">发票类型:</td>
                            <td class="r">
                                <div class="input-list input-list-game search_label_rehab">
                                    <select id="invoice_type" name="invoice_type" class="select_gallery" disabled>
                                        <option value="0" <if condition="$data['payinfo']['invoice_type'] eq 0">selected</if>>无</option>
                                        <option value="1" <if condition="$data['payinfo']['invoice_type'] eq 1">selected</if>>专票</option>
                                        <option value="2" <if condition="$data['payinfo']['invoice_type'] eq 2">selected</if>>普票</option>
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>   
    </div>
    <div class="search_list" style="display:flex;justify-content:flex-end;width:960px;">
        <div class="input-list" style="margin-left: 30px;float: right;">
            <a class="sch-btn" href="javascript:;" id="createStatement" style="width: 150px;">确认修改</a>
        </div>
    </div>

    <script type="text/html" id="partbasetpl">
    <tr>
        <td class="l">联系人:</td>
        <td class="r">
            <input type="text" class="txt normalchange" data-change="${type}.link_man" name="link_man"  value="${link_man|nonull}" placeholder="请输入联系人">
        </td>
    </tr>
    <tr>
        <td class="l">联系电话:</td>
        <td class="r">
        <input type="text" class="txt normalchange" name="link_phone" data-change="${type}.link_phone" value="${link_phone|nonull}" placeholder="请输入联系电话">
        </td>
    </tr>
    <tr>
        <td class="l">邮寄地址:</td>
        <td class="r">
            <input type="text" class="txt normalchange" name="address" data-change="${type}.address" value="${address|nonull}" placeholder="请输入地址">
        </td>
    </tr>
    <tr>
        <td class="l">公司税号:</td>
        <td class="r">
            <input type="text" class="txt normalchange" name="company_tax_no" data-change="${type}.company_tax_no" value="${company_tax_no|nonull}" placeholder="请输入公司税号">
        </td>
    </tr>
</script>
<script type="text/html" id="partpaytpl">
    <div class="tab-content tabcon1711" id="skf_payinfo">
        <table  border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td class="l">收款方名称:</td>
                    <td class="r">
                        <input type="text" class="txt normalchange" data-change="${type}.payee_name" name="payee_name" placeholder="" value="${party_info.payee_name}">
                    </td>
                </tr>
                <tr>
                    <td class="l">银行账号:</td>
                    <td class="r">
                        <input type="text" class="txt normalchange" data-change="${type}.bank_account" name="bank_account" value="${party_info.bank_account}" placeholder="">
                    </td>
                </tr>
                <tr>
                    <td class="l">开户行:</td>
                    <td class="r">
                    <input type="text" class="txt normalchange" data-change="${type}.opening_bank" name="opening_bank" value="${party_info.opening_bank}" placeholder="请先选择支付给谁">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="tab-content tabcon1711" id="fkf_payinfo">
        <table  border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td class="l">开票项目:</td>
                    <td class="r">
                        <input type="text" class="txt normalchange" data-change="${type}.invoice_content" name="invoice_content" placeholder="" value="${party_info.invoice_content}">
                    </td>
                </tr>
                <tr>
                    <td class="l">发票类型:</td>
                    <td class="r">
                        <div class="input-list input-list-game search_label_rehab">
                            <select id="invoice_type" name="invoice_type" data-change="${type}.invoice_type" class="select_gallery">
                                {@if party_info.invoice_type==0}
                                <option value="0" selected>无</option>
                                <option value="1">专票</option>
                                <option value="2">普票</option>
                                {@/if}
                                {@if party_info.invoice_type==1}
                                <option value="0">无</option>
                                <option value="1" selected>专票</option>
                                <option value="2">普票</option>
                                {@/if}
                                {@if party_info.invoice_type==2}
                                <option value="0">无</option>
                                <option value="1">专票</option>
                                <option value="2" selected>普票</option>
                                {@/if}
                            </select>
                        </div>
                        <!-- <input type="text" class="txt" disabled="disabled" placeholder="" name="invoice_type" value="{$data.payinfo.invoice_type}"> -->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</script>
<script type="text/html" id="statementTpl">
    {@each statement_info as it,index}
        <tr>
            <td>${it.statement_begin_time}~${it.statement_end_time}</td>
            <td>${it.game_name}</td>
            {@if it.statement_type==1}
                <td>-${it.pay_amount}元</td>
            {@else}
                <td>${it.pay_amount}元</td>
            {@/if}
            
            {@if it.statement_type==0}
                {@if withdraw_type==2}
                 <td><input type="text" class="txt statementchange" name="increment_ratio" data-index ="${index}" data-change="statement_info[${index}]['increment_ratio']" value="${it.increment_ratio}" style="width: 40px;">%</td>
                {@else}
                <td><input type="text" class="txt statementchange" name="ratio" data-index ="${index}" data-change="statement_info[${index}]['ratio']" value="${it.ratio}" style="width: 40px;">%</td>
                {@/if}
                <td><input type="text" class="txt statementchange" name="fax_ratio" data-index ="${index}" data-change="statement_info[${index}]['fax_ratio']" value="${it.fax_ratio}" style="width: 40px;">%</td>
            {@else}
                <td></td>
                <td></td>
            {@/if}
            {@if it.statement_type==1}
                <td>-${it.sum_money}元</td>
            {@else}
                <td>${it.sum_money}元</td>
            {@/if}
        </tr>
    {@/each}

    <tr>
        <td>合计</td>
        <td></td>
        <td>${pay_amount}元</td>
        <td></td>
        <td></td>
        <td>${statement_money}元</td>
    </tr>
    <tr>
        <td colspan=5>本月分成总金额(人民币大写):</td>
        <td>${statement_money|number_chinese}</td>
    </tr>
</script>
    <script>
        $(function () {
            TPLSHOW.juicerInit();
            $(".select_gallery").select2();
            $('#time_start').datetimepicker({
                format: 'yyyy-mm-dd',
                language: "zh-CN",
                minView: 2,
                autoclose: true
            });

            $('#datetimepicker').datetimepicker({
                format: 'yyyy-mm-dd',
                language: "zh-CN",
                minView: 2,
                autoclose: true,
                pickerPosition: 'bottom-left'
            })
            EVENT.changeCompany();
            EVENT.createStatement();
            $("#first_partner_id").change();
            // $("#second_partner_id").change();

        });
        //基础类
        var PUBLIC = {
            postData(url, data, callback) {
                $.ajax({
                    url: url,
                    data: data,
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        callback(data)
                    }
                })
            },
            floatAdd(a,b){
                return Math.round(a*100+b*100)/100;
            },
            floatCut(a,b){
                return Math.round(a*100-b*100)/100;
            },
            CompanyKeyName:{
                id:"公司表id",
                partner:"公司名称",
                link_man:'联系人',
                link_phone:"联系电话",
                address:'邮寄地址',
                company_tax_no:'公司税号',
                payee_name:'名称',
                bank_account:"银行账号",
                opening_bank:"开户行"
            }
        }
        //数据类
        
        var DATAOBJ = {$data|json_encode=###,JSON_UNESCAPED_UNICODE};    
        var YDATAOBJ = {$data|json_encode=###,JSON_UNESCAPED_UNICODE};        
        //事件类
        var EVENT = {
            changeCompany() {
                $("#first_partner_id").on("change", function () {
                    TPLSHOW.firstPartInfo(DATAOBJ.first_party_info);
                    TPLSHOW.secondPartInfo(DATAOBJ.second_party_info);
                    TPLSHOW.showPartPayInfo();
                    TPLSHOW.showStatementList(true);
                })
                $("#first_partner_id").on("change", function () {
                    TPLSHOW.secondPartInfo(DATAOBJ.second_party_info);
                })
            },
            createStatement() {
                $("#createStatement").on("click", function () {
                    //TODO:验证信息
                    layer.load(2);
                    PUBLIC.postData("{:U('editStatement')}",DATAOBJ,function(data){
                        if(data.code == 0){
                            layer.closeAll('loading');
                            layer.msg('修改成功');
                            setTimeout(function(){
                              window.parent.reload();
                            },350);
                        }else{
                            alert("修改失败,请联系管理员")
                        }
                    });
                    //发送添加请求
                })
            },
            normalchange() {
                $(".normalchange").off("blur");
                $("#invoice_type").off("change");
                $(".normalchange").on("blur", function () {
                    var val = $(this).val();
                    var index = $(this).data("change");
                    var str = "DATAOBJ." + index + "='" + val + "';";
                    eval(str);
                    if (val !== eval("YDATAOBJ." + index)) {
                        isedit = true;
                    }
                })
                $("#invoice_type").on("change",function(){
                    var val = $(this).val();
                    var index = $(this).data("change");
                    var str = "DATAOBJ." + index + "='" + val + "';";
                    eval(str);
                    if (val !== eval("YDATAOBJ." + index)) {
                        isedit = true;
                    }
                })
            },
            statementchange() {
                $(".statementchange").off("blur");
                $(".statementchange").on("blur",function(){
                    var sort = $(this).data("change");
                    var val = $(this).val();
                    var vdata = eval("DATAOBJ."+sort);//原先值
                    var dom = $(this);

                    if(!CHECK.number.test(val)){
                        layer.msg('结算单中的罚款和税率必须是数字,且不能为空');
                        dom.val(vdata);
                        return false;
                    }
                
                    var str = "DATAOBJ."+sort+"='"+val+"';";

                    if(val > 100 || val < 0){
                        layer.msg('结算单中的税率不允许大于100和小于0');
                        dom.val(vdata);
                        return false;
                    }
                    eval(str);
                    var index = $(this).data("index");
                    var td = DATAOBJ.statement_info[index];

                    var rname = $(this).attr("name");
                    var ratio = 0;
                    if( rname == "increment_ratio" || rname == "ratio"){
                        ratio = val;
                    }else{
                        if(DATAOBJ.withdraw_type==2){
                            ratio = td['increment_ratio'];
                        }else{
                            ratio = td['ratio'];
                        }
                    }
                    DATAOBJ.statement_money = PUBLIC.floatCut(DATAOBJ.statement_money,td['sum_money']);
                    td['sum_money'] = Math.round(td['pay_amount']*ratio*(100-td['fax_ratio'])/100,2)/100;
                    DATAOBJ.statement_money=PUBLIC.floatAdd(DATAOBJ.statement_money,td['sum_money']);
                    TPLSHOW.showStatementList(true);
                })
            }
        }
        var CHECK = {
            number: /^\d+(\.{1}\d+)?$/,
            mobile: /^1[3456789]\d{9}$/,
            BankNo: /^([1-9]{1})\d{10,19}$/,
            money: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
        }
        // 
        var TPLSHOW = {
            juicerInit() {
                var nonull = function (data) {
                    if (!data) {
                        return '';
                    }
                    return data;
                };
                var number_chinese = function (str) {
                    var num = parseFloat(str);
                    var strOutput = "",
                        strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分';
                    num += "00";
                    var intPos = num.indexOf('.');
                    if (intPos >= 0) {
                        num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
                    }
                    strUnit = strUnit.substr(strUnit.length - num.length);
                    for (var i = 0; i < num.length; i++) {
                        strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(num.substr(i, 1), 1) + strUnit.substr(i, 1);
                    }
                    return strOutput.replace(/零角零分$/, '整').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|万])/g, '$1').replace(/零+元/, '元').replace(/亿零{0,3}万/, '亿').replace(/^元/, "零元")

                }
                juicer.register('nonull', nonull);
                juicer.register('number_chinese', number_chinese);
            },
            //
            firstPartInfo(data) {
                var tpl = $("#partbasetpl").html();
                data.type = "first_party_info";
                var html = juicer(tpl, data);
                $("#first_part_bser_info_show").html(html);
                TPLSHOW.pushStatementTypeOption();
            },
            secondPartInfo(data) {
                var tpl = $("#partbasetpl").html();
                data.type ="second_party_info";
                var html = juicer(tpl, data);
                $("#second_part_bser_info_show").html(html);
                TPLSHOW.pushStatementTypeOption();
            },
            //支付给公司
            pushStatementTypeOption() {

                EVENT.normalchange();
            },
            //支付信息显示
            showPartPayInfo() {
                var data = {};
                if (DATAOBJ.pay_type == 1) {
                    data.party_info = DATAOBJ.first_party_info;
                    data.type ="first_party_info";
                } else {
                    data.party_info = DATAOBJ.second_party_info;
                    data.type ="second_party_info";
                }

                var tpl = $("#partpaytpl").html();
                var html = juicer(tpl, data);
                $("#partpatinfo").html(html);
                EVENT.normalchange();

            },
            //订单信息显示
            showStatementList(flag) {
                if (flag) {
                    var data = DATAOBJ;
                    console.log(data);
                    $("#statementInit").addClass("hidebox");
                    var tpl = $("#statementTpl").html();
                    var html = juicer(tpl, data);
                    $("#statementShow").html(html);
                    EVENT.statementchange();
                }

            }
        }
    </script>

</body>

</html>