<template>
  <el-row class="el-col el-col-24 queryPar-form-wrapper">
    <el-form
      class="el__form-queryPar"
      ref="ruleForm"
      label-position="left"
      label-width="75px"
      :model="ruleForm"
      :inline="true"
    >
      <el-row class="el-col el-col-24 route-address address-search">
        <el-form-item label="开始地址：" prop="routeStartAddress">
          <input
            type="text"
            id="routeStartAddress"
            size="20"
            placeholder="请输入路线开始地址"
        /></el-form-item>
 
        <el-form-item label="结束地址：" prop="routeEndAddress">
          <input
            type="text"
            id="routeEndAddress"
            size="20"
            placeholder="请输入路线结束地址"
          />
        </el-form-item>
      </el-row>
 
      <el-row class="el-col el-col-24 queryPar-button-wrapper">
        <el-form-item class="inlineBlock-formItem" prop="routeStyle">
          <el-select placeholder="请选择行程方式" v-model="ruleForm.routeStyle">
            <el-option
              v-for="(item, index) in routeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button
          class="el-button-fun inlineBlock-formItem"
          @click.stop="setRouteLine(ruleForm.routeStyle)"
          >绘制路线</el-button
        >
      </el-row>
    </el-form>
  </el-row>
</template>

<script>
const BMap = window.BMap;
export default {
  name: "mapSearchPlace",
  props: {
    mapInstance: {
      type: Object,
      required: true,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      ruleForm: {
        routeStartAddress: "",
        routeEndAddress: "",
        routeStyle: "drivingRoute" // 默认驾车
      },
      routeList: [
        {
          label: "驾车",
          value: "drivingRoute"
        },
        {
          label: "公交",
          value: "transitRoute"
        },
        {
          label: "步行",
          value: "walkingRoute"
        }
        // {
        //   label: "骑行",
        //   value: "ridingRoute"
        // }
      ],
      routeStyleObj: {
        drivingRoute: null, // 驾车
        transitRoute: null, // 公交
        walkingRoute: null // 步行
        // ridingRoute: null // 骑行
      },
      routeStartAddress: null,// 路线开始地址
      routeEndAddress: null// 路线结束地址
    };
  },
  mounted() {
    // 添加搜索自动完成对象
    this.addAutocomplete();
    // 添加路线规划方式
    this.addRouteStyle();
  },
  methods: {
    // 添加搜索自动完成对象
    addAutocomplete() {
      this.routeStartAddress = this.customMethods.BMapAutocomplete(
        "routeStartAddress",
        this.mapInstance,
        this.getAutocompleteResult
      );
      this.routeEndAddress = this.customMethods.BMapAutocomplete(
        "routeEndAddress",
        this.mapInstance,
        this.getAutocompleteResult
      );
      let that = this;
      this.routeStartAddress.addEventListener("onconfirm", async function(e) {
        // 鼠标点击下拉列表后的事件
        let confirmValue = that.customMethods.BMapOnconfirmJoinValue(e);
        that.customMethods.BMapGetPlacePoint(
          that.mapInstance,
          confirmValue,
          function(data) {
            that.customMethods.BMapSetMarker(that.mapInstance, data, false);
            that.routeStartAddress = data;
          }
        );
      });
      this.routeEndAddress.addEventListener("onconfirm", function(e) {
        // 鼠标点击下拉列表后的事件
        let confirmValue = that.customMethods.BMapOnconfirmJoinValue(e);
        that.customMethods.BMapGetPlacePoint(
          that.mapInstance,
          confirmValue,
          function(data) {
            that.customMethods.BMapSetMarker(that.mapInstance, data, false);
            that.routeEndAddress = data;
          }
        );
      });
    },
    getAutocompleteResult(val) {
      if (val.Hr.length) {
        // let poi = val.getPoi(0);
        // let str =
        //   poi.province + poi.city + poi.district + poi.street + poi.business;
        // this.setLocationPlaceIcon(str);
      }
    },
    // 添加交通方式
    addRouteStyle() {
      // 驾车
      this.routeStyleObj.drivingRoute = new BMap.DrivingRoute(
        this.mapInstance,
        {
          renderOptions: {
            map: this.mapInstance,
            panel: "results",
            autoViewport: true
          },
          onPolylinesSet: this.drivingRoutePolylinesSetCallback
        }
      );
      // 公交
      this.routeStyleObj.transitRoute = new BMap.TransitRoute(
        this.mapInstance,
        {
          renderOptions: { map: this.mapInstance, panel: "results" },
          onPolylinesSet: this.transitRoutePolylinesSetCallback
        }
      );
      // 步行
      this.routeStyleObj.walkingRoute = new BMap.WalkingRoute(
        this.mapInstance,
        {
          renderOptions: { map: this.mapInstance },
          onPolylinesSet: this.walkingRoutePolylinesSetCallback
        }
      );
      // 骑行，3.0版本新添加的
      // this.routeStyleObj.ridingRoute = new BMap.RidingRoute(this.mapInstance, {
      //   renderOptions: { map: this.mapInstance }
      // });
    },
    drivingRoutePolylinesSetCallback(result) {
      // 清除原API路线规划显示，便于自定义路线规划显示
      this.routeStyleObj.drivingRoute.clearResults();
      this.setNewPolyline(result, {
        strokeColor: "#438EFF",
        strokeStyle: "solid"
      });
    },
    transitRoutePolylinesSetCallback(result) {
      this.routeStyleObj.transitRoute.clearResults();
      this.setNewPolyline(result, {
        strokeColor: "#05cc2f"
      });
    },
    walkingRoutePolylinesSetCallback(result) {
      this.routeStyleObj.walkingRoute.clearResults();
      this.setNewPolyline(result, {
        strokeColor: "#ff2806",
        strokeStyle: "solid"
      });
    },
    // 设置新路线折线
    setNewPolyline(
      result,
      {
        strokeColor = "#438EFF",
        strokeWeight = 6,
        strokeOpacity = 0.8,
        strokeStyle = "solid"
      }
    ) {
      var points = [];
      result[0].Gr.map(function(item) {
        points.push(new BMap.Point(item.lng, item.lat));
      });
      var polyline = new BMap.Polyline(points, {
        strokeColor: strokeColor,
        strokeWeight: strokeWeight,
        strokeOpacity: strokeOpacity,
        strokeStyle: strokeStyle
      }); // 创建折线
      this.mapInstance.addOverlay(polyline); // 添加折线
    },
    // 绘制路线
    setRouteLine(routeStyle) {
      if (this.routeStartAddress && this.routeEndAddress) {
        this.mapInstance.clearOverlays(); // 绘制路线时，清除上一次旧有路线
        this.routeStyleObj[routeStyle].search(
          // 路线绘制，2.0API支持关键字(地址)，经纬坐标两种方式的查询(注：可以用坐标的话，尽量坐标；关键字查询经常会定位不准，跑东大西洋、西印度洋(靠澳洲)等情况)
          this.routeStartAddress,
          this.routeEndAddress
        );
      }
    }
  }
};
</script>