<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=360, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>房贷计算器</title>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/component.css"/>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/animations.css"/>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/loan_calculator.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/loan_detail.css">
    <script type="text/javascript" src="{{ theme }}/js/iscroll.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/modernizr.custom.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.mobile.custom.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/gftools.js"></script>
</head>
<body>
{% set commerce_rate = 5.15 %}
{% set accumulationFund_rate = 3.25 %}
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1">
<ul id="tab" class="list-unstyled btn-group-justified tab">
    <li class="btn-group active">
        <a href="#commerce_loan" data-toggle="tab" class="btn">商业贷款</a>
    </li>
    <li class="btn-group">
        <a href="#accumulationFund_loan" data-toggle="tab" class="btn">公积金贷款</a>
    </li>
    <li class="btn-group">
        <a href="#combined_loan" data-toggle="tab" class="btn">组合贷款</a>
    </li>
</ul>

<div id="tabWrapper">
    <div id="tabScroller" class="tab-content">
        <div class="tab-pane fade in active" id="commerce_loan">
            <ul class="list-unstyled">
                <li>
                    <label class="col-xs-3">房价总额:</label>

                    <p class="col-xs-7">
                        <input type="number" class="form-control" data-id="fangjia_money">
                    </p>

                    <p class="col-xs-2">万元</p>
                </li>
                <li class="arrow">
                    <label class="col-xs-3">首付比例:</label>

                    <p class="col-xs-9">
                        <select class="form-control" data-id="first_payment">
                            <option value="3">3成</option>
                            <option value="4">4成</option>
                            <option value="5">5成</option>
                            <option value="6">6成</option>
                            <option value="7">7成</option>
                            <option value="8">8成</option>
                            <option value="9">9成</option>
                        </select>
                    </p>
                </li>
                <li>
                    <label class="col-xs-3">贷款金额:</label>

                    <p class="col-xs-7">
                        <input type="number" class="form-control" data-id="daikuan_money" readonly>
                    </p>

                    <p class="col-xs-2">万元</p>
                </li>
                <li class="arrow">
                    <label class="col-xs-3">按揭年数:</label>

                    <p class="col-xs-9">
                        <select class="form-control" data-id="year">
                            <option value="1">1年（12期）</option>
                            <option value="2">2年（24期）</option>
                            <option value="3">3年（36期）</option>
                            <option value="4">4年（48期）</option>
                            <option value="5">5年（60期）</option>
                            <option value="6">6年（72期）</option>
                            <option value="7">7年（84期）</option>
                            <option value="8">8年（96期）</option>
                            <option value="9">9年（108期）</option>
                            <option value="10">10年（120期）</option>
                            <option value="11">11年（132期）</option>
                            <option value="12">12年（144期）</option>
                            <option value="13">13年（156期）</option>
                            <option value="14">14年（168期）</option>
                            <option value="15">15年（180期）</option>
                            <option value="16">16年（192期）</option>
                            <option value="17">17年（204期）</option>
                            <option value="18">18年（216期）</option>
                            <option value="19">19年（228期）</option>
                            <option value="20" selected="selected">20年（240期）</option>
                            <option value="25">25年（300期）</option>
                            <option value="30">30年（360期）</option>
                        </select>
                    </p>
                </li>
                <li>
                    <label class="col-xs-3">利&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率:</label>

                    <p class="col-xs-7">
                        <input type="number" class="form-control" data-id="rate" value="{{ commerce_rate }}">
                    </p>

                    <p class="col-xs-2">%</p>
                </li>
            </ul>
            <p class="text-right">商业贷款利率{{ commerce_rate }}%</p>
            <input type="submit" value="开始计算" class="btn btn-lg">
        </div>

        <div class="tab-pane fade" id="accumulationFund_loan">
            <ul class="list-unstyled">
                <li>
                    <label class="col-xs-3">房价总额:</label>

                    <p class="col-xs-7">
                        <input type="number" class="form-control" data-id="fangjia_money">
                    </p>

                    <p class="col-xs-2">万元</p>
                </li>
                <li class="arrow">
                    <label class="col-xs-3">首付比例:</label>

                    <p class="col-xs-9">
                        <select class="form-control" data-id="first_payment">
                            <option value="3">3成</option>
                            <option value="4">4成</option>
                            <option value="5">5成</option>
                            <option value="6">6成</option>
                            <option value="7">7成</option>
                            <option value="8">8成</option>
                            <option value="9">9成</option>
                        </select>
                    </p>
                </li>
                <li>
                    <label class="col-xs-3">贷款金额:</label>

                    <p class="col-xs-7">
                        <input type="number" class="form-control" data-id="daikuan_money" readonly>
                    </p>

                    <p class="col-xs-2">万元</p>
                </li>
                <li class="arrow">
                    <label class="col-xs-3">按揭年数:</label>

                    <p class="col-xs-9">
                        <select class="form-control" data-id="year">
                            <option value="1">1年（12期）</option>
                            <option value="2">2年（24期）</option>
                            <option value="3">3年（36期）</option>
                            <option value="4">4年（48期）</option>
                            <option value="5">5年（60期）</option>
                            <option value="6">6年（72期）</option>
                            <option value="7">7年（84期）</option>
                            <option value="8">8年（96期）</option>
                            <option value="9">9年（108期）</option>
                            <option value="10">10年（120期）</option>
                            <option value="11">11年（132期）</option>
                            <option value="12">12年（144期）</option>
                            <option value="13">13年（156期）</option>
                            <option value="14">14年（168期）</option>
                            <option value="15">15年（180期）</option>
                            <option value="16">16年（192期）</option>
                            <option value="17">17年（204期）</option>
                            <option value="18">18年（216期）</option>
                            <option value="19">19年（228期）</option>
                            <option value="20" selected="selected">20年（240期）</option>
                            <option value="25">25年（300期）</option>
                            <option value="30">30年（360期）</option>
                        </select>
                    </p>
                </li>
                <li>
                    <label class="col-xs-3">利&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率:</label>

                    <p class="col-xs-7">
                        <input type="number" class="form-control" data-id="rate" value="{{ accumulationFund_rate }}">
                    </p>

                    <p class="col-xs-2">%</p>
                </li>
            </ul>
            <p class="text-right">公积金贷款利率{{ accumulationFund_rate }}%</p>
            <input type="submit" value="开始计算" class="btn btn-lg">
        </div>

        <div class="tab-pane fade" id="combined_loan">
            <ul class="list-unstyled">
                <li>
                    <label class="col-xs-3">房价总额:</label>

                    <p class="col-xs-7">
                        <input type="number" class="form-control" data-id="fangjia_money">
                    </p>

                    <p class="col-xs-2">万元</p>
                </li>
                <li class="arrow">
                    <label class="col-xs-3">首付比例:</label>

                    <p class="col-xs-8">
                        <select class="form-control" data-id="first_payment">
                            <option value="3">3成</option>
                            <option value="4">4成</option>
                            <option value="5">5成</option>
                            <option value="6">6成</option>
                            <option value="7">7成</option>
                            <option value="8">8成</option>
                            <option value="9">9成</option>
                        </select>
                    </p>
                </li>
                <li>
                    <label class="col-xs-5">公积金贷款金额:</label>

                    <p class="col-xs-5">
                        <input type="number" class="form-control" data-id="daikuan_money">
                    </p>

                    <p class="col-xs-2">万元</p>
                </li>
                <li class="arrow">
                    <label class="col-xs-5">公积金按揭年数:</label>

                    <p class="col-xs-6">
                        <select class="form-control" data-id="accumulationFund_year">
                            <option value="1">1年（12期）</option>
                            <option value="2">2年（24期）</option>
                            <option value="3">3年（36期）</option>
                            <option value="4">4年（48期）</option>
                            <option value="5">5年（60期）</option>
                            <option value="6">6年（72期）</option>
                            <option value="7">7年（84期）</option>
                            <option value="8">8年（96期）</option>
                            <option value="9">9年（108期）</option>
                            <option value="10">10年（120期）</option>
                            <option value="11">11年（132期）</option>
                            <option value="12">12年（144期）</option>
                            <option value="13">13年（156期）</option>
                            <option value="14">14年（168期）</option>
                            <option value="15">15年（180期）</option>
                            <option value="16">16年（192期）</option>
                            <option value="17">17年（204期）</option>
                            <option value="18">18年（216期）</option>
                            <option value="19">19年（228期）</option>
                            <option value="20" selected="selected">20年（240期）</option>
                            <option value="25">25年（300期）</option>
                            <option value="30">30年（360期）</option>
                        </select>
                    </p>
                </li>
                <li>
                    <label class="col-xs-5">商业贷款金额:</label>

                    <p class="col-xs-5">
                        <input type="number" class="form-control" data-id="commerce_money">
                    </p>

                    <p class="col-xs-2">万元</p>
                </li>
                <li class="arrow">
                    <label class="col-xs-3">按揭年数:</label>

                    <p class="col-xs-8">
                        <select class="form-control" data-id="commerce_year">
                            <option value="1">1年（12期）</option>
                            <option value="2">2年（24期）</option>
                            <option value="3">3年（36期）</option>
                            <option value="4">4年（48期）</option>
                            <option value="5">5年（60期）</option>
                            <option value="6">6年（72期）</option>
                            <option value="7">7年（84期）</option>
                            <option value="8">8年（96期）</option>
                            <option value="9">9年（108期）</option>
                            <option value="10">10年（120期）</option>
                            <option value="11">11年（132期）</option>
                            <option value="12">12年（144期）</option>
                            <option value="13">13年（156期）</option>
                            <option value="14">14年（168期）</option>
                            <option value="15">15年（180期）</option>
                            <option value="16">16年（192期）</option>
                            <option value="17">17年（204期）</option>
                            <option value="18">18年（216期）</option>
                            <option value="19">19年（228期）</option>
                            <option value="20" selected="selected">20年（240期）</option>
                            <option value="25">25年（300期）</option>
                            <option value="30">30年（360期）</option>
                        </select>
                    </p>
                </li>
                <li>
                    <label class="col-xs-3">利&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率:</label>

                    <p class="col-xs-7">
                        <input type="number" class="form-control" data-id="rate" value="{{ commerce_rate }}">
                    </p>

                    <p class="col-xs-2">%</p>
                </li>
            </ul>
            <p class="text-right">公积金贷款利率{{ accumulationFund_rate }}% 商业贷款利率{{ commerce_rate }}%</p>
            <input type="submit" value="开始计算" class="btn btn-lg">
        </div>
    </div>
</div>
</div>
<div class="pt-page pt-page-2">
    <div class="header">
        <ul class="list-unstyled">
            <li class="col-xs-7" id="money"></li>
            <li class="col-xs-5" id="month"></li>
        </ul>
        <ul class="list-unstyled">
            <li class="col-xs-4">还款方式</li>
            <li class="col-xs-4">等额本息</li>
            <li class="col-xs-4">等额本金</li>
            <li class="col-xs-4">支付利息</li>
            <li class="col-xs-4" id="acpi_interest"></li>
            <li class="col-xs-4" id="ac_interest"></li>
        </ul>
    </div>

    <div id="wrapper">
        <div id="scroller">
            <ul class="list-unstyled" id="result">
            </ul>
        </div>
    </div>
</div>
</div>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content text-center">
            <h4>提示</h4>

            <p id="notice"></p>
            <button type="button" class="btn btn-lg btn-block" data-dismiss="modal">确认</button>
        </div>
    </div>
</div>

<script type="text/javascript" src="{{ theme }}/js/pagetransitions.js"></script>
<script>
    var daikuan_money = 0;
    var page = 0;
    var tabScroll;
    var resultScroll;
    var resultList;
    $(document).ready(function () {
        tabScroll = new IScroll('#tabWrapper',{
            click: true
        });
        resultScroll = new IScroll('#wrapper', {
            click: true
        });
        $('#tab a').click(function(){
            tabScroll.scrollTo(0,0);
            setTimeout(function(){
                tabScroll.refresh();
            },200);
        });
        var notice = $('#notice');
        var myModal = $('#myModal');
        $('[data-id=fangjia_money]').change(function () {
            var fangjia_money = Number($(this).val().trim());
            var tab = $(this).parents('.active');
            var first_payment = Number(tab.find('[data-id=first_payment]').val());
            daikuan_money = (fangjia_money * (1 - first_payment / 10)).toFixed(2);
            tab.find('[data-id=daikuan_money]').val(daikuan_money);
        });
        $('[data-id=first_payment]').change(function () {
            var first_payment = Number($(this).val());
            var tab = $(this).parents('.active');
            var fangjia_money = Number(tab.find('[data-id=fangjia_money]').val().trim());
            daikuan_money = (fangjia_money * (1 - first_payment / 10)).toFixed(2);
            tab.find('[data-id=daikuan_money]').val(daikuan_money);
        });
        $('input[type=submit]').tap(function () {
            var tab = $(this).parents('.active');
            var tabId = tab.attr('id');
            var fangjia_money = Number(tab.find('[data-id=fangjia_money]').val().trim());
            var year = Number(tab.find('[data-id=year]').val());
            var rate = Number(tab.find('[data-id=rate]').val().trim());
            if (fangjia_money == '') {
                notice.html('请输入房价总额');
                myModal.modal('show');
            } else if (rate == '') {
                notice.html('请输入利率');
                myModal.modal('show');
            } else {
                resultList = $('#result');
                if (tabId == 'combined_loan') {
                    var accumulationFund_money = Number(tab.find('[data-id=daikuan_money]').val().trim());
                    var commerce_money = Number(tab.find('[data-id=commerce_money]').val().trim());
                    var accumulationFund_year = Number(tab.find('[data-id=accumulationFund_year]').val());
                    var commerce_year = Number(tab.find('[data-id=commerce_year]').val());
                    var accumulationFund_result = loan_calc(accumulationFund_money, accumulationFund_year, {{ accumulationFund_rate }});
                    var commerce_result = loan_calc(commerce_money, commerce_year, rate);
                    $('#money').text('贷款总额:' + (accumulationFund_money + commerce_money).toFixed(2) + '万元');
                    $('#acpi_interest').text(Math.round(accumulationFund_result.acpi.interest + commerce_result.acpi.interest));
                    $('#ac_interest').text(Math.round(accumulationFund_result.ac.interest + commerce_result.ac.interest));
                    //公积金按揭年数 > 商业贷款按揭年数
                    if (accumulationFund_result.loan_period >= commerce_result.loan_period) {
                        $('#month').text('贷款月数:' + accumulationFund_result.loan_period);
                        $.each(accumulationFund_result.ac.monthlyPayment, function (index, value) {
                            var payment = commerce_result.ac.monthlyPayment[index];
                            var commerce_monthlyPayment = commerce_result.acpi.monthlyPayment;
                            if (!payment) {
                                payment = 0;
                                commerce_monthlyPayment = 0;
                            }
                            resultList.append('<li><p class="col-xs-4">' + (index + 1) + '</p>' +
                            '<p class="col-xs-4">' + Math.round(accumulationFund_result.acpi.monthlyPayment + commerce_monthlyPayment) + '</p>' +
                            '<p class="col-xs-4">' + Math.round(value + payment) + '</p></li>');
                        });
                    } else {
                        $('#month').text('贷款月数:' + commerce_result.loan_period);
                        $.each(commerce_result.ac.monthlyPayment, function (index, value) {
                            var payment = accumulationFund_result.ac.monthlyPayment[index];
                            var accumulationFund_monthlyPayment = accumulationFund_result.acpi.monthlyPayment;
                            if (!payment) {
                                payment = 0;
                                accumulationFund_monthlyPayment = 0;
                            }
                            resultList.append('<li><p class="col-xs-4">' + (index + 1) + '</p>' +
                            '<p class="col-xs-4">' + Math.round(accumulationFund_monthlyPayment + commerce_result.acpi.monthlyPayment) + '</p>' +
                            '<p class="col-xs-4">' + Math.round(value + payment) + '</p></li>');
                        });
                    }
                } else {
                    var result = loan_calc(daikuan_money, year, rate);
                    $('#money').text('贷款总额:' + result.loan_ceiling + '万元');
                    $('#month').text('贷款月数:' + result.loan_period);
                    var acpi = result.acpi;
                    var ac = result.ac;
                    $('#acpi_interest').text(Math.round(acpi.interest));
                    $('#ac_interest').text(Math.round(ac.interest));
                    $.each(ac.monthlyPayment, function (index, value) {
                        resultList.append('<li><p class="col-xs-4">' + (index + 1) + '</p>' +
                        '<p class="col-xs-4">' + Math.round(acpi.monthlyPayment) + '</p>' +
                        '<p class="col-xs-4">' + Math.round(value) + '</p></li>');
                    });
                }
                resultScroll.refresh();
                page = 1;
                window.location.href = '#result';
                PageTransitions.nextPage({
                    animation: 1,
                    showPage: page
                });
            }
            return false;
        });

        if (window.location.hash == '#result') {
            window.history.back();
        }
        window.addEventListener("popstate", function (e) {
            if (window.location.hash == '' && page == 1) {
                page = 0;
                PageTransitions.nextPage({
                    animation: 2,
                    showPage: page
                });
                resultList.html('');
                resultScroll.refresh();
            }
        });
    });
</script>

</body>
</html>