<style>
    div.col-md-4 {
        margin-bottom: 10px;
        height: 28px;
    }
    input[type=radio] {
        margin: 0 4px 0 0;
    }
</style>
<div class="wrap">
    <h2>业务进度表</h2>
    <form method="get">
        <input type="hidden" name="page" value="progressList">
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-4">
                <label>查询类型:</label>
                <input type="radio" name="search_type" value="0">不限
                <input type="radio" name="search_type" value="search_consultant_name">置业顾问
                <input type="radio" name="search_type" value="organization">部门
            </div>
            <div id="search_type_0" style="display: none;" class="col-md-8">
                <label for="search_consultant_name" class="hidden"></label>
                <input type="text" placeholder="请输入置业顾问" name="search_consultant_name" id="search_consultant_name"
                       value="{{ req.search_consultant_name }}">
            </div>
            <div id="search_type_1" style="display: none;" class="col-md-8">
                {% import "selectOrganization.html" as macro %}
                {{ macro.selectOrganization("progress") }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <label>统计时间:</label>
                <input type="radio" name="statistical_time" value="0">不限
                <input type="radio" name="statistical_time" value="day">日
                <input type="radio" name="statistical_time" value="week">周
                <input type="radio" name="statistical_time" value="month">月
                <input type="radio" name="statistical_time" value="year">年
            </div>
            <div id="search_form" class="col-md-8">
                <label for="year" class="hidden"></label>
                <select name="year" id="year" style="display: none;">
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                </select>
                <label for="month" class="hidden"></label>
                <select name="month" id="month" style="display: none;">
                    <option value="1">一月</option>
                    <option value="2">二月</option>
                    <option value="3">三月</option>
                    <option value="4">四月</option>
                    <option value="5">五月</option>
                    <option value="6">六月</option>
                    <option value="7">七月</option>
                    <option value="8">八月</option>
                    <option value="9">九月</option>
                    <option value="10">十月</option>
                    <option value="11">十一月</option>
                    <option value="12">十二月</option>
                </select>
                <label for="day" class="hidden"></label>
                <input type="date" name="day" id="day" style="display: none;">
                <label for="select_week" class="hidden"></label>
                <input type="week" id="select_week" name="select_week" style="display: none">
                <input type="hidden" name="week" id="week" style="display: none">
            </div>
        </div>
        <input type="submit" id="submit" class="button action" value="搜索">
    </form>
    {{ function("addProgressTable") }}
</div>
<script>
    $(document).ready(function () {
        var search_type_0 = $('#search_type_0');
        var search_type_1 = $('#search_type_1');
        $('input[name=search_type]').change(function () {
            var value = $(this).val();
            switch (value) {
                case 'search_consultant_name':
                    search_type_0.show();
                    search_type_1.hide();
                    break;
                case 'organization':
                    search_type_0.hide();
                    search_type_1.show();
                    break;
                default:
                    search_type_0.hide();
                    search_type_1.hide();
                    break;
            }
        });

        var day = $('#day');
        var week = $('#select_week');
        var month = $('#month');
        var year = $('#year');
        $('input[name=statistical_time]').change(function () {
            var value = $(this).val();
            switch (value) {
                case 'day':
                    day.show();
                    week.hide();
                    month.hide();
                    year.hide();
                    break;
                case 'week':
                    day.hide();
                    week.show();
                    month.hide();
                    year.hide();
                    break;
                case 'month':
                    day.hide();
                    week.hide();
                    month.show();
                    year.show();
                    break;
                case 'year':
                    day.hide();
                    week.hide();
                    month.hide();
                    year.show();
                    break;
                default:
                    day.hide();
                    week.hide();
                    month.hide();
                    year.hide();
                    break;
            }
        });

        week.change(function () {
            var week_start_day = (new Date($(this).context.valueAsDate).Format('yyyy-MM-dd'));
            $('#week').val(week_start_day);
        });

        $('form').submit(function () {
            var search_type = $('input[name=search_type]:checked').val();
            if (search_type == 'organization') {
                var organization = getOrganization('progress');
                var select = $('#progress_organization').find('select[data-depth]:not(.hidden)');
                if (select.length > 1 && organization == -1) {
                    alert('请选择门店');
                    return false;
                } else {
                    $(this).append('<input type="hidden" name="organization" value="' + organization + '">');
                }
            }
        });

        {% if req %}
            $('input[type=radio][value="{{ req.statistical_time }}"]').attr('checked', 'checked');
            $('input[type=radio][value="{{ req.search_type }}"]').attr('checked', 'checked');
            year.val('{{ req.year|default(2015) }}');
            month.val('{{ req.month|default(1) }}');
            day.val('{{ req.day }}');
            var req_statistical_time = '{{ req.statistical_time }}';
            var req_search_type = '{{ req.search_type }}';
            if (req_statistical_time == 'week') {
                week.val('{{ req.select_week }}');
                $('#week').val('{{ req.week }}');
                week.show();
            } else if (req_statistical_time == 'month') {
                year.show();
            }
            $('#' + req_statistical_time).show();
            $('#' + req_search_type).parent().show();
        {% endif %}
    });
</script>