<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%">
      <a-row>
        <a-col :span="10">
          <a-date-picker :value-format="valueFormat" :default-value="defaultValue" v-model:value="parmas.dateString" @change="changeDate" />
        </a-col>
      </a-row>
      <Bar :chartData="dataSource" height="80vh" :option="{ title: { text: '会员注册时间段统计', left: 'center' }}" :itemStyleLabel="false" :seriesName="'个数'"></Bar>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import {ref, unref, reactive, onMounted} from 'vue';
  import Bar from '/@/components/chart/Bar.vue';
  import { registerList } from './hy.api';
  import type { Dayjs } from 'dayjs';
  const valueFormat = 'YYYY-MM-DD';
  const dataSource = ref([]);
  const dateValue = ref();

  const parmas = reactive<any>({
    beginTime: '',
    endTime: '',
    dateString: '',
    housingestateId: '',
  })

  const changeDate = (date, dateString) => {
    parmas.dateString = dateString;
  };
  async function loadDate() {
    if(parmas.dateString!=''){
      parmas.beginTime = parmas.dateString+' 00:00:00';
      parmas.endTime = parmas.dateString+' 23:59:59';
    }
    const res = await registerList(parmas);
    console.log(res);
    dataSource.value = [];
    for (let i = 0; i < res.length; i++) {
      dataSource.value.push({
        name: `${res[i].shortHour}时`,
        value: res[i].cn,
      });
    }
  }

  onMounted(() => {
    if(parmas.dateString==''){
      parmas.dateString='2025-06-30';
    }
    loadDate();
  })

</script>
