<template>
  <div>
    <WorkbenchHeader />
    <div class="flex-row">
      <div class="flex-col" style="flex: 1;padding-right:0px;">
        <div class="flex-row-center-space" style="padding: 12px 16px 0px 16px;">
          <span style="color: #333;text-align: center;font-size: 22px;">流量数据统计</span>
          <RangePicker v-model:value="value3" :format="dateFormat" :disabled-date="disabledDate" @change="fetchFlowData"/>
        </div>
        <div class="p-4">
          <GrowCard :loading="loading1" :data-list="flowCardList" class="enter-y" />
        </div>
        <div style="padding: 0px 16px;">
          <BasicTable @register="registerFlowTable" />
        </div>
      </div>
      <div class="flex-col" style="flex: 1;padding-left:0px;">
        <div class="flex-row-center-space" style="padding: 12px 16px 0px 16px;">
          <span style="color: #333;text-align: center;font-size: 22px;">电邀数据统计</span>
          <RangePicker v-model:value="value4" :format="dateFormat" :disabled-date="disabledDate" @change="fetchData"/>
        </div>
        <div class="p-4">
          <GrowCard :loading="loading" :data-list="growCardList" class="enter-y" />
        </div>
        <div style="padding: 0px 16px;">
          <BasicTable @register="registerTable" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import moment, {Moment} from 'moment';
  import { formatToDate } from '/@/utils/dateUtil'
  import WorkbenchHeader from './components/WorkbenchHeader.vue';
  import GrowCard from './components/GrowCard.vue';
  import { RangePicker } from 'ant-design-vue'
  import { BasicTable, useTable } from '/@/components/Table'
  import { tableFlowColumns, tableColumns, growCardList, flowCardList } from './data'
  import { getInvitationStatic, getInvitationData, getFlowStatic, getFlowData } from '/@/api/clue'

  const dateFormat = 'YYYY-MM-DD';
  const value3 = ref<any[]>([])
  const value4 = ref<any[]>([])
  const loading = ref(true);
  const loading1 = ref(true);
  onMounted(() => {
    value3.value = [moment().format(dateFormat), moment().format(dateFormat)]
    value4.value = [moment().format(dateFormat), moment().format(dateFormat)]
    fetchFlowData()
    fetchData()
  })

  function disabledDate (current: Moment) {
    return current && current >= moment().endOf('day');
  }

  async function fetchData(){
    loading.value = true;
    const result = await getInvitationStatic({startTime: formatToDate(value4.value[0]), endTime: formatToDate(value4.value[1])})
    growCardList[0].value = result.obtainedQuantity
    growCardList[1].value = result.allocationQuantity
    growCardList[2].value = result.connectionQuantity
    growCardList[3].value = result.appointmentQuantity
    growCardList[4].value = result.followUpQuantity
    await reload()
    loading.value = false;
  }

  async function fetchFlowData(){
    loading1.value = true;
    const result = await getFlowStatic({startTime: formatToDate(value3.value[0]), endTime: formatToDate(value3.value[1])})
    flowCardList[0].value = result.newQuantity
    flowCardList[1].value = result.appointmentQuantity
    flowCardList[2].value = result.connectionQuantity
    flowCardList[3].value = result.signQuantity
    await flowReload()
    loading1.value = false;
  }

  const [registerTable, { reload }] = useTable({
    bordered: true,
    immediate: false,
    canResize: true,
    useSearchForm: false,
    showIndexColumn: true,
    showTableSetting: false,
    pagination: false,
    columns: tableColumns,
    api: getInvitationData,
    beforeFetch: (arg) => {
      arg.startTime = formatToDate(value4.value[0])
      arg.endTime = formatToDate(value4.value[1])
    },
  })

  const [registerFlowTable, { reload: flowReload }] = useTable({
    bordered: true,
    immediate: false,
    canResize: true,
    useSearchForm: false,
    showIndexColumn: true,
    showTableSetting: false,
    pagination: false,
    columns: tableFlowColumns,
    api: getFlowData,
    beforeFetch: (arg) => {
      arg.startTime = formatToDate(value3.value[0])
      arg.endTime = formatToDate(value3.value[1])
    },
  })

</script>