text: import React from 'react';
  import { Card } from 'antd'
  import axios from '../../axios'
  import './detail.less'
  export default class Order extends React.Component {
  
      state = {}
  
      componentDidMount(){
          let orderId = this.props.match.params.orderId;
          if(orderId){
              this.getDetailInfo(orderId);
          }
      }
  
      getDetailInfo = (orderId)=>{
          axios.ajax({
              url:'/order/detail',
              data:{
                  params:{
                      orderId: orderId
                  }
              }
          }).then((res)=>{
              if(res.code ==0){
                  this.setState({
                      orderInfo:res.result
                  })
                  this.renderMap(res.result);
              }
          })
      }
  
      renderMap = (result)=>{
          this.map = new window.BMap.Map('orderDetailMap');
          // this.map.centerAndZoom('北京',11);
          // 添加地图控件
          this.addMapControl();
          // 调用路线图绘制方法
          this.drawBikeRoute(result.position_list);
          // 调用服务区绘制方法
          this.drwaServiceArea(result.area);
      }
  
      // 添加地图控件
      addMapControl = ()=>{
          let map = this.map;
          map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT}));
          map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
      }
  
      // 绘制用户的行驶路线
      drawBikeRoute = (positionList)=>{
          let map = this.map;
          let startPoint = '';
          let endPoint = '';
          if (positionList.length>0){
              let first = positionList[0];
              let last = positionList[positionList.length-1];
              startPoint = new window.BMap.Point(first.lon,first.lat);
              let startIcon = new window.BMap.Icon('/assets/start_point.png',new window.BMap.Size(36,42),{
                  imageSize:new window.BMap.Size(36,42),
                  anchor: new window.BMap.Size(18, 42)
              })
  
              let startMarker = new window.BMap.Marker(startPoint, { icon: startIcon});
              this.map.addOverlay(startMarker);
  
              endPoint = new window.BMap.Point(last.lon, last.lat);
              let endIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36, 42), {
                  imageSize: new window.BMap.Size(36, 42),
                  anchor: new window.BMap.Size(18, 42)
              })
              let endMarker = new window.BMap.Marker(endPoint, { icon: endIcon });
              this.map.addOverlay(endMarker);
  
              // 连接路线图
              let trackPoint = [];
              for(let i=0;i<positionList.length;i++){
                  let point = positionList[i];
                  trackPoint.push(new window.BMap.Point(point.lon, point.lat));
              }
  
              let polyline = new window.BMap.Polyline(trackPoint,{
                  strokeColor:'#1869AD',
                  strokeWeight:3,
                  strokeOpacity:1
              })
              this.map.addOverlay(polyline);
              this.map.centerAndZoom(endPoint, 11);
          }
          
      }
  
      // 绘制服务区
      drwaServiceArea = (positionList)=>{
          // 连接路线图
          let trackPoint = [];
          for (let i = 0; i < positionList.length; i++) {
              let point = positionList[i];
              trackPoint.push(new window.BMap.Point(point.lon, point.lat));
          }
          // 绘制服务区
          let polygon = new window.BMap.Polygon(trackPoint, {
              strokeColor: '#CE0000',
              strokeWeight: 4,
              strokeOpacity: 1,
              fillColor: '#ff8605',
              fillOpacity:0.4
          })
          this.map.addOverlay(polygon);
      }
  
      render(){
          const info = this.state.orderInfo || {};
          return (
              <div>
                  <Card>
                      <div id="orderDetailMap" className="order-map"></div>
                      <div className="detail-items">
                          <div className="item-title">基础信息</div>
                          <ul className="detail-form">
                              <li>
                                  <div className="detail-form-left">用车模式</div>
                                  <div className="detail-form-content">{info.mode == 1 ?'服务区':'停车点'}</div>
                              </li>
                              <li>
                                  <div className="detail-form-left">订单编号</div>
                                  <div className="detail-form-content">{info.order_sn}</div>
                              </li>
                              <li>
                                  <div className="detail-form-left">车辆编号</div>
                                  <div className="detail-form-content">{info.bike_sn}</div>
                              </li>
                              <li>
                                  <div className="detail-form-left">用户姓名</div>
                                  <div className="detail-form-content">{info.user_name}</div>
                              </li>
                              <li>
                                  <div className="detail-form-left">手机号码</div>
                                  <div className="detail-form-content">{info.mobile}</div>
                              </li>
                          </ul>
                      </div>
                      <div className="detail-items">
                          <div className="item-title">行驶轨迹</div>
                          <ul className="detail-form">
                              <li>
                                  <div className="detail-form-left">行程起点</div>
                                  <div className="detail-form-content">{info.start_location}</div>
                              </li>
                              <li>
                                  <div className="detail-form-left">行程终点</div>
                                  <div className="detail-form-content">{info.end_location}</div>
                              </li>
                              <li>
                                  <div className="detail-form-left">行驶里程</div>
                                  <div className="detail-form-content">{info.distance/1000}公里</div>
                              </li>
                          </ul>
                      </div>
                  </Card>
              </div>
          );
      }
  }