<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "DataViewPartOne",
});
</script>

<script setup lang="ts">
import ModuleCard from "@/views/dataManage/index/components/Card/ModuleCard.vue";
import Chat from "@/views/dataManage/index/components/Chat/chat.vue";
import SpectrumDiagramChatCarouse from "@/views/dataManage/index/components/Module/SpectrumDiagramChatCarouse.vue";
import { Select, SelectOption, Spin } from "ant-design-vue";
import { onMounted, onUnmounted, ref, computed, unref } from "vue";

interface PropsType {
  statistics: Record<string, any>;
  dataExport: Record<string, any>;
}

const props = withDefaults(defineProps<PropsType>(), {
  statistics: () => {
    return {
      state: {},
      api: {},
    };
  },
  dataExport: () => {
    return {
      state: {},
      api: {},
    };
  },
});

const echartRef = ref<any>(null);

const echartInit = (chart: any) => {
  echartRef.value = chart;
  if (panel.value == "radar") {
    props.statistics.api.radarStartScanAnimation(echartRef);
  }
};

const onEchatDestory = () => {
  if (panel.value == "radar") {
    props.statistics.api.radarStopScanAnimation();
    // props.statistics.api.radarStartScanAnimation(echartRef);
  }
};

const batchId = ref<number | string>();

const onBatchChange = async (e: string | any, ...args: any) => {
  if (batchId.value) {
    updateChat();
  }
};

const loading = computed(() => {
  return (
    props.statistics.requestMap.lineStatisticsRequest.loading.value ||
    props.statistics.requestMap.radarStatisticsRequest.loading.value ||
    props.statistics.state.spectrumImgsLoading.value
  );
});

const panel = ref<string>("radar");

const panelOptions = ref([
  { label: "雷达图", value: "radar" },
  { label: "折线图", value: "line" },
  { label: "频谱图", value: "spectrumDiagram" },
]);

const onPanelChange = async (e: string | any, ...args: any) => {
  updateChat();
};

const updateChat = async () => {
  props.statistics.api.radarStopScanAnimation();
  if (panel.value == "radar") {
    await props.statistics.api.onUpdateRadarChat(batchId.value);
    props.statistics.api.radarStartScanAnimation(echartRef);
  } else if (panel.value == "line") {
    await props.statistics.api.onUpdateLineChat(batchId.value);
  } else if (panel.value == "spectrumDiagram") {
    await props.statistics.api.onUpdateSpectrumDiagramChat(batchId.value);
  }
};

const showOptions = computed(() => {
  if (panel.value === "radar") {
    return props.statistics.state.radarChatOptions.value;
  } else if (panel.value === "line") {
    return props.statistics.state.lineChatOptions.value;
  } else {
    return props.statistics.state.radarChatOptions.value;
  }
});

const showData = computed(() => {
  if (panel.value === "spectrumDiagram") {
    console.log("spectrumDiagramChatImgs", props.statistics.state.spectrumDiagramChatImgs.value);
    return props.statistics.state.spectrumDiagramChatImgs.value;
  } else {
    return showOptions.value;
  }
});

onMounted(() => {
  console.log("props", props.statistics.requestMap);
});

onUnmounted(() => {
  console.log("radarChatUnmount");
  onEchatDestory();
});

const prefix = "data-view-part-one";
</script>

<template>
  <div :class="prefix">
    <ModuleCard title="数据可视化" :loading="loading">
      <template #head-extra>
        <Select
          placeholder="请选择类型"
          show-search
          v-model:value="panel"
          style="margin-left: 20px; width: 240px"
          @change="onPanelChange"
        >
          <template v-if="loading" #notFoundContent>
            <Spin size="small" />
          </template>
          <SelectOption v-for="item in panelOptions" :value="item.value">{{
            item.label
          }}</SelectOption>
        </Select>

        <Select
          placeholder="请选择批号"
          show-search
          v-model:value="batchId"
          @change="onBatchChange"
          style="margin-left: 20px; width: 240px"
          :loading="props.statistics.requestMap.exportDataListRequest.loading.value"
        >
          <template
            v-if="props.statistics.requestMap.exportDataListRequest.loading.value"
            #notFoundContent
          >
            <Spin size="small" />
          </template>
          <SelectOption
            v-for="item in props.statistics.state.exportData.value"
            :value="item.track_id"
            >{{ item.track_id }}</SelectOption
          >
        </Select>
      </template>
      <template v-if="['radar', 'line'].includes(unref(panel))">
        <Chat :options="showData" @init="echartInit" />
      </template>
      <template v-else>
        <SpectrumDiagramChatCarouse :imgs="showData" />
      </template>
    </ModuleCard>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "data-view-part-one";

.#{$prefix} {
  width: 100%;
  height: 100%;
}
</style>
