import { defineComponent, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Select, DatePicker } from "ant-design-vue";
import { DownOutlined } from "@ant-design/icons-vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
// import html2canvas from "html2canvas";

import AreaInfo from "./roadUnitInfo/AreaInfo";
import RoadInfo from "./roadUnitInfo/RoadInfo";
import RoadConfig from "./roadUnitInfo/RoadConfig";
import { getSortedAreaDataByDate } from "./roadUnitInfo/fetchData";
import { EnumRoadConfig } from "@/store/roadUnit/types";

import { useStore } from "@/hook/useStore";
import useGlobalState from "@/store/global";
import useRoadUnitStore from "@/store/roadUnit";

import style from "@/assets/style/RoadUnit/roadNetworkInfo.module.less";
import downloadIcon from "@/assets/img/roadUnit/download.svg";

const { Option } = Select;

export default defineComponent({
  components: {
    Select,
    DownOutlined,
    DatePicker,
    Option,
    AreaInfo,
    RoadInfo,
    RoadConfig,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    /**
     * 区域名称
     * 选中日期
     * 选中道路名称
     * 是否道路配置页面
     * 区域通行车辆、车次、车速分日表
     */
    const { area: areaName, time: date, road: roadName, roadConfig: isConfig, areaInfoByDate } = useStore(
      useRoadUnitStore
    );

    /**
     * 区域列表
     */
    const { areaList } = useStore(useGlobalState);

    /**
     * 当前组件名称
     * 由道路名称和是否道路配置页面决定
     */
    const activeComponentName = computed(() => {
      return roadName.value ? isConfig.value === EnumRoadConfig.开 ? <RoadConfig /> : <RoadInfo /> : <AreaInfo />;
    });

    /**
     * 区域通行车辆、车次、车速分日表
     * 用来渲染地图中的车次、车速可视化
     * 用来渲染AreaInfo页面的车次、车速统计和list
     * 监听date和areaName来做出改变
     */
    const getAreaDataByDate = async () => {
      try {
        const response = await getSortedAreaDataByDate(date.value, areaName.value);
        areaInfoByDate.value = response;
      } catch (e) {
        console.error(e);
      }
    };
    getAreaDataByDate();
    watch([date, areaName], () => {
      getAreaDataByDate();
    });

    /**
     * 区域切换
     */
    const areaChange = (area: string) => {
      router.replace({
        path: route.path,
        query: {
          ...route.query,
          area: area,
        },
      });
    };

    /**
     * 日期切换
     */
    const dateChange = (date: string) => {
      router.replace({
        path: route.path,
        query: {
          ...route.query,
          time: date,
        },
      });
    };

    const exportCanvas = () => {
      // const app = document.getElementById("app");
      // const canvas = document.getElementsByClassName("amap-layer")[0] as HTMLCanvasElement;
      // const gl = canvas.getContext("webgl", { preserveDrawingBuffer: true, depth: true, antialias: true });
      // console.log(gl);
      // if (gl) {
      //   const dom = document.createElement("a");
      //   dom.href = canvas.toDataURL("image/png");
      //   dom.download = new Date().getTime() + ".png";
      //   dom.click();
      // }
    };

    return () => (
      <div class={style.container}>
        <div class={style.header}>
          <div class={style.areaName}>
            <Select
              value={areaName.value}
              onChange={(e) => areaChange(e)}
              v-slots={{
                suffixIcon: () => <DownOutlined style={{ fontSize: "18px", color: "#fff" }} />,
              }}
            >
              {areaList.value.map((item) => (
                <Option key={item.uid} value={item.name}>
                  {"深圳市" + item.name}
                </Option>
              ))}
            </Select>
            <img class={style.download} src={downloadIcon} onClick={() => exportCanvas()} />
          </div>
          {isConfig.value === "0" && (
            <div class={style.timeRange}>
              <DatePicker
                size="large"
                value={date.value}
                locale={locale}
                valueFormat="YYYY-MM-DD"
                onChange={(d, ds) => dateChange(ds)}
              />
            </div>
          )}
        </div>
        <div class="body">{activeComponentName.value}</div>
      </div>
    );
  },
});