<template>
  <div class="ZhiChu_LuXianGuHua">
    <div class="closeButton">
      <CloseButton :dataStyle="option.dataStyle" @click="option.status.hide = true" />
    </div>
    <div class="mainBodyDiv">
      <div class="title">
        <Title :dataStyle="option.dataStyle" />
        <span class="titleName"> 路径规划 </span>
      </div>
      <div class="way">
        <div class="way_start">
          <n-tooltip placement="top" trigger="hover">
            <template #trigger>
              <StartAndEndTitle
                :name="option.dataset.startName"
                :dataStyle="option.dataStyle"
                :wayColor="wayColorList.startColor"
                @click="moveLocation(option.dataset.startLngLat)"
              />
            </template>
            {{ option.dataset.startName }}
          </n-tooltip>

          <div class="way_start_addButton">
            <n-button quaternary @click="addWayPoint">
              <PlusOutlined
                :style="{
                  marginRight: '5px',
                  color: option.dataStyle.wayStartFontColor,
                  fontSize: option.dataStyle.wayStartFontSize + 'px',
                }"
              />
              <span
                :style="{
                  color: option.dataStyle.wayStartFontColor,
                  fontSize: option.dataStyle.wayStartFontSize + 'px',
                }"
              >
                添加途经点
              </span>
            </n-button>
          </div>
        </div>
        <div class="way_list">
          <div class="way_item" v-for="(item, index) in option.dataset.way" :key="index">
            <div class="way_item_num">
              <span>{{ index + 1 }}</span>
            </div>
            <div class="way_item_icon">
              <ButtonIcon
                :dataStyle="option.dataStyle"
                :wayColor="
                  item.wayFlag ? wayColorList.wayColorChoose : wayColorList.wayColorNoChoose
                "
                @click="changeWayPointFlag(item)"
              />
            </div>
            <div class="way_item_input">
              <n-select
                v-model:value="item.wayName"
                filterable
                placeholder="请输入灭火队伍资源"
                label-field="districtAndName"
                value-field="districtAndName"
                remote
                :clear-filter-after-select="false"
                :options="selectWayPointOptions[index]"
                @search="searWayPointSelectOptions($event, index)"
                @update:value="updateWayPointLocaion(item, index)"
              />
            </div>
            <div class="way_item_button">
              <ButtonUp
                v-if="index != 0"
                :dataStyle="option.dataStyle"
                @click="moveupWayPoint(index)"
              />
              <ButtonClose :dataStyle="option.dataStyle" @click="removeWayPoint(index)" />
              <ButtonLocation :dataStyle="option.dataStyle" @click="moveLocation(item.wayLngLat)" />
            </div>
          </div>
        </div>
        <div class="way_end">
          <n-tooltip placement="top" trigger="hover">
            <template #trigger>
              <StartAndEndTitle
                :name="option.dataset.endName"
                :dataStyle="option.dataStyle"
                :wayColor="wayColorList.endColor"
                @click="moveLocation(option.dataset.endLngLat)"
              />
            </template>
            {{ option.dataset.endName }}
          </n-tooltip>
        </div>
      </div>
      <div class="plan">
        <n-button quaternary @click="directionRoute">
          <PlanButton :dataStyle="option.dataStyle" />
          <span
            :style="{
              color: option.dataStyle.planFontColor,
              fontSize: option.dataStyle.planFontSize + 'px',
              marginLeft: '8px',
            }"
          >
            规划方案
          </span>
        </n-button>
        <div class="driveOrWalkDiv">
          <DriveOrWalk
            :value="'驾车'"
            :type="'drive'"
            :driveOrWalk="driveOrWalk"
            :dataStyle="option.dataStyle"
            @click="driveOrWalk = 'drive'"
          />
          <n-tooltip placement="bottom" trigger="hover" :style="{ maxWidth: '90px' }">
            <template #trigger>
              <DriveOrWalk
                :value="'步行'"
                :type="'walk'"
                :driveOrWalk="driveOrWalk"
                :dataStyle="option.dataStyle"
                @click="driveOrWalk = 'walk'"
              />
            </template>
            步行不经过途经点
          </n-tooltip>
        </div>
      </div>
      <div class="line_result_list">
        <div class="line_item" v-for="(item, index) in lineResult" :key="index">
          <LineBackImage :dataStyle="option.dataStyle" />
          <div class="line_button" @click="getLocationLines(item.route_key)">
            <LineButtonFunctioin :item="item" :nowLine="nowLine" :dataStyle="option.dataStyle" />
          </div>
          <div
            class="timeDiv"
            :style="{
              fontSize: '16px',
              color: '#FFFFFF',
              marginLeft: '10px',
            }"
          >
            耗时
            <span
              :style="{
                fontSize: '20px',
                color: '#58FF95',
                marginLeft: '8px',
                marginRight: '8px',
              }"
            >
              {{ Math.round(item.route_time / 60) }}
            </span>
            分钟
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref, onMounted, onUnmounted } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import cloneDeep from 'lodash/cloneDeep';
  import { PlusOutlined, CloseCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
  import {
    CloseButton,
    Title,
    StartAndEndTitle,
    PlanButton,
    DriveOrWalk,
    LineBackImage,
    LineButtonFunctioin,
    ButtonIcon,
    ButtonLocation,
    ButtonClose,
    ButtonUp,
  } from './svg/svg';
  import {
    wayColorList,
    getWalkingRoute,
    getDrivingRoute,
    getInputTips,
    getRegeoByLocation,
  } from './ts/direction';
  import { useMessage } from '@/hooks/web/useMessage';
  import { gcj02towgs84, wgs84togcj02 } from 'coordtransform';
  import * as mars3d from 'mars3d';

  const { createMessage } = useMessage();

  const chartEditStore = useChartEditStore();
  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });

  const { w, h, x, y } = toRefs(props.chartConfig.attr);

  const option = reactive({
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
    status: props.chartConfig.status,
  });

  // 地图-起点、终点、途经点------------------------------------------------------------------
  let startGraphicData: any = null;
  let startGraphicLayers = new mars3d.layer.GraphicLayer();
  let endGraphicData: any = null;
  let endGraphicLayers = new mars3d.layer.GraphicLayer();
  let wayGraphicData: any = [];
  let wayGraphicLayers = new mars3d.layer.GraphicLayer();
  //路线的图层
  let pathGraphicLayers: any = null;

  // 输入提示options
  const selectWayPointOptions: any = ref([]);
  // 获取输入提示options
  const searWayPointSelectOptions = (event, index) => {
    if (event) {
      getInputTips({
        keywords: event,
        location: option.dataset.startLngLat.toString(),
      }).then((res) => {
        selectWayPointOptions.value[index] = res;
      });
    }
  };
  // 同时修改坐标
  const updateWayPointLocaion = (item, index) => {
    let s = selectWayPointOptions.value[index].filter((v) => v.districtAndName == item.wayName);
    item.wayLngLat = s[0].location.split(',');
    // 途经点映射到地图
    getLocationPoints('way');
    // 获取高德路线+路线叠加到地图上
    directionRoute();
  };

  // 途经点-增加
  function addWayPoint() {
    if (option.dataset.way.length > 15) {
      createMessage.warning('途经地点最多只能设置16个');
      return;
    }
    option.dataset.way.push({
      wayName: '',
      wayLngLat: [],
      wayFlag: false,
    });
    // selectWayPointOptions.value.push({});
  }
  // 途经点-修改状态
  function changeWayPointFlag(item) {
    item.wayFlag = !item.wayFlag;
    if (item.wayLngLat && item.wayName) {
      // 途经点映射到地图
      getLocationPoints('way');
      // 获取高德路线+路线叠加到地图上
      directionRoute();
    }
  }
  // 途经点-修改顺序
  function moveupWayPoint(index) {
    const element = option.dataset.way[index];
    option.dataset.way.splice(index, 1);
    option.dataset.way.splice(index - 1, 0, element);
    // 途经点映射到地图
    getLocationPoints('way');
    // 获取高德路线+路线叠加到地图上
    directionRoute();
  }
  // 途经点-减少
  function removeWayPoint(index) {
    let way = option.dataset.way[index];
    if (way.wayFlag && way.wayLngLat && way.wayName) {
      option.dataset.way.splice(index, 1);
      // 途经点映射到地图
      getLocationPoints('way');
      // 获取高德路线+路线叠加到地图上
      directionRoute();
    } else {
      option.dataset.way.splice(index, 1);
    }
  }
  // 移动位置
  function moveLocation(lngLat) {
    if (lngLat.length > 0) {
      window.globalMap.flyToPoint([lngLat[0], lngLat[1]], {
        alt: 4269.7,
        heading: 359.2,
        pitch: -51.9,
      });
    } else {
      createMessage.warning('此点没有正确的地理坐标');
    }
  }

  // 起点、终点、途经点映射到地图
  function getLocationPoints(type) {
    // 起点
    if (type == 'start') {
      // 删除旧数据
      if (startGraphicData != null) {
        startGraphicLayers.removeGraphic(startGraphicData);
      }
      // 图层
      window.globalMap.addLayer(startGraphicLayers);
      // 图层数据
      startGraphicData = null;

      let startGraphic = new mars3d.graphic.BillboardEntity({
        id: 'ZhiChu_LuXianGuHua' + '_start',
        position: [
          parseFloat(option.dataset.startLngLat[0]),
          parseFloat(option.dataset.startLngLat[1]),
        ],
        style: {
          image: '@/assets/images/chart/zhichu/component/LuXianGuHua_point_start.png',
          // pixelOffsetX: 10,
          // pixelOffsetY: -20,
          clampToGround: true,
          scale: 0.5,
          label: {
            text: option.dataset.startName,
            font_size: 20,
            color: '#ffffff',
            pixelOffsetY: -30,
            pixelOffsetX: 0,
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 6000,
            distanceDisplayCondition_near: 0,
          },
        },
      });
      // 将新图形添加到图层中
      startGraphicLayers.addGraphic(startGraphic);
      startGraphicData = startGraphic;
    }
    // 终点
    if (type == 'end') {
      // 删除旧数据
      if (endGraphicData != null) {
        endGraphicLayers.removeGraphic(endGraphicData);
      }
      // 图层
      window.globalMap.addLayer(endGraphicLayers);
      // 图层数据
      endGraphicData = null;

      let endGraphic = new mars3d.graphic.BillboardEntity({
        id: 'ZhiChu_LuXianGuHua' + '_end',
        position: [
          parseFloat(option.dataset.endLngLat[0]),
          parseFloat(option.dataset.endLngLat[1]),
        ],
        style: {
          image: '@/assets/images/chart/zhichu/component/LuXianGuHua_point_end.png',
          // pixelOffsetX: 10,
          // pixelOffsetY: -20,
          clampToGround: true,
          scale: 0.5,
          label: {
            text: option.dataset.endName,
            font_size: 20,
            color: '#ffffff',
            pixelOffsetY: -30,
            pixelOffsetX: 0,
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 6000,
            distanceDisplayCondition_near: 0,
          },
        },
      });
      // 将新图形添加到图层中
      endGraphicLayers.addGraphic(endGraphic);
      endGraphicData = endGraphic;
    }
    // 途经点
    if ((type = 'way')) {
      // 删除旧数据
      if (wayGraphicData.length > 0) {
        wayGraphicData?.forEach((graphicLayer) => {
          wayGraphicLayers.removeGraphic(graphicLayer);
        });
      }
      // 图层
      window.globalMap.addLayer(wayGraphicLayers);
      // 图层数据
      wayGraphicData = [];

      option.dataset.way.forEach((wayItem, wayIndex) => {
        if (wayItem.wayFlag && wayItem.wayLngLat && wayItem.wayName) {
          let wayGraphic = new mars3d.graphic.BillboardEntity({
            id: 'ZhiChu_LuXianGuHua' + '_way_' + wayIndex,
            position: [parseFloat(wayItem.wayLngLat[0]), parseFloat(wayItem.wayLngLat[1])],
            style: {
              image: '@/assets/images/chart/zhichu/component/LuXianGuHua_point_way.png',
              // pixelOffsetX: 10,
              // pixelOffsetY: -20,
              clampToGround: true,
              scale: 0.5,
              label: {
                text: wayItem.wayName,
                font_size: 20,
                color: '#ffffff',
                pixelOffsetY: -30,
                pixelOffsetX: 0,
                distanceDisplayCondition: true,
                distanceDisplayCondition_far: 6000,
                distanceDisplayCondition_near: 0,
              },
            },
          });
          // 将新图形添加到图层中
          wayGraphicData.push(wayGraphic);
          wayGraphicLayers.addGraphic(wayGraphicData);
        }
      });
    }
  }

  // 驾车还是步行--------------------------------------------------------------------------
  const driveOrWalk = ref('drive');
  const nowLine = ref(0);

  // 驾车、步行 切换
  watch(
    () => driveOrWalk.value,
    () => {
      // 获取高德路线
      directionRoute();
    },
  );

  // 驾车、步行路线数据
  const lineResult: any = ref([]);

  // 获取高德路线
  const directionRoute = () => {
    // 步行
    if (driveOrWalk.value == 'walk') {
      getWalkingRoute({
        startlng: option.dataset.startLngLat[0],
        startlat: option.dataset.startLngLat[1],
        endlng: option.dataset.endLngLat[0],
        endlat: option.dataset.endLngLat[1],
      }).then((result) => {
        if (typeof result == 'string') {
          if (result == 'OVER_DIRECTION_RANGE') {
            createMessage.warning('距离太远，超过导航范围！');
            return;
          }
          if (result == 'USER DAILY_QUERY_OVER_LIMIT') {
            createMessage.warning('已经达到用户每日查询限制！');
            return;
          }
        }
        lineResult.value = result;
        // 路线叠加到地图上，默认第一条为当前道路
        getLocationLines(null);
      });
    }
    // 驾车
    if (driveOrWalk.value == 'drive') {
      getDrivingRoute({
        startlng: option.dataset.startLngLat[0],
        startlat: option.dataset.startLngLat[1],
        endlng: option.dataset.endLngLat[0],
        endlat: option.dataset.endLngLat[1],
        way: option.dataset.way,
      }).then((result) => {
        if (typeof result == 'string') {
          if (result == 'OVER_DIRECTION_RANGE') {
            createMessage.warning('距离太远，超过导航范围！');
            return;
          }
          if (result == 'USER DAILY_QUERY_OVER_LIMIT') {
            createMessage.warning('已经达到用户每日查询限制！');
            return;
          }
        }
        lineResult.value = result;
        // 路线叠加到地图上
        getLocationLines(null);
      });
    }
  };

  // 路线叠加到地图上
  function getLocationLines(key) {
    if (key) {
      // 选择的道路
      nowLine.value = key;
    } else {
      // 默认第一条为当前道路
      nowLine.value = 0;
    }
    // 图层
    if (pathGraphicLayers == null) {
      // 创建新图层并添加到地图
      pathGraphicLayers = new mars3d.layer.GraphicLayer();
      window.globalMap.addLayer(pathGraphicLayers);
    } else {
      // 清空路线图层中的数据
      pathGraphicLayers.clear();
    }

    // 绘制非选中的路线
    lineResult.value.forEach((line, lineIndex) => {
      if (lineIndex !== nowLine.value) {
        let pathGraphic = new mars3d.graphic.PolylineEntity({
          id: 'ZhiChu_LuXianGuHua' + '_path_' + lineIndex,
          positions: line.path_polyline,
          style: {
            width: 8,
            clampToGround: true,
            materialType: mars3d.MaterialType.LineFlowColor,
            materialOptions: {
              color: '#197630',
              speed: 1000,
              percent: 1,
              alpha: 1,
            },
          },
        });
        pathGraphicLayers.addGraphic(pathGraphic);
      }
    });

    setTimeout(() => {
      // 绘制选中的路线（最后绘制，确保在最上方）
      const selectedLine = lineResult.value.find((_, index) => index === nowLine.value);
      if (selectedLine) {
        let pathGraphic = new mars3d.graphic.PolylineEntity({
          id: 'ZhiChu_LuXianGuHua' + '_path_' + nowLine.value,
          positions: selectedLine.path_polyline,
          style: {
            width: 8,
            clampToGround: true,
            materialType: mars3d.MaterialType.LineFlowColor,
            materialOptions: {
              color: '#FF851B',
              speed: 1000,
              percent: 1,
              alpha: 1,
            },
          },
        });
        pathGraphicLayers.addGraphic(pathGraphic);
      }
    }, 100);
  }

  onMounted(() => {
    setTimeout(() => {
      // 右键添加功能（起点、终点、途径点）
      setContextmenuByRightClick();
      // 地图-起点、终点、途经点
      getLocationPoints('start');
      getLocationPoints('end');
      getLocationPoints('way');
      // 获取高德路线+路线叠加到地图上
      directionRoute();
    }, 1000);
  });

  onUnmounted(() => {
    // 去除右键添加的功能（起点、终点、途径点）
    removeContextmenu();
  });

  // 右键功能---------------------------------------------------------------------------
  let defaultContextmenuItems: any = null;
  // 右键添加功能（起点、终点、途径点）
  function setContextmenuByRightClick() {
    defaultContextmenuItems = window.globalMap.getDefaultContextMenu();
    let contextmenuItems = cloneDeep(defaultContextmenuItems);
    contextmenuItems.push({
      text: '路线规划',
      show: function (e) {
        return true;
      },
      children: [
        {
          text: '设置起点',
          callback: (e) => {
            const point = mars3d.LngLatPoint.fromCartesian(e.cartesian);
            getWayNameByLocation([point.lng, point.lat].toString())?.then((startName) => {
              if (startName) {
                option.dataset.startName = startName;
                option.dataset.startLngLat = [point.lng, point.lat];
                // 起点映射到地图
                getLocationPoints('start');
                // 获取高德路线+路线叠加到地图上
                directionRoute();
              } else {
                createMessage.warning('地理坐标错误，获取不到正确的地理信息！');
              }
            }) ?? createMessage.warning('无法获取地理信息，请稍后再试！');
          },
        },
        {
          text: '设置终点',
          callback: (e) => {
            const point = mars3d.LngLatPoint.fromCartesian(e.cartesian);
            getWayNameByLocation([point.lng, point.lat].toString())?.then((endName) => {
              if (endName) {
                option.dataset.endName = endName;
                option.dataset.endLngLat = [point.lng, point.lat];
                // 终点映射到地图
                getLocationPoints('end');
                // 获取高德路线+路线叠加到地图上
                directionRoute();
              } else {
                createMessage.warning('地理坐标错误，获取不到正确的地理信息！');
              }
            }) ?? createMessage.warning('无法获取地理信息，请稍后再试！');
          },
        },
        {
          text: '增加途经点',
          callback: (e) => {
            const point = mars3d.LngLatPoint.fromCartesian(e.cartesian);
            getWayNameByLocation([point.lng, point.lat].toString())?.then((wayName) => {
              if (wayName) {
                option.dataset.way.push({
                  wayName: wayName,
                  wayLngLat: [point.lng, point.lat],
                  wayFlag: true,
                });
                // 途经点映射到地图
                getLocationPoints('way');
                // 获取高德路线+路线叠加到地图上
                directionRoute();
              } else {
                createMessage.warning('地理坐标错误，获取不到正确的地理信息！');
              }
            }) ?? createMessage.warning('无法获取地理信息，请稍后再试！');
          },
        },
      ],
    });
    window.globalMap.bindContextMenu(contextmenuItems);
  }

  // 逆地理编码-通过坐标获取建筑信息
  const getWayNameByLocation = (location: any) => {
    if (location) {
      return new Promise((resolve, reject) => {
        getRegeoByLocation({
          location: location,
        })
          .then((result: any) => {
            if (typeof result == 'object') {
              if (result['error'] == 'OVER_DIRECTION_RANGE') {
                createMessage.warning('距离太远，超过导航范围！');
                return;
              }
              if (result['error'] == 'USER DAILY_QUERY_OVER_LIMIT') {
                createMessage.warning('已经达到用户每日查询限制！');
                return;
              }
            } else {
              resolve(result);
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    }
  };

  // 去除右键添加的功能（起点、终点、途径点）
  function removeContextmenu() {
    window.globalMap.bindContextMenu(defaultContextmenuItems);
  }

  // 不使用组件，则去掉图层和右键新添加功能
  watch(
    () => option.status.hide,
    (newValue) => {
      if (newValue) {
        // 去除右键添加的功能
        removeContextmenu();
        // 删除旧数据-起点、终点、途经点
        if (startGraphicData != null) {
          startGraphicLayers.removeGraphic(startGraphicData);
        }
        if (endGraphicData != null) {
          endGraphicLayers.removeGraphic(endGraphicData);
        }
        if (wayGraphicData.length > 0) {
          wayGraphicData?.forEach((graphicLayer) => {
            wayGraphicLayers.removeGraphic(graphicLayer);
          });
        }
        // 清空路线图层中的数据
        if (pathGraphicLayers != null) {
          pathGraphicLayers.clear();
        }
      } else {
        setTimeout(() => {
          // 右键添加功能
          setContextmenuByRightClick();
          // 地图-起点、终点、途经点
          getLocationPoints('start');
          getLocationPoints('end');
          getLocationPoints('way');
          // 获取高德路线+路线叠加到地图上
          directionRoute();
        }, 1000);
      }
    },
    {
      deep: true,
    },
  );

  // 数据callback处理（预览时触发）------------------------------------------------------
  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
    option.dataset = resData;
  });

  // 添加鼠标拖动监听器------------------------------------------------------------------
  let isGroup = 0;
  addListener();
  // 监听器-参数
  let isDragging = false;
  let initialMouseX;
  let initialMouseY;
  let initialDocumentX;
  let initialDocumentY;

  // 添加鼠标拖动监听器
  function addListener() {
    if (option.dataStyle.mouseListener) {
      chartEditStore.getComponentList.forEach((element) => {
        // 未分组
        if (isGroup == 1 || element.key == 'ZhiChu_LuXianGuHua') {
          isGroup = 1;
          setTimeout(() => {
            const dragDocument: any = document.querySelector('.ZhiChu_LuXianGuHua');
            if (dragDocument) {
              // 鼠标按下
              dragDocument.addEventListener('mousedown', function (event) {
                isDragging = true;
                initialMouseX = event.clientX;
                initialMouseY = event.clientY;
                initialDocumentX = cloneDeep(x.value);
                initialDocumentY = cloneDeep(y.value);
                dragDocument.style.cursor = 'grabbing';
              });
              // 鼠标移动
              dragDocument.addEventListener('mousemove', function (event) {
                if (isDragging) {
                  const deltaX = event.clientX - initialMouseX;
                  const deltaY = event.clientY - initialMouseY;
                  x.value = initialDocumentX + deltaX;
                  y.value = initialMouseY + deltaY;
                }
              });
              // 鼠标放开
              dragDocument.addEventListener('mouseup', function (event) {
                isDragging = false;
                dragDocument.style.cursor = 'default';
              });
            }
          }, 1000);
        }
      });
    }
  }

  // -------------------------------------------------------
  watch(
    () => (
      option.dataStyle.closeButtonWidth,
      option.dataStyle.waySvgWidth,
      option.dataStyle.wayButtonWidth,
      option.dataStyle.planButtonWidth,
      option.dataStyle.driveOrWalkWidth
    ),
    () => {
      option.dataStyle.closeButtonHeight = (option.dataStyle.closeButtonWidth / 52) * 30;
      option.dataStyle.waySvgHeight = (option.dataStyle.waySvgWidth / 346) * 30;
      option.dataStyle.wayButtonHeight = option.dataStyle.wayButtonWidth;
      option.dataStyle.planButtonHeight = (option.dataStyle.planButtonWidth / 43) * 44;
      option.dataStyle.driveOrWalkHeight = (option.dataStyle.driveOrWalkWidth / 81) * 23;
    },
  );
</script>

<style lang="scss" scoped>
  .ZhiChu_LuXianGuHua {
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;

    background-image: url('@/assets/images/chart/zhichu/component/LuXianGuHua_Back.png');
    background-size: 100% 100%;
  }

  .closeButton {
    position: absolute;
    top: 0.5%;
    right: 2%;
  }

  .mainBodyDiv {
    padding-top: v-bind('`${option.dataStyle.marginTop}px`');
    padding-left: v-bind('`${option.dataStyle.marginLeft}px`');
    padding-right: v-bind('`${option.dataStyle.marginLeft}px`');
  }

  .title {
    display: inline-flex;
    margin-left: 10px;
    align-items: center;
    justify-content: center;

    .titleName {
      margin-left: 10px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      color: v-bind('`${option.dataStyle.titleFontColor}`');
      font-size: v-bind('`${option.dataStyle.titleFontSize}px`');
      text-shadow: 0px 0px 5px v-bind('`${option.dataStyle.titleFontColor}`');
      text-align: left;
      font-style: normal;
    }
  }

  .way_start {
    margin-left: 10px;
    position: relative;
    margin-top: 5px;

    .way_start_addButton {
      background: #0c2411;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      height: v-bind('`${option.dataStyle.waySvgHeight}px`');
      border: 1px solid #00611a;
      top: 0px;
      right: 0px;
    }
  }

  .way_list {
    max-height: v-bind('`${h/4 + 10}px`');
    overflow-y: auto;
  }
  .way_list::-webkit-scrollbar {
    display: none;
  }
  .way_list {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .way_item {
    // margin-left: 10px;
    position: relative;
    display: inline-flex;
    margin-top: 5px;
    width: 100%;

    .way_item_num {
      font-size: 16px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      width: 18px;
    }
    .way_item_icon {
      margin-left: 3px;
      width: 11%;
    }
    .way_item_input {
      width: 55%;
    }
    .way_item_button {
      width: 25%;
      margin-left: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  ::v-deep .n-select {
    border: 0px solid #1e2421 !important;
  }
  ::v-deep .n-base-selection {
    background: #ffffff00 !important;
    color: v-bind('`${option.dataStyle.wayFontColor}`') !important;
    font-size: v-bind('`${option.dataStyle.wayFontSize}px`') !important;
  }
  ::v-deep .n-base-selection-label {
    background: #ffffff00 !important;
    color: v-bind('`${option.dataStyle.wayFontColor}`') !important;
    font-size: v-bind('`${option.dataStyle.wayFontSize}px`') !important;
  }
  ::v-deep .n-base-selection-input {
    background: #ffffff00 !important;
    color: v-bind('`${option.dataStyle.wayFontColor}`') !important;
    font-size: v-bind('`${option.dataStyle.wayFontSize}px`') !important;
  }
  ::v-deep .n-base-selection-overlay__wrapper {
    color: v-bind('`${option.dataStyle.wayFontColor}`') !important;
    font-size: v-bind('`${option.dataStyle.wayFontSize}px`') !important;
  }
  ::v-deep .n-select {
    --n-border: 0px !important;
    --n-border-disabled: 0px !important;
    --n-border-hover: 0px !important;
    --n-border-focus: 0px !important;
  }

  .way_end {
    margin-left: 10px;
    margin-top: 5px;
  }

  .plan {
    position: relative;
    margin-top: 20px;

    .driveOrWalkDiv {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 10px;
      height: 100%;
    }
  }

  .line_result_list {
    margin-top: 10px;

    .line_item {
      position: relative;
      margin-top: 10px;
      margin-left: 5px;
    }

    .line_button {
      position: absolute;
      top: 25%;
      left: 8%;
      display: inline-flex;
    }

    .timeDiv {
      position: absolute;
      top: 15%;
      left: 30%;
    }
  }
</style>
