<script lang="ts" setup>
import {
  dayInitData,
  dayMetricsEnum, initData, monthInitData,
  monthMetricsEnum,
  weekInitData,
  weekMetricsEnum
} from '/src/views/reportManage/dataCenter/utils/enum';
import {
  getCardDayData,
  getCardMonthData,
  getCardWeekData,
  getLineForDay,
  getLineForMonth,
  getLineForWeek
} from '/src/views/reportManage/dataCenter/api';
import DateTendency from '/src/views/reportManage/dataCenter/normalDisplay/components/DateTendency/index.vue';
import { computed, onBeforeUnmount, provide, ref } from 'vue';
import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
import TableSelect from '/src/views/reportManage/dataCenter/normalDisplay/components/TableDataDisplay.vue';
import DataPicker from '/src/views/reportManage/dataCenter/normalDisplay/components/DatePicker/index.vue';
import emitter from '/src/utils/emitter';

//筛选查询
const selectorRef = ref(null);
const taskIds = ref(null);
//日周月选择
const currentDate = ref({});
const dateDimension = ref('day');
provide('dateDimension', dateDimension);

const queryParams = ref({
  currentDate,
  taskIds
});

const handelDateChange = (date) => {
  currentDate.value = date;
};

emitter.on('DateTendency-dateChange', (value: string) => {
  dateDimension.value = value;
});

provide('currentDate', currentDate);

//选择器筛选后数据的任务id
function updateDataChange(newId) {
  if (selectorRef.value) {
    taskIds.value = newId.value;
  }
}

const currentMetricEnum = computed(() => {
  if (dateDimension.value === 'day') {
    return dayMetricsEnum;
  } else if (dateDimension.value === 'week') {
    return weekMetricsEnum;
  } else if (dateDimension.value === 'month') {
    return monthMetricsEnum;
  }
});

const initMetric = computed(() => {
  if(dateDimension.value === 'day'|| dateDimension.value === 'month'){
    return initData.value;
  }else if (dateDimension.value === 'week') {
    return weekInitData.value;
  }
});


onBeforeUnmount(() => {
  emitter.all.clear();
});
</script>

<template>
  <div class="px-3.5">
    <el-card body-style="padding: 10px" class="mb-3.5 mt-3.5">
      <div class="custom-card-style flex gap-1.5 justify-between items-start my-1.5 mx-2 mb-5">
        <Selector ref="selectorRef" @update:updateData="updateDataChange" />
        <DataPicker class="flex-item" style="display: flex; align-items: center;" @dateChange="handelDateChange" />
      </div>

      <DateTendency
          :fetch-line-month="getLineForMonth"
          :fetch-line-week="getLineForWeek"
          :fetchCard="getCardDayData"
          :fetchCardMonth="getCardMonthData"
          :fetchCardWeek="getCardWeekData"
          :fetchLine="getLineForDay"
          :initMetric="initMetric"
          :metricEnum="currentMetricEnum"
          :query="queryParams"
      >
      </DateTendency>
    </el-card>
  </div>
  <div class="px-3.5">
    <el-card>
      <TableSelect :taskIds="taskIds"></TableSelect>
    </el-card>
  </div>

</template>

<style scoped>
.custom-card-style {
  z-index: 999;
  border-radius: 8px;
  top: 0;
}

.el-card {
  border: none;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
}


</style>
