<!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>
</head>
<body>
<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="#ability" data-toggle="tab" class="btn">购房能力评估</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="ability">
            <ul class="list-unstyled">
                <li>
                    <label class="col-xs-5">现持有资金:</label>
                    <p class="col-xs-5">
                        <input type="number" class="form-control" id="hold">
                    </p>
                    <p class="col-xs-2">元</p>
                </li>
                <li>
                    <label class="col-xs-5">现家庭月收入:</label>
                    <p class="col-xs-5">
                        <input type="number" class="form-control" id="income">
                    </p>
                    <p class="col-xs-2">元</p>
                </li>
                <li>
                    <label class="col-xs-5">家庭月固定支出:</label>
                    <p class="col-xs-5">
                        <input type="number" class="form-control" id="expense">
                    </p>
                    <p class="col-xs-2">元</p>
                </li>
                <li class="arrow">
                    <label class="col-xs-5">还款年限:</label>
                    <p class="col-xs-7">
                        <select class="form-control" id="month">
                            <option value="12">1年（12期）</option>
                            <option value="24">2年（24期）</option>
                            <option value="36">3年（36期）</option>
                            <option value="48">4年（48期）</option>
                            <option value="60">5年（60期）</option>
                            <option value="72">6年（72期）</option>
                            <option value="84">7年（84期）</option>
                            <option value="96">8年（96期）</option>
                            <option value="108">9年（108期）</option>
                            <option value="120">10年（120期）</option>
                            <option value="132">11年（132期）</option>
                            <option value="144">12年（144期）</option>
                            <option value="156">13年（156期）</option>
                            <option value="168">14年（168期）</option>
                            <option value="180">15年（180期）</option>
                            <option value="192">16年（192期）</option>
                            <option value="204">17年（204期）</option>
                            <option value="216">18年（216期）</option>
                            <option value="228">19年（228期）</option>
                            <option value="240" selected="selected">20年（240期）</option>
                            <option value="300">25年（300期）</option>
                            <option value="360">30年（360期）</option>
                        </select>
                    </p>
                </li>
                <li>
                    <label class="col-xs-4">房屋面积:</label>
                    <p class="col-xs-5">
                        <input type="number" class="form-control" id="area">
                    </p>
                    <p class="col-xs-3">平方米</p>
                </li>
            </ul>
            <input type="submit" value="开始计算" class="btn btn-lg">
        </div>
    </div>
</div>
<div class="pt-page pt-page-2">
    <div id="wrapper" style="top: 0;">
        <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 page = 0;
    var resultList;
    $(document).ready(function () {
        var notice = $('#notice');
        var myModal = $('#myModal');
        $('input[type=submit]').tap(function () {
            var hold = Number($('#hold').val().trim());
            var income = Number($('#income').val().trim());
            var expense = Number($('#expense').val().trim());
            var month = Number($('#month').val());
            var area = Number($('#area').val().trim());
            console.log(hold);
            console.log(income);
            console.log(expense);
            console.log(month);
            console.log(area);
            if (hold == '') {
                notice.html('请输入现持有资金');
                myModal.modal('show');
            } else if (income == '') {
                notice.html('请输入现家庭月收入');
                myModal.modal('show');
            } else if (expense == '') {
                notice.html('请输入家庭月固定支出');
                myModal.modal('show');
            } else if (month == '') {
                notice.html('请输入还款年限');
                myModal.modal('show');
            } else if (area == '') {
                notice.html('请输入房屋面积');
                myModal.modal('show');
            } else {
                resultList = $('#result');
                var abilityResult = abilityCalculator(month, hold, income, expense, area);
                resultList.html('<li><span class="col-xs-4">房屋总价:</span><span>' + abilityResult.total + '元</span></li>' +
                '<li><span class="col-xs-4">房屋单价:</span><span>' + abilityResult.avgPrice + '元/平方</span></li>');
                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('');
            }
        });
    });
    function abilityCalculator(month, holdMoney, income, outcome, area) {
        var year = parseInt(month / 12);
        var lilu = 0.00576;
        if (year > 5)
            lilu = 0.00594;
        var d1 = income - outcome;
        var d2 = Math.pow(1 + lilu, month) - 1;
        var d3 = lilu * Math.pow(1 + lilu, month);
        //房屋总价
        var total = Math.round(((d1 * d2) / d3) + holdMoney);
        //房屋单价
        var avgPrice = total / area;
        var result = {
            total: total,
            avgPrice: avgPrice
        };
        return result;
    }
</script>

</body>
</html>