<?php
require_once "../inc/functions.inc.php";
$_REQUEST['t_start']=$_REQUEST['t_start']?$_REQUEST['t_start']:'2023-08-15';
$_REQUEST['t_end']=$_REQUEST['t_end']?$_REQUEST['t_end']:date('Y-m-d');
$_REQUEST['mst']=$_REQUEST['mst']?$_REQUEST['mst']:'2023-08';
$_REQUEST['med']=$_REQUEST['med']?$_REQUEST['med']:date('Y-m');
$_REQUEST['dm']=$_REQUEST['dm']?$_REQUEST['dm']:'Daily';
$_REQUEST['district']=$_REQUEST['district']?$_REQUEST['district']:'合计';
$subTitle=($_REQUEST['district']=='合计')?'宁波地区':$_REQUEST['district'];
$title="二手房每日成交量({$subTitle})";
include_once "../html/head.php";
?>

<form name="main" id="main" method="get"> <div style="width:100%;text-align:center">
区域：
<?php districtList(); ?>&nbsp;&nbsp;
Daily/Monthly:
    <?php byDM('dm','dblock','mblock'); ?> &nbsp;&nbsp;
<span style="display:inline;" id='dblock'>
开始时间: <input type='date' name='t_start' id='t_start' width='30px'  >
结束时间: <input type='date' name='t_end' id='t_end' width='30px'  >
</span>
<span style="display:None;" id='mblock'>
    开始月份: <input type="month" name='mst' id='mst'  >&nbsp;&nbsp;
    结束月份: <input type="month" name='med' id='med'  >
    </span>
 &nbsp;&nbsp;
 <button id="submitBtn" class="btn-submit"><span>查询数据</span></button>
</div> </form>
<div >&nbsp;</div>
<div id="container" style="width: 1000px; height:400px; margin: 0 auto 20px;">
    <div class="loading-overlay" id="loadingOverlay">
        <div class="spinner"></div>
        <p style="font-size:18px; color:#2c3e50;">正在加载数据，请稍候...</p>
    </div>
</div>
<div >&nbsp;</div>
<div style="margin:0 auto;width: 1000px ">
<span style="color:grey">
* 数据来源：<a href='https://www.cnnbfdc.com/' target='_blank'>宁波市房产交易服务信息网</a><br />
* 更新时间： 每天下午5:30</span></div>

<script>
    var dataSel1 = ['td','qty'];
    var dataSel2 = ['td','area'];
    var legend = ['成交套数','成交面积','挂牌套数'];

    $(document).ready(function() {
        $("#district").val('<?=$_REQUEST['district']?>');
        $("#t_start").val('<?=$_REQUEST['t_start']?>');
        $("#t_end").val('<?=$_REQUEST['t_end']?>');
        $("#mst").val('<?=$_REQUEST['mst']?>');
        $("#med").val('<?=$_REQUEST['med']?>');
        $("#dm").val('<?=$_REQUEST['dm']?>');
        var vdm = $('#dm').val();
        if(vdm=='Monthly'){ $('#dblock').css('display','none'); $('#mblock').css('display','inline'); }
        if(vdm=='Daily'){ $('#dblock').css('display','inline'); $('#mblock').css('display','none'); }
        loadChartData();
        $('#submitBtn').click(function(e) { e.preventDefault(); loadChartData(); });
    });

    function loadChartData() {
        $('#loadingOverlay').addClass('active');
        var district = $('#district').val();
        var dm = $('#dm').val();
        var url = "../inc/ajax.inc.php?t=esfTBD&district="+district+"&dm="+dm;
        if(dm=='Daily') url += "&t_start="+$('#t_start').val()+"&t_end="+$('#t_end').val();
        if(dm=='Monthly') url += "&t_start="+$('#mst').val()+"&t_end="+$('#med').val();

        fetch(url)
            .then(function(r) { return r.json(); })
            .then(function(resp) {
                var d = resp.data;
                var data1 = getRows(d.dataList, dataSel1);
                var data2 = getRows(d.dataTrade, dataSel2);
                var data3 = getRows(d.dataTrade, dataSel1);
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom, 'dark');
                var option = {
                    title: { text: '<?=$title?>', textAlign:'center', left:'50%' },
                    tooltip: { trigger: 'axis' },
                    legend: { data: legend, right:'20' },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    toolbox: { feature: { saveAsImage: {} } },
                    xAxis: { type: 'time', boundaryGap: false },
                    yAxis: [
                        { type: 'value', name: legend[2], show: true },
                        { type: 'value', name: legend[0], show: true },
                        { type: 'value', name: legend[1], show: true, boundaryGap: false, splitLine: { show: false } }
                    ],
                    dataZoom: [
                        { type: 'inside', start: 0, end: 100 },
                        { start: 0, end: 100, handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }
                    ],
                    series: [
                        { name: legend[2], type: 'bar', yAxisIndex: 0, symbol: 'none', data: data1, itemStyle: { normal: { label: { show: true } } } },
                        { name: legend[0], type: 'bar', yAxisIndex: 0, symbol: 'none', data: data3, itemStyle: { normal: { label: { show: true } } } },
                        { name: legend[1], type: 'line', yAxisIndex: 1, symbol: 'none', data: data2, itemStyle: { normal: { label: { show: true } } } }
                    ]
                };
                myChart.setOption(option, true);
            })
            .catch(function(error) { console.error('数据加载失败:', error); })
            .finally(function() { $('#loadingOverlay').removeClass('active'); });
    }
</script>
<?php include_once "../html/footer.php"; ?>
