<script lang="jsx">
import InfoGroup from "@/components/InfoGroup/index.vue";
import { formatStake } from "@/utils/road";

export default {
  inject: ["getMap"],
  props: {
    data: {
      type: Object,
      required: true,
    },
    feature: {
      type: Object,
      required: true,
    },
  },
  computed: {
    cluster_id() {
      return this.feature?.properties?.cluster_id;
    },
  },
  watch: {
    cluster_id(newVal) {
      if (newVal) {
        this.getEventList();
      }
    },
  },
  mounted() {
    this.getEventList();
  },
  methods: {
    getEventList() {
      const { cluster_id, point_count } = this.feature.properties;
      if (cluster_id && point_count) {
        this.getMap().then((map) => {
          this.map = map;
          const source = map.getSource("event");
          source.getClusterLeaves(cluster_id, point_count, 0, (err, res) => {
            this.eventList = res.sort(
              (a, b) => a?.properties?.stake - b?.properties?.stake
            );
          });
        });
      }
    },
  },
  render() {
      if (!this.data) {
        return null;
      }
      const { point_count, maxStake, minStake } = this.data;
      const arr = [
        {
          label: "桩号",
          content: `${formatStake(minStake)}~${formatStake(maxStake)}`,
        },
      ];
      const title = `${formatStake(minStake)}~${formatStake(
        maxStake
      )}有${point_count}个事件`;
      return <InfoGroup cols={1} title={title} data={arr} />;
  },
};
</script>
