<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "RadarChat",
});
</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 { Select, SelectOption, Spin } from "ant-design-vue";
import { onMounted, onUnmounted, ref, computed } 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;
};

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

const onBatchChange = async (e: string | any, ...args: any) => {
  if (batchId.value) {
    await props.statistics.api.onUpdateRadarChat(batchId.value);
  }
};

const bacthTimeOptions = ref([]);

const loading = ref(false);

onMounted(() => {
  props.statistics.api.radarStartScanAnimation(echartRef);
});

onUnmounted(() => {
  console.log("radarChatUnmount");
  props.statistics.api.radarStopScanAnimation();
});

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

<template>
  <div :class="prefix">
    <Chat :options="props.statistics.state.radarChatOptions.value" @init="echartInit" />

    <!-- <ModuleCard
      title="数据可视化"
      :loading="props.statistics.requestMap.radarStatisticsRequest.loading.value"
    >
      <template #head-extra>
        <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="loading" #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>
    </ModuleCard> -->
  </div>
</template>

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

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