import { View, Image, Text, Map } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useDidHide, useDidShow } from "@tarojs/taro";
import { useRef, useState } from "react";
import "./index.less";
import { getAuth } from "@/utils/comm";
import locationImg from "@/assets/images/event/user.png";
import fly from "@/assets/images/event/fly.png";
import { Progress } from "@taroify/core";
function AutoDispatch() {
  const [progressVal, setProgressVal] = useState<number>(0);
  const val = useRef<number>(0);
  const timerId = useRef<any>();
  useDidShow(async () => {
    const auth = await getAuth("scope.userLocation", "请打开位置权限", () => {
      Taro.navigateBack();
    });
    if (auth) {
      timerId.current = setInterval(() => {
        val.current = val.current + Math.floor(Math.random() * 10);
        if (val.current > 100) {
          clearInterval(timerId.current);
          Taro.redirectTo({
            url: "/pages/Event/view/orderDirect/index",
          });
          return;
        }
        setProgressVal(val.current);
      }, 300);
    }
  });
  useDidHide(() => {
    timerId.current && clearInterval(timerId.current);
  });
  //派遣信息
  const dispatchStorgeInfo: API.EventMembers = JSON.parse(
    Taro.getStorageSync("dispatchInfo")
  );
  //处置人员
  const disposeMember = dispatchStorgeInfo?.disposeMembers;
  return (
    <View className="auto-wrap">
      <Image src={fly} className="fly-icon" />
      <Text className="title">正在自动化派遣</Text>
      <Text className="tip">已进入诚管24指令直达通道加速派遣</Text>
      <Progress percent={progressVal} className="progress-wrap" />
      <Map
        longitude={104.083668}
        latitude={30.406095}
        showLocation
        onError={() => {}}
        className="map-wrap"
        circles={[
          {
            latitude: 30.406095,
            longitude: 104.083668,
            fillColor: "rgba(207, 224, 245,.9)",
            color: "#dae6f2",
            radius: 100,
            strokeWidth: 3,
          },
        ]}
        markers={disposeMember.map((it, index) => ({
          id: index,
          latitude: Number(it.centerPoint.lat),
          longitude: Number(it.centerPoint.lng),
          iconPath: locationImg,
          width: "48rpx",
          height: "60rpx",
        }))}
      />
    </View>
  );
}

export default AutoDispatch;
