import useEnterpriseReportStore from "@/store/enterpriseReport";
import dayjs from "dayjs";
import { defineComponent, ref } from "vue";
import style from "@/assets/style/Report/map.module.less";
import { Spin, Button, Slider, Select, Radio, message } from "ant-design-vue";
import { DownOutlined, SearchOutlined, FilterOutlined } from "@ant-design/icons-vue";
import { useStore } from "@/hook/useStore";
const Timeline = defineComponent({
  setup() {
    const { enterpriseData, activeTooltipUid, mapShowData, filters, map } = useStore(useEnterpriseReportStore);
    const monthStartDay = Math.ceil(
      dayjs().subtract(30, "day").subtract(60, "day").startOf("month").toDate().getTime() / 1000 / 60 / 60 / 24
    );
    const monthEndDay = Math.ceil(dayjs().subtract(60, "day").add(3, "day").toDate().getTime() / 1000 / 60 / 60 / 24);
    const today = Math.ceil(dayjs().toDate().getTime() / 1000 / 60 / 60 / 24);

    const lastMonthFirstDay = Math.ceil(dayjs().startOf("month").toDate().getTime() / 1000 / 60 / 60 / 24);
    const marks: any = {};
    for (let i = monthStartDay; i < monthEndDay; i++) {
      marks[i] = i % 3 == 0 ? dayjs(i * 1000 * 60 * 60 * 24).format("MM-DD") : "";
    }
    const selectedDay = ref<number>(Math.ceil(dayjs(filters.value.date).toDate().getTime() / 1000 / 60 / 60 / 24));
    function formatter(value: any) {
      return `${dayjs(value * 1000 * 60 * 60 * 24).format("YYYY-MM-DD")}`;
    }
    const selectedDayChange = (value: number) => {
      selectedDay.value = value;
      filters.value.date = dayjs(value * 1000 * 60 * 60 * 24).format("YYYY-MM-DD");
    };

    let timelineTimer: number;
    const startPlay = () => {
      isPlay.value = true;
      if (selectedDay.value >= monthEndDay) {
        selectedDay.value = monthStartDay;
        selectedDayChange(selectedDay.value);
      } else {
        selectedDay.value++;
        selectedDayChange(selectedDay.value);
      }

      timelineTimer = setInterval(() => {
        if (selectedDay.value < monthEndDay) {
          selectedDay.value++;
          selectedDayChange(selectedDay.value);
        } else {
          pausePlay();
        }
      }, 1500);
    };

    const pausePlay = () => {
      isPlay.value = false;
      clearInterval(timelineTimer);
    };
    const isPlay = ref<boolean>(false);
    const togglePlay = () => {
      if (isPlay.value) {
        pausePlay();
      } else {
        startPlay();
      }
    };

    return () => (
      <div style="" class={style.timeline}>
        <div style="flex:1">
          <Slider
            marks={marks}
            value={selectedDay.value}
            tooltipVisible={true}
            min={monthStartDay}
            max={monthEndDay}
            tipFormatter={formatter}
            onChange={selectedDayChange}
          />
        </div>
        <div style="" class={style.playBtnContainer} onClick={togglePlay}>
          {isPlay.value ? (
            <img src="/icon/pause.png" style="" class={style.playBtn} />
          ) : (
            <img src="/icon/play.png" style="" class={style.playBtn} />
          )}
        </div>
      </div>
    );
  },
});

export default Timeline;