import MapContainer from "@/components/map/MapComponent";
import MapUtl from "@/components/map/mapUtil";
import { Button, message, Modal, Space } from "antd";
import { inject, observer } from "mobx-react";
import { useState } from "react";
import { DatePicker } from "antd";

const { RangePicker } = DatePicker;
const Move = (props) => {
  const { usrStore, id } = props;
  const [isOpen, setOpen] = useState<boolean>(false);
  const [times, setTimes] = useState<string[]>([]);
  const serchSD = () => {
    if (times.length===0){
      message.error("请选择时间区间")
      return
    }
    usrStore.getSite({
      "id":id,
      "start_time":times[0],
      "end_time":times[1],
    }).then((res) => {
      let data: any = [];
      if (res.data && res.data.record) {
        res.data.record.forEach((element) => {
          data.push([element.long, element.lat]);
        });
        if (data.length === 0) {
          message.info("暂无轨迹数据");
          return;
        }
        if (data.length > 0) {
          MapUtl.polyline(data);
        }
      }
    });
  };
 
  return (
    <>
      <Button
        type="dashed"
        size="small"
        onClick={() => {
          setOpen(true);
        }}
      >
        查看轨迹信息
      </Button>

      <Modal
        title={"轨迹回放"}
        width={"70%"}
        open={isOpen}
        centered
        okText="确定"
        cancelText="取消"
        footer={null}
        destroyOnClose={true}
        onCancel={() => {
          setOpen(false);
        }}
      >
        <div>
          <Space>
            <RangePicker onChange={(v,s)=>{
              setTimes(s);
            }} />
            <Button
              type="dashed"
              size="small"
              onClick={() => {
                serchSD();
              }}
            >
              查看轨迹信息
            </Button>
          </Space>
          <div style={{ height: "10px" }}></div>
          <MapContainer />
        </div>
      </Modal>
    </>
  );
};

// getSite
export default inject("usrStore")(observer(Move));
