<!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="#new" data-toggle="tab" class="btn">新房</a>
        </li>
        <li class="btn-group">
            <a href="#secondhand" data-toggle="tab" class="btn">二手房</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="new">
            <ul class="list-unstyled">
                <li>
                    <label class="col-xs-3">房屋面积:</label>
                    <p class="col-xs-6">
                        <input type="number" class="form-control" data-id="area">
                    </p>
                    <p class="col-xs-3">平米</p>
                </li>
                <li>
                    <label class="col-xs-3">房屋单价:</label>
                    <p class="col-xs-6">
                        <input type="number" class="form-control" data-id="average_price">
                    </p>
                    <p class="col-xs-3">元/平米</p>
                </li>
            </ul>
            <input type="submit" value="开始计算" class="btn btn-lg">
        </div>

        <div class="tab-pane fade" id="secondhand">
            <ul class="list-unstyled">
                <li>
                    <label class="col-xs-3">房屋面积:</label>
                    <p class="col-xs-6">
                        <input type="number" class="form-control" data-id="area">
                    </p>
                    <p class="col-xs-3">平米</p>
                </li>
                <li>
                    <label class="col-xs-3">房屋单价:</label>
                    <p class="col-xs-6">
                        <input type="number" class="form-control" data-id="average_price">
                    </p>
                    <p class="col-xs-3">元/平米</p>
                </li>
                <li>
                    <label class="col-xs-3">购置年限:</label>
                    <p class="col-xs-6">
                        <select class="form-control" data-id="year">
                            <option selected="selected" value="0">2年以内</option>
                            <option value="1">2-5年</option>
                            <option value="2">5年以上</option>
                        </select>
                    </p>
                    <p class="col-xs-3">年</p>
                </li>
                <li>
                    <label class="col-xs-3">首次购房:</label>
                    <label for="firstTrue" class="col-xs-4 text-center">
                        <input type="radio" name="first" id="firstTrue" value="1" checked>
                        <span></span>是
                    </label>
                    <label for="firstFalse" class="col-xs-4 text-center">
                        <input type="radio" name="first" id="firstFalse" value="0">
                        <span></span>否
                    </label>
                </li>
                <li>
                    <label class="col-xs-3">唯一住房:</label>
                    <label for="onlyTrue" class="col-xs-4 text-center">
                        <input type="radio" name="only" id="onlyTrue" value="1" checked>
                        <span></span>是
                    </label>
                    <label for="onlyFalse" class="col-xs-4 text-center">
                        <input type="radio" name="only" id="onlyFalse" value="0">
                        <span></span>否
                    </label>
                </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 tab = $(this).parents('.active');
            var tabId = tab.attr('id');
            var area = Number(tab.find('[data-id=area]').val().trim());
            var average_price = Number(tab.find('[data-id=average_price]').val().trim());
            var year = Number(tab.find('[data-id=year]').val());
            if (area == '') {
                notice.html('请输入房屋面积');
                myModal.modal('show');
            } else if (average_price == '') {
                notice.html('请输入房屋单价');
                myModal.modal('show');
            } else {
                resultList = $('#result');
                var taxResult = null;
                if (tabId == 'new') {
                    taxResult = newHouseTaxCalculator(area, average_price);
                    resultList.html('<li><span class="col-xs-4">印花税:</span><span>' + taxResult.stampDuty + '元</span></li>'+
                    '<li><span class="col-xs-4">契税:</span><span>' + taxResult.deed + '元</span></li>'+
                    '<li><span class="col-xs-4">公证费:</span><span>' + taxResult.notaryFees + '元</span></li>');
                } else {
                    if (year >= 0) {
                        var first = (Number($('input[name=first]:checked').val()) == 1);
                        var only = (Number($('input[name=only]:checked').val()) == 1);
                        taxResult = secondhandHouseTaxCalculator(area, average_price, first, only, year);
                        resultList.html('<li><span class="col-xs-5">房屋总价:</span><span>' + taxResult.housePrice + '元</span></li>' +
                        '<li><span class="col-xs-5">契税:</span><span>' + taxResult.deed + '元</span></li>' +
                        '<li><span class="col-xs-5">营业税:</span><span>' + taxResult.bt + '元</span></li>' +
                        '<li><span class="col-xs-5">个人所得税:</span><span>' + taxResult.pit + '元</span></li>' +
                        '<li><span class="col-xs-5">工本印花税:</span><span>5元</span></li>' +
                        '<li><span class="col-xs-5">合计:</span><span>' + (taxResult.deed + taxResult.bt + taxResult.pit + 5) + '元</span></li>');
                    } else {
                        notice.html('请选择购置年限');
                        myModal.modal('show');
                        return false;
                    }
                }
                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 newHouseTaxCalculator(area, avgPrice) {
        var area = parseFloat(area);
        var avgPrice = parseFloat(avgPrice);
        var totle = area * avgPrice;
        //契税
        var deed = 0;
        //印花税
        var stampDuty = totle * 0.0005;
        //公证费
        var notaryFees = totle * 0.003;

        if (avgPrice <= 9432)
            deed = totle * 0.015;
        else if (avgPrice > 9432)
            deed = totle * 0.03;

        var result = {
            stampDuty: stampDuty,
            deed: deed,
            notaryFees: notaryFees
        };
        return result;
    }
    function secondhandHouseTaxCalculator(area, avgPrice, isFirst, onlyOne, year) {
        var totle = area * avgPrice;
        //契税
        var deed = 0;
        //个人所得税
        var pit = 0;
        //营业税
        var bt = 0;
        if (area > 144)
            isFist = false;
        if (isFirst) {
            deed = totle * 0.01;
            if (area >= 90 && area <= 144)
                deed = totle * 0.015;
        } else {
            deed = totle * 0.03;
        }
        if (year == 2 && onlyOne) {
            pit = 0;
        } else {
            pit = totle * 0.01;
        }
        if (year == 0) {
            bt = totle * 0.056;
        }
        var result = {
            housePrice: totle,
            deed: deed,
            pit: pit,
            bt: bt
        };
        return result;
    }
</script>

</body>
</html>