import {
  IAreaOverlayDataOption,
  IImagePointOverlayDataOption,
  IODSegmentOverlayDataOption,
  IOverlayFilter,
  IPointOverlayDataOption,
  IPolygonOverlayDataOption,
  ISegmentOverlayDataOption,
} from "@/modules/hpaas-core/visual/overlay.types";

export const qujianLayerConfig: IImagePointOverlayDataOption = {
  key: "qujian",
  name: "区间测速卡口",
  category: "设备管理",
  color: "#aaaaaa",
  showInPanel: true,
  lngKey: "lng",
  latKey: "lat",
  filterKey: "value",
  filterMultiSelect: true,
  show: false,
  type: "image-point",
  filters: [
    {
      color: "#48BE0B",
      name: "已生效",
      value: 2,
      checked: true,
      imgUrl: "/icon/7.png",
      imgSize: 8,
      imgOpacity: 0.8,
      totalCount: 0,
    },
    {
      color: "#9EC38A",
      name: "未生效",
      value: 1,
      checked: true,
      imgUrl: "/icon/7.png",
      imgSize: 8,
      imgOpacity: 0.4,
      totalCount: 0,
    },
  ],
};

export const chuangjinLayerConfig: IImagePointOverlayDataOption = {
  key: "chuangjin",
  name: "闯禁抓拍卡口",
  category: "设备管理",
  color: "#aaaaaa",
  showInPanel: true,
  filterMultiSelect: true,
  show: false,
  type: "image-point",
  lngKey: "lng",
  latKey: "lat",
  filterKey: "value",
  filters: [
    {
      color: "#5E6AB0",
      name: "已生效",
      value: 2,
      checked: true,
      imgUrl: "/icon/6.png",
      imgSize: 8,
      imgOpacity: 0.8,
      totalCount: 0,
    },
    {
      color: "#ACB7F1",
      name: "未生效",
      value: 1,
      checked: true,
      imgUrl: "/icon/6.png",
      imgSize: 8,
      imgOpacity: 0.4,
      totalCount: 0,
    },
  ] as IOverlayFilter[],
};

export const poiLayerConfig: IImagePointOverlayDataOption = {
  key: "public",
  name: "企业公共点",
  category: "泥头车业务",
  color: "#aaaaaa",
  showInPanel: true,
  filterMultiSelect: true,
  showImagePointText: true,
  show: false,
  type: "image-point",
  lngKey: "lng",
  latKey: "lat",
  filterKey: "value",
  filters: [
    {
      color: "#73BFE7",
      imgUrl: "/icon/旗子.png",
      imgSize: 10,
      imgOpacity: 0.6,
      name: "公共点",
      value: "*",
      checked: true,
      totalCount: 0,
    },
  ],
};

export const breakingLayerConfig: IPointOverlayDataOption = {
  key: "breaking",
  name: "泥头车违法点",
  category: "泥头车业务",
  color: "#44A1F8",
  showInPanel: true,
  type: "point-cluster",
  filterMultiSelect: true,
  show: false,
  lngKey: "lng",
  latKey: "lat",
  filterKey: "value",
  filters: [
    {
      color: "#F9A629",
      name: "超速",
      value: "超速",
      checked: true,
      totalCount: 0,
    },
    {
      color: "#A36FF8",
      name: "违停",
      value: "违停",
      checked: true,
      totalCount: 0,
    },
    {
      color: "#E75151",
      name: "闯禁",
      value: "闯禁",
      checked: true,
      totalCount: 0,
    },
  ],
};

export const parkingLayerConfig: IPointOverlayDataOption = {
  key: "parking",
  name: "泥头车停车记录",
  category: "泥头车业务",
  color: "#aaaaaa",
  showInPanel: true,
  type: "point-cluster",
  filterMultiSelect: true,
  show: false,
  lngKey: "lng",
  latKey: "lat",
  filterKey: "value",
  filters: [
    {
      color: "#5181FF",
      name: "停车点",
      value: "*",
      checked: true,
      totalCount: 0,
    },
  ],
};

export const filterAreaLayerConfig: IPolygonOverlayDataOption = {
  key: "自定义区域过滤",
  name: "自定义区域过滤",
  category: "泥头车业务",
  showInPanel: false,
  show: true,
  type: "polygon",
  filterMultiSelect: false,
  // colors: ["#5181FF", "#E75151", "#A36FF8", "#F9A629", "#73BFE7", "#5E6AB0", "#48BE0B"],
  filters: [],
  filterKey: "",
};

export const journeyPathLayerConfig: ISegmentOverlayDataOption = {
  key: "行程轨迹",
  name: "行程轨迹（带动画）",
  category: "泥头车业务",
  showInPanel: true,
  show: false,
  type: "segment-path",
  filterMultiSelect: true,
  segmentUidKey: "",
  filterKey: "",
  lineArc: false,
  pathAnimate: true,
  pathAnimateIcon: "/icon/货车.png",
  pathAnimateIconSize: 30,
  pathAnimateHTMLTemplate: (props: any) => {
    let tooltipString = '<div style="padding:10px;min-width:180px;color:#fff;pointer-events:none;">';

    if (props.enterpriseName) {
      tooltipString += `<div style="display:flex;justify-content: space-between;pointer-events:none;"><span>企业</span>  <span style="text-align:right;padding-left:10px;display:inline-block;max-width:100px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis">${props.enterpriseName}</span></div>`;
    }
    if (props.plate) {
      tooltipString += `<div style="display:flex;justify-content: space-between;pointer-events:none;"><span>车牌号</span>  <span style="text-align:right;padding-left:10px;">${props.plate}</span></div>`;
    }
    if (props.trip_start_time) {
      tooltipString += `<div style="display:flex;justify-content: space-between;pointer-events:none;"><span>开始时间</span>  <span style="text-align:right;padding-left:10px;">${
        props.trip_start_time.split(" ")[1] || props.trip_start_time.split(" ")[0]
      }</span></div>`;
    }
    if (props.trip_end_time) {
      tooltipString += `<div style="display:flex;justify-content: space-between;pointer-events:none;"><span>结束时间</span>  <span style="text-align:right;padding-left:10px;">${
        props.trip_end_time.split(" ")[1] || props.trip_end_time.split(" ")[0]
      }</span></div>`;
    }
    if (props.mean_velocity) {
      tooltipString += `<div style="display:flex;justify-content: space-between;pointer-events:none;"><span>平均速度</span>  <span style="text-align:right;padding-left:10px;">${props.mean_velocity}km/h</span></div>`;
    }
    // if (props.deviate_rate) {
    tooltipString += `<div style="display:flex;justify-content: space-between;pointer-events:none;"><span>偏离率</span>  <span style="text-align:right;padding-left:10px;">${
      props.deviate_rate || 0
    }%</span></div>`;
    // }
    tooltipString += "</div>";
    return tooltipString;
  },
  filters: [
    {
      name: "正常轨迹",
      color: "#419973",
      value: "1",
      checked: true,
    },
    {
      name: "偏离轨迹",
      value: "0",
      color: "#F65252",
      checked: true,
    },
  ],
};

export const journeyJumpPathLayerConfig: IODSegmentOverlayDataOption = {
  key: "行程OD",
  name: "行程OD",
  category: "泥头车业务",
  showInPanel: true,
  show: false,
  type: "segment-od",
  filterMultiSelect: true,
  size: 3,
  segmentUidKey: "",
  filterKey: "",
  filters: [
    {
      name: "单一行程",
      color: "#b97feb",
      value: "1",
      checked: true,
    },
  ],
};

export const allAreaLayerConfig: IAreaOverlayDataOption = {
  key: "区域企业信息统计",
  showInPanel: true,
  category: "泥头车业务",
  show: true,
  name: "区域企业信息统计",
  type: "area",
  // colors: ["lightskyblue", "yellow", "orangered"],
  colors: ["#ffaaa7", "#d5ecc2", "#98ddca"],
  colorOpacity: 0.6,
  filterMultiSelect: false,
  areaCodeKey: "",
  filterKey: "",
  popupTemplate: (props: any) => {
    let tooltipString = '<div style="padding:10px;min-width:200px;color:#fff;pointer-events:none;">';

    if (props.name) {
      tooltipString += `<div style="display:flex;justify-content: space-between;pointer-events:none;"><span>区域</span>  <span style="text-align:right;padding-left:10px;">${props.name}</span></div>`;
    }
    if (props.enterpriseCount) {
      tooltipString += `<div style="display:flex;justify-content: space-between;pointer-events:none;"><span>企业数</span>  <span style="text-align:right;padding-left:10px;">${props.enterpriseCount}</span></div>`;
    }
    if (props.plateCount) {
      tooltipString += `<div style="display:flex;justify-content: space-between;pointer-events:none;"><span>车辆数</span>  <span style="text-align:right;padding-left:10px;">${props.plateCount}</span></div>`;
    }
    tooltipString += "</div>";
    return tooltipString;
  },
  filters: [
    {
      name: "车辆数",
      value: "plateCount",
      checked: false,
    },
    {
      name: "企业数",
      value: "enterpriseCount",
      checked: true,
    },
  ],
};