<template>
  <div class="mapPage">
    <div class="left">
      <div class="routebox">
        <div class="title">规划轨迹</div>
        <div class="searchbox-content-common routebox-content">
          <div class="routebox-revert" title="切换起终点">
            <div class="routebox-revert-icon"></div>
          </div>
          <div class="routebox-inputs">
            <div class="routebox-input route-start">
              <div class="route-input-icon"></div>
              <input
                autocomplete="off"
                maxlength="256"
                placeholder="输入起点或在图区上选点"
                class="route-start-input"
                type="text"
                :value="start.text"
                @keyup.enter="analysisKeyword('start', $event)"
              />
              <div
                class="input-clear"
                title="清空"
                style="display: block;"
                @click="clear('start')"
              ></div>
              <div class="route-input-add-icon" @click="addViaPoint"></div>
            </div>
            <div
              class="routebox-input route-through"
              v-for="(viaPoint, key) in viaPoints"
              :key="key"
            >
              <div class="route-input-icon"></div>
              <input
                autocomplete="off"
                maxlength="256"
                placeholder="输入途经点"
                class="route-through-input"
                type="text"
                :value="viaPoint.text"
                @keyup.enter="analysisKeyword('viaPoint', $event, key)"
              />
              <div
                class="input-clear"
                title="清空"
                style="display: block;"
                @click="clear('viaPoints', key)"
              ></div>
              <div
                class="route-input-remove-icon"
                @click="removeViaPoint(key)"
                data-index="0"
              ></div>
            </div>
            <div class="routebox-input route-end">
              <div class="route-input-icon"></div>
              <input
                autocomplete="off"
                maxlength="256"
                placeholder="输入终点或在图区上选点"
                class="route-end-input"
                type="text"
                :value="destination.text"
                @keyup.enter="analysisKeyword('destination', $event)"
              />
              <div
                class="input-clear"
                title="清空"
                @click="clear('destination')"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="ui3-suggest-wrap" style="width: 368px;">
        <ul>
          <li
            class="ui3-suggest-item"
            data-type="sug"
            :data-key="result.title"
            :data-location="result.city + result.address"
            style="width: 368px;"
            v-for="(result, key) in searchResult"
            :key="key"
            @click="selectLocation(result)"
          >
            <a>
              <i class="default"
                >{{ letterMaps[key] }}&nbsp;&nbsp;&nbsp;&nbsp;{{
                  result.title
                }}</i
              >
              <em>{{ result.city }}{{ result.address }}</em>
            </a>
          </li>
        </ul>
      </div>

      <button
        id="search-button"
        @click="getTrack"
        data-title="搜索"
        data-tooltip="1"
      >
        搜索
      </button>

      <div class="bike-box">
        <div class="title">车辆配置</div>
        <div class="info">
          <el-form ref="form" :model="form" label-width="90px">
            <el-form-item label="车牌号：">
              <el-input
                v-model="bikeInfo.bike_no"
                placeholder="请输入车牌号"
                :minlength="7"
                :maxlength="7"
                :show-word-limit="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="开始时间：">
              <el-date-picker
                style="width:100%;"
                v-model="bikeInfo.start_time"
                type="datetime"
                placeholder="选择开始时间"
                :default-time="getDefautTime(0)"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间：">
              <el-date-picker
                style="width:100%;"
                v-model="bikeInfo.end_time"
                type="datetime"
                placeholder="选择结束时间"
                :default-time="getDefautTime(1)"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="行驶里程：">
              <el-input v-model="bikeInfo.mileage" placeholder="请输入行驶里程"
                ><template slot="append">km</template></el-input
              >
            </el-form-item>
          </el-form>
        </div>
      </div>

      <button id="down-img-button" @click="getImg" data-title="下载图片">
        下载图片
      </button>
    </div>
    <!-- 地图 -->
    <div id="imageTofile" ref="imageTofile">
      <baidu-map
        class="map"
        center="郑州"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
      >
        <div v-if="isShowDrivingStatus">
          <bm-driving
            v-if="isShowDrivingStatus"
            :start="start.point"
            :end="destination.point"
            :auto-viewport="true"
            :panel="false"
            location="郑州"
            :waypoints="waypoints"
            @searchcomplete="drivingComplete"
            @markersset="markersset"
          ></bm-driving>
        </div>
        <bm-local-search
          :keyword="keyword"
          :auto-viewport="true"
          :panel="false"
          @searchcomplete="searchcomplete"
        />

        <!-- <bm-marker :position="postionMap">
        <bm-info-window
          :show="show"
          @close="infoWindowClose"
          @open="infoWindowOpen"
          style="font-size: 14px"
        >
          <p>站点：{{ add.siteName }}</p>
          <p>站点地址：{{ add.site }}</p>
        </bm-info-window>
      </bm-marker> -->

        <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
        <bm-context-menu class="BMap_contextMenu">
          <bm-context-menu-item
            class="item"
            :callback="getStart"
            text="以此为起点"
          ></bm-context-menu-item>
          <bm-context-menu-item
            class="item"
            :callback="getViaPoint"
            text="以此为途经点"
          ></bm-context-menu-item>
          <bm-context-menu-item
            class="item"
            :callback="getDestination"
            text="以此为终点"
          ></bm-context-menu-item>
        </bm-context-menu>
        <bm-control>
          <div
            style="position: fixed;inset: 10px 10px auto auto;white-space: nowrap;cursor: pointer;z-index: ;text-size-adjust: none;"
          >
            <div style="float: left;">
              <div
                title="显示普通地图"
                style="box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; border-left: 1px solid rgb(139, 164, 220); border-top: 1px solid rgb(139, 164, 220); border-bottom: 1px solid rgb(139, 164, 220); background: rgb(142, 168, 224); padding: 2px 6px; font: bold 12px / 1.3em arial, sans-serif; text-align: center; white-space: nowrap; border-radius: 3px 0px 0px 3px; color: rgb(255, 255, 255);"
              >
                地图
              </div>
            </div>
            <div style="float: left;">
              <div
                title="显示卫星影像"
                style="box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; border-left: 1px solid rgb(139, 164, 220); border-top: 1px solid rgb(139, 164, 220); border-bottom: 1px solid rgb(139, 164, 220); background: rgb(255, 255, 255); padding: 2px 6px; font-style: normal; font-variant: normal; font-stretch: normal; font-size: 12px; line-height: 1.3em; font-family: arial, sans-serif; text-align: center; white-space: nowrap; color: rgb(0, 0, 0);"
              >
                卫星
              </div>
              <div
                style="position: absolute; top: 21px; left: 37px; z-index: -1; display: none;"
              >
                <div
                  title="显示带有街道的卫星影像"
                  style="border-right:1px solid #8ba4dc;border-bottom:1px solid #8ba4dc;border-left:1px solid #8ba4dc;background:white;font:12px arial,sans-serif;padding:0 8px 0 6px;line-height:1.6em;box-shadow:2px 2px 3px rgba(0, 0, 0, 0.35)"
                >
                  <span checked="checked" class="BMap_checkbox checked"></span
                  ><label style="vertical-align: middle; cursor: pointer;"
                    >混合</label
                  >
                </div>
              </div>
            </div>
            <div style="float: left;">
              <div
                title="显示三维地图"
                style="box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; border-width: 1px; border-style: solid; border-color: rgb(139, 164, 220); background: rgb(255, 255, 255); padding: 2px 6px; font-style: normal; font-variant: normal; font-stretch: normal; font-size: 12px; line-height: 1.3em; font-family: arial, sans-serif; text-align: center; white-space: nowrap; border-radius: 0px 3px 3px 0px; color: rgb(0, 0, 0);"
              >
                三维
              </div>
            </div>
          </div>
          <div
            title="显示交通流量"
            id="tcBtn"
            class="maplibTcBtn_deskTop BMap_noprint anchorTR maplibTcBtnOff_deskTop"
            style="position: fixed; z-index: 10; text-size-adjust: none; inset: 10px 10px auto auto;"
          ></div>
        </bm-control>
        <bm-control
          ><div class="info-box" v-if="bikeInfo.bike_no">
            <p>开始时间：{{ bikeInfo.start_time | formatDate }}</p>
            <p>结束时间：{{ bikeInfo.end_time | formatDate }}</p>
            <p>公里总数：{{ kilometre }}公里</p>
            <p>车牌：{{ bikeInfo.bike_no.toUpperCase() }}</p>
          </div></bm-control
        >
      </baidu-map>
    </div>
    <div id="mapPage"></div>
  </div>
</template>

<script>
import { formatDate } from "@/common/date.js";
import html2canvas from "html2canvas";
import canvg from "canvg";
import $ from "jquery";
import { setTimeout } from "timers";
export default {
  name: "map",
  data() {
    return {
      letterMaps: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      center: { lng: 0, lat: 0 },
      zoom: 15,
      // start: {
      //   point: { lat: "34.777104", lng: "113.612767" },
      //   text: "河南省郑州市中原区",
      //   isEmpty: false,
      // },
      // destination: {
      //   point: { lat: "34.750177", lng: "113.662066" },
      //   text: "河南省郑州市二七区太和路253",
      //   isEmpty: false,
      // },
      viaPoints: [
        // {
        //   point: { lat: "33.744868", lng: "112.914394" },
        //   text: "鲁山",
        //   isEmpty: false,
        // },
        { point: { lat: "", lng: "" }, text: "", isEmpty: true },
        { point: { lat: "", lng: "" }, text: "", isEmpty: true },
        { point: { lat: "", lng: "" }, text: "", isEmpty: true },
        { point: { lat: "", lng: "" }, text: "", isEmpty: true },
        { point: { lat: "", lng: "" }, text: "", isEmpty: true },
        { point: { lat: "", lng: "" }, text: "", isEmpty: true },
      ],
      start: {
        point: { lat: "", lng: "7" },
        text: "",
        isEmpty: true,
      },
      destination: {
        point: { lat: "", lng: "" },
        text: "",
        isEmpty: true,
      },
      isShowDrivingStatus: true,
      keyword: "",
      currentStatusValue: {
        type: "",
        key: 0,
      },
      searchResult: [],
      bikeInfo: {
        bike_no: "",
        start_time: "",
        end_time: "",
        mileage: 0,
      },
      waitInterval: null,
    };
  },
  created() {
    let no = "豫AWF838";
    console.log(no.length);
    console.log(this.$refs);
  },
  methods: {
    getImg() {
      // svg转canvas
      let nodesToRecover = [];
      let nodesToRemove = [];
      let svgElem = $("#imageTofile").find("svg"); // divReport为需要截取成图片的dom的id
      let prepare = [];
      for (let i = 0; i < svgElem.length; i++) {
        prepare.push(0);
      }
      svgElem.each(function(index, node) {
        let parentNode = node.parentNode;
        let svg = node.outerHTML;
        let canvas = document.createElement("canvas");
        canvg(canvas, svg);
        canvas.style.position = node.style.position;
        canvas.style.width = node.style.width;
        canvas.style.height = node.style.height;
        canvas.style.left = 0;
        canvas.style.top = 0;
        let ctx = canvas.getContext("2d");
        let svg_xml = new XMLSerializer().serializeToString(node);
        let img = new Image();
        img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml);
        img.onload = function() {
          ctx.drawImage(img, 0, 0);
          prepare[index] = 1;
          // download(canvas.toDataURL("image/png")); // 调试用
        };
        parentNode.appendChild(canvas); // 使用canvas代替svg进行截图
        nodesToRemove.push({
          // 完成截图后删除canvas
          parent: parentNode,
          child: canvas,
        });
        nodesToRecover.push({
          // 完成截图后恢复svg
          parent: parentNode,
          child: node,
        });
        parentNode.removeChild(node); // 暂时移除svg
      });

      this.waitInterval = setInterval(() => {
        let isComplete = true;
        for (let i = 0; i < prepare.length; i++) {
          if (prepare[i] == 0) {
            isComplete = false;
            break;
          }
        }
        console.log(isComplete);
        if (isComplete) {
          clearInterval(this.waitInterval);
          // div转canvas截图
          html2canvas(document.getElementById("imageTofile"), {
            useCORS: true,
          }).then((cnv) => {
            let imgUrl = cnv.toDataURL("image/png"); // 将canvas转换成img的src流，base64
            for (let i = 0; i < nodesToRecover.length; i++) {
              nodesToRecover[i].parent.appendChild(nodesToRecover[i].child);
            }
            for (let i = 0; i < nodesToRemove.length; i++) {
              nodesToRemove[i].parent.removeChild(nodesToRemove[i].child);
            }
            this.download(imgUrl);
          });
        }
      }, 5);
    },
    download(url) {
      let a = document.createElement("a");
      a.style.display = "none";
      document.body.appendChild(a);
      let filename = (new Date().getTime() / 1000).toFixed(0);
      if (this.bikeInfo.bike_no != "") {
        filename = this.bikeInfo.bike_no;
      }
      let triggerDownload = $(a)
        .attr("href", url)
        .attr("download", filename + ".png");
      triggerDownload[0].click();
      document.body.removeChild(a);
    },
    getDefautTime(type) {
      if (type) {
        //下午
        // return (
        //   this.randomNum(12, 20) +
        //   ":" +
        //   this.randomNum(0, 60) +
        //   ":" +
        //   this.randomNum(0, 60)
        // );
        return "23:59:59";
      } else {
        //上午
        // return (
        //   this.randomNum(8, 12) +
        //   ":" +
        //   this.randomNum(0, 60) +
        //   ":" +
        //   this.randomNum(0, 60)
        // );
        return "00:00:00";
      }
    },
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return this.PrefixZero(parseInt(Math.random() * minNum + 1, 10), 2);
        case 2:
          return this.PrefixZero(
            parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10),
            2
          );
        default:
          return "00";
      }
    },
    PrefixZero(num, n) {
      return (Array(n).join(0) + num).slice(-n);
    },
    resultshtmlset(e) {
      console.log(e);
    },
    markersset(e) {
      //https://resource.bike.hanyiyun.com/admin/work_riding.png
      let len = e.length;
      if (len >= 2) {
        e[0].marker.Yc.innerHTML =
          // '<img src="http://map.aliyun.hanyiyun.com/dest_markers.png" style="display: block; border:none;margin-left:0px; margin-top:0px; ">';
          '<img src="http://map.aliyun.hanyiyun.com/start.png" style="display: block; border:none;margin-left:0px; margin-top:0px; ">';
        e[len - 1].marker.Yc.innerHTML =
          // '<img src="http://map.aliyun.hanyiyun.com/dest_markers.png" style="display: block; border:none;margin-left:0px; margin-top:-34px; ">';
          '<img src="http://map.aliyun.hanyiyun.com/end.png" style="display: block; border:none;margin-left:0px; margin-top:0px; ">';
      }
      let wayPointIconHtml =
        '<img src="http://map.aliyun.hanyiyun.com/tujingdian.png" style="display: block;width:28px; border:none;">';

      if (len > 2) {
        for (var i = 1; i < len; i++) {
          console.log(e[i].Um);
          e[i].Um.Yc.innerHTML = wayPointIconHtml;
        }
      }
    },
    selectLocation(location) {
      console.log(location);
      let type = this.currentStatusValue.type;
      switch (type) {
        case "start":
          this.start.text = location.title;
          this.start.point = location.point;
          this.start.isEmpty = false;
          break;
        case "viaPoint":
          var k = this.currentStatusValue.key;
          var point = {
            point: location.point,
            text: location.title,
            isEmpty: false,
          };
          this.viaPoints.splice(k, 1, point);
          break;
        case "destination":
          this.destination.text = location.title;
          this.destination.point = location.point;
          this.destination.isEmpty = false;
          break;
      }
      this.keyword = "";
      this.searchResult = [];
    },
    drivingComplete(e) {
      if (e.taxiFare == null) return false;
      this.bikeInfo.mileage = (e.taxiFare.distance / 1000).toFixed(2);
    },
    searchcomplete(e) {
      this.searchResult = [];
      if (!e) return;
      if (e.Hr.length == 0) {
        this.$message("没有找到该地点");
        return;
      }
      this.searchResult = e.Hr;
    },
    analysisKeyword(type, event, key = 0) {
      let value = event.currentTarget.value;
      this.keyword = value;
      this.currentStatusValue.type = type;
      this.currentStatusValue.key = key;
      switch (type) {
        case "start":
          this.start.text = value;
          break;
        case "viaPoint":
          this.viaPoints[key].text = value;
          break;
        case "destination":
          this.destination.text = value;
          break;
      }
    },
    //规划轨迹
    getTrack() {
      if (this.start.isEmpty) {
        this.$message("起点不能为空");
        return;
      }
      if (this.destination.isEmpty) {
        this.$message("终点不能为空");
        return;
      }
      this.isShowDrivingStatus = true;
    },
    getStart(e) {
      this.start.point = { lng: e.point.lng, lat: e.point.lat };
      this.analysisAddress([this.start.point], (res) => {
        this.start.text = res[0];
      });
      this.start.isEmpty = false;
    },
    loadTrack() {
      setTimeout(() => {
        this.isShowDrivingStatus = true;
      }, 100);
    },
    getViaPoint(e) {
      this.isShowDrivingStatus = false;
      let len = this.viaPoints.length;
      let point = {
        point: { lng: e.point.lng, lat: e.point.lat },
        text: "",
        isEmpty: false,
      };
      this.analysisAddress([point.point], (res) => {
        point.text = res[0];
      });
      if (len == 0) {
        this.viaPoints.push(point);
        this.loadTrack();
        return;
      }
      let index = null;
      this.viaPoints.map((item, key) => {
        if (item.isEmpty && index == null) {
          index = key;
        }
      });
      if (index == null) {
        this.viaPoints.push(point);
        this.loadTrack();
        return;
      }

      this.viaPoints.splice(index, 1, point);
      this.loadTrack();
    },
    getDestination(e) {
      this.destination.point = { lng: e.point.lng, lat: e.point.lat };
      this.analysisAddress([this.destination.point], (res) => {
        this.destination.text = res[0];
      });
      console.log(this.destination);
      this.destination.isEmpty = false;
    },
    //清楚数据
    clear(type, key = 0) {
      let point = {
        point: { lng: "", lat: "" },
        text: "",
        isEmpty: true,
      };
      switch (type) {
        case "start":
          this.start = point;
          break;
        case "viaPoints":
          console.log(key);
          this.viaPoints.splice(key, 1, point);
          break;
        case "destination":
          this.destination = point;
          break;
      }
    },
    //移除途经点
    removeViaPoint(key) {
      this.viaPoints.splice(key, 1);
    },
    //点击途经点
    addViaPoint() {
      this.viaPoints.push({
        point: { lng: "", lat: "" },
        text: "",
        isEmpty: true,
      });
    },
    analysisAddress: (arr, callBack) => {
      // 判断传入的arr是否为数组
      if (!Array.isArray(arr) || arr.length === 0) {
        // eslint-disable-next-line no-throw-literal
        throw "arr not a Array or arr not is null Array!";
      }

      // eslint-disable-next-line no-undef
      var Geo = new BMap.Geocoder();
      var adds = arr;
      var addressList = [];
      let i = 0;

      // 逐个逆向解析
      async function searchGeo() {
        // 传入的坐标必须是数字
        if (isNaN(adds[i].lng) || isNaN(adds[i].lat)) {
          // eslint-disable-next-line no-throw-literal
          throw "adds[i].lng or adds[i].lat is not a number!";
        }

        // eslint-disable-next-line no-undef
        let point = new BMap.Point(adds[i].lng, adds[i].lat);
        await Geo.getLocation(point, (rs) => {
          var addComp = rs.addressComponents;
          addressList.push(
            addComp.province +
              "" +
              addComp.city +
              "" +
              addComp.district +
              "" +
              addComp.street +
              "" +
              addComp.streetNumber
          );
          if (i < arr.length - 1) {
            i++;
            return searchGeo();
          } else {
            callBack(addressList);
          }
        });
      }
      return searchGeo();
    },
  },
  computed: {
    // 计算属性的 getter
    waypoints: function() {
      let points = [];
      this.viaPoints.map((item) => {
        if (!item.isEmpty) {
          points.push(item.point);
        }
      });
      return points;
    },
    kilometre() {
      return parseFloat(this.bikeInfo.mileage);
    },
  },
  filters: {
    formatDate(time) {
      var date = new Date();
      if (time) {
        date = new Date(time);
      }

      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
};
</script>

<style scoped>
/* /deep/ .BMap_Marker {
  display: none;
} */

.bike-box {
  width: 368px;
  border-top: 1px solid #e4e6e7;
  position: fixed;
  bottom: 50px;
}

.info {
  padding: 20px;
}

#down-img-button {
  position: fixed;
  bottom: 0;
  width: 368px;
  height: 50px;
  background-color: red;
  color: #fff;
  display: block;
  border: none;
  font-size: 16px;
}

.info-box {
  position: fixed;
  /* left: 418px; */
  left: 478px;
  bottom: 50px;
  padding: 15px 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  opacity: 0.7;
  font-size: 14px;
}
.ui3-suggest-item-hover a,
.ui3-suggest-item:hover a {
  background-color: #ebebeb;
}
.ui3-suggest-wrap {
  max-height: 250px;
  overflow: hidden;
  overflow-y: scroll;
  font-size: 12px;
}
.ui3-suggest-wrap .ui3-suggest-item em {
  margin-left: 10px;
  margin-right: 20px;
  font-style: normal;
  color: #999;
}
.ui3-suggest-wrap .ui3-suggest-item a {
  display: block;
  height: 35px;
  line-height: 35px;
  padding-right: 10px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.ui3-suggest-wrap .ui3-suggest-item i {
  padding-left: 39px;
  font-style: normal;
  color: #666;
  position: relative;
  z-index: 1;
  /* padding-top: 1px; */
}
.ui3-suggest-wrap .ui3-suggest-item i.default {
  background: url(//webmap1.bdimg.com/wolfman/static/common/images/ui3/tools/suggestion-icon_a0251d1.png)
    no-repeat 12px -12px;
}
.BMap_contextMenu {
  position: absolute;
  border: 1px solid #bbb;
  padding: 0;
  margin: 0;
  width: auto;
  visibility: hidden;
  background: #fff;
  z-index: 10000000;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
  font-size: 12px;
  cursor: -webkit-grab;
  left: 582px;
  top: 256px;
  visibility: visible;
}
.BMap_contextMenu div {
  padding: 10px 6px;
  margin: 0px 2px;
  line-height: 30px;
  width: 90px;
  color: rgb(101, 101, 101);
  cursor: pointer;
  border-bottom: 1px solid #dadada;
}
.title {
  text-align: center;
  color: #333;

  line-height: 32px;
  padding: 10px;
}
#search-button {
  margin: 20px auto;
  color: #fff;
  pointer-events: auto;
  text-align: center;
  background: #3385ff;
  width: 80%;
  height: 38px;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  border-radius: 5px;
}
.routebox-content .routebox-revert .routebox-revert-icon {
  background: url(//webmap1.bdimg.com/wolfman/static/common/images/retina/new-route-retian_d99addb.png)
    no-repeat -248px -22px;
  background-size: 428px auto;
}
.routebox .routebox-content .routebox-revert .routebox-revert-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 14px;
  margin-left: -9px;
  margin-top: -7px;
  background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/revert_172bb58.png)
    no-repeat 0 0;
}
.routebox .routebox-content .routebox-inputs {
  margin-left: 39px;
}
.routebox-content {
  border-bottom: 1px solid #e4e6e7;
  border-top: 1px solid #e4e6e7;
  position: relative;
}
.routebox .routebox-content .routebox-input {
  height: 40px;
  width: 300px;
  /* width: 315px; */
  border-bottom: 1px solid #eaebed;
  position: relative;
}
.routebox-input.route-end {
  border-bottom: none !important;
}
.routebox .routebox-content .routebox-input.route-end .route-input-icon {
  background: url(//webmap0.bdimg.com/wolfman/static/common/images/new/end_e68ad9a.png)
    no-repeat 0 0;
}
.routebox-input .route-input-add-icon {
  width: 16px;
  height: 16px;
  position: absolute;
  background: url(//webmap1.bdimg.com/wolfman/static/common/images/ui3/mo_banner_7cae444.png)
    no-repeat -1px -223px;
  top: 12px;
  right: 5px;
  display: block;
  cursor: pointer;
}

.input-clear {
  cursor: pointer;
  position: absolute;
  width: 27px;
  height: 37px;
  top: 0;
  background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/searchbox_5c0d97d.png)
    no-repeat 0 -114px #fff;
  display: block;
}
.routebox .routebox-content .routebox-input .input-clear {
  left: auto;
  right: 0;
  top: 1px;
}
.route-searchbox-content.drive .routebox .routebox-content .input-clear {
  right: 22px;
}
.routebox .routebox-content .routebox-input .route-input-remove-icon {
  width: 16px;
  height: 16px;
  position: absolute;
  background: url(//webmap1.bdimg.com/wolfman/static/common/images/ui3/mo_banner_7cae444.png)
    no-repeat -19px -223px;
  top: 12px;
  right: 5px;
  cursor: pointer;
}
.routebox .routebox-content .routebox-input .route-input-icon {
  width: 11px;
  height: 10px;
  background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/start_ee17f81.png)
    no-repeat 0 0;
  position: absolute;
  top: 15px;
  left: 3px;
}
.routebox .routebox-content .routebox-input input {
  box-sizing: border-box;
  border: 0;
  height: 100%;
  width: 100%;
  padding: 10px 0;
  font-size: 14px;
  border-left: 20px solid transparent;
  border-right: 27px solid transparent;
  line-height: 20px;
}
.routebox .routebox-content .routebox-revert {
  width: 39px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}

.maplibTcBtn_deskTop {
  background: url(http://api.map.baidu.com/images/bgs.gif) no-repeat scroll 0 -271px
    transparent;
  cursor: pointer;
  height: 22px;
  width: 73px;
  z-index: 10;
  position: absolute;
  background-position: 0 -249px;
}

.routebox {
  position: relative;
  max-height: calc(100% - 500px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.routebox .routebox-content .route-through .input-clear {
  right: 22px;
}
.routebox .routebox-content .input-clear {
  right: 22px !important;
}
.maplibTcBtn_deskTop.BMap_noprint.anchorTR {
  right: 137px !important;
  top: 12px !important;
}
.left {
  width: 368px;
  height: 100%;
  border-right: 1px solid rgb(213, 220, 237);
  float: left;
  /* padding: 10px; */
}
#imageTofile {
  display: block;
  width: calc(100% - 368px);
  height: 100%;
  float: left;
}
.map {
  display: block;
  /* width: calc(100% - 368px); */
  width: 100%;
  height: 100%;
  /* float: left; */
}
.mapPage {
  width: 100%;
  height: 100%;
}
</style>
