<template>
  <el-dialog
    title="订单详情"
    :visible.sync="dialogOrderVisible"
    width="1400px"
    class="dialog-info"
    style="margin-top:0vh;"
  >
    <div id="info">
      <div class="info" style="margin-top: -40px;">
        <div class="info-wrp">
          <div class="title">订单信息</div>
          <div class="info-item">
            <span>订单号：</span>
            <span>{{ data.internalNumber }}</span>
          </div>
          <div class="info-item">
            <span>车牌号：</span>
            <span>{{ data.plateNumber }}</span>
          </div>
          <div class="info-item">
            <span>区域：</span>
            <span>{{ data.manageAreaName }}</span>
          </div>
          <div class="info-item">
            <span>用户昵称：</span>
            <span>{{ data.username }}</span>
          </div>
          <div class="info-item">
            <span>手机号码：</span>
            <span>{{ data.mobile }}</span>
          </div>
          <div class="info-item">
            <span>订单状态：</span>
            <span>{{ data.orderStatus | stateFilter }}</span>
          </div>
          <div class="info-item">
            <span>创建时间：</span>
            <span>{{ data.useBikeStartTime }}</span>
          </div>
          <div class="info-item">
            <span>结束时间：</span>
            <span>{{ data.useBikeEndTime }}</span>
          </div>
        </div>
        <div class="info-wrp">
          <div class="title">结算信息</div>
          <div class="info-item">
            <span>骑行时长：</span>
            <span>{{ data.useBikeTimeLength || 0 }} 分钟</span>
          </div>
          <div class="info-item">
            <span>交易金额：</span>
            <span>
              <span class="amount">{{ data.actualPayMoney || 0 }}</span>元
              <div class="cost">
                <p>
                  骑行花费：
                  <span>{{ data.ridingFeeMoney || 0 }}</span> 元
                </p>
                <p>
                  非还车点调度费：
                  <span>{{ data.dispatchFeeMoney || 0 }}</span> 元
                </p>
              </div>
            </span>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="info-wrp" style="overflow-y: scroll;height:412px;">
          <div class="title">操作记录</div>
          <el-table
            :data="recordList"
            border
            size="small"
            v-loading="listLoading"
            style="margin: 0 10px;width: 370px"
          >
            <el-table-column label="时间" align="center">
              <template slot-scope="scope">{{ scope.row.time }}</template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">{{ scope.row.controlContent }}</template>
            </el-table-column>
          </el-table>
        </div>
        <div class="info-wrp">
          <div class="title">手机信息</div>
          <el-table
            :data="phoneList"
            border
            size="small"
            v-loading="listLoading"
            style="margin: 0 10px;width: 370px"
          >
            <el-table-column label="类型" align="center">
              <template slot-scope="scope">{{ scope.row.label }}</template>
            </el-table-column>
            <el-table-column label="数据值" align="center">
              <template slot-scope="scope">{{ scope.row.value }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="aMap" style="width:32%;">
      <div id="allmap" ref="allmap" :style="{height: height}"></div>
    </div>
  </el-dialog>
</template>

<script>
import api from "@/api/order";
import { loadMP } from "@/utils/map";
export default {
  name: "order-info",
  data() {
    return {
      data: {},
      dialogOrderVisible: false,
      recordList: [],
      phoneList: [],
      listLoading: false,
      aMap: undefined,
      locusPolyline: undefined,
      list: {},
      polygonArr: [],
      orderLoading: false,
      beginIcon: require("../../../assets/status/begin.png"),
      endIcon: require("../../../assets/status/end.png"),
      beginMarker: undefined,
      endMarker: undefined,
      bikeMarker: undefined,
      satelliteLayer: undefined,
      pathSimplifierIns: undefined,
      car: require("../../../assets/head.png"),
      using: require("../../../assets/status/using.png"),
      height: "696px"
    };
  },
  filters: {
    stateFilter(state) {
      const stateMap = ["进行中", "交易完成", "已关闭", "待支付"];
      return stateMap[state - 1];
    }
  },
  methods: {
    initMap() {
      // this.$refs.allmap.style.height = (document.documentElement.clientHeight || document.body.clientHeight) - 134 + 'px';
      this.aMap = new AMap.LngLat(114.309531, 30.59619);
      this.aMap = new AMap.Map("allmap", {
        zoom: 10, // 地图缩放级别
        resizeEnable: true // 获取当前位置坐标
      });
      // console.log(this.aMap,'amap')
      // 异步加载插件
      this.aMap.plugin(["AMap.ToolBar"], () => {
        let toolBar = new AMap.ToolBar();
        this.aMap.addControl(toolBar);
      });
      this.aMap.plugin(["AMap.MapType"], () => {
        let MapType = new AMap.MapType();
        this.aMap.addControl(MapType);
      });
      // console.log(this.aMap,'amap')
      // 卫星图层
      this.satelliteLayer = new AMap.TileLayer.Satellite();
      console.log(this.satelliteLayer);
    },
    open(data) {
      console.log(data,'open')
      // this.initMap()
      this.dialogOrderVisible = true;
      // console.log(data)
      this.data = data;
      this.getRecord(data.id);
      var id = data.id;
      api.bikeRoute({ id }).then(res => {
        var parkArr = res.results.parkFenceList;
        var location = new AMap.LngLat(res.results.bikeNowLon,res.results.bikeNowLat);
        var circles = [];

        let strokeColor = "#006AFF",
          fillColor = "#F33",
          fillOpacity = 0.3,
          strokeStyle = "solid",
          strokeWeight = 2;

        parkArr.forEach((park, i) => {
          let _park = park,
          _parkArr = _park.content.split(";");
          var p = [];
          _parkArr.forEach((item, j) => {
            p[j] = new AMap.LngLat(
              item.split(",")[0],
              item.split(",")[1]
            );
          });
          console.log(p,'p')
         
          var polygon = new AMap.Polygon({
              path: p,
              fillColor,
              fillOpacity,
              strokeStyle,
              strokeColor,
              strokeWeight,
              strokeOpacity: 0.8
            });


          this.aMap.add(polygon);

          let circle = new AMap.Circle({
              center: new AMap.LngLat(park.focusLon, park.focusLat), radius: park.radius,
              fillColor, fillOpacity, strokeColor, strokeWeight: 1, strokeOpacity: 0.3
          });
          this.aMap.add(circle);
        });

        var info = document.getElementById("info");
        // this.height = info.offsetHeight-20 +'px'
        this.aMap.setZoom(18);
        var lineArr = [];
        res.results.locationRecords.forEach((item, i) => {
          lineArr.push(new AMap.LngLat(item.lon, item.lat));
        });
        this.aMap.setCenter(lineArr[lineArr.length - 1]);
        if (this.beginMarker || this.endMarker || this.bikeMarker) {
          this.aMap.remove(this.beginMarker);
          this.aMap.remove(this.endMarker);
          this.aMap.remove(this.bikeMarker);
        }
  
        this.bikeMarker = new AMap.Marker({
          icon: this.using,
          position: location,
          offset: new AMap.Pixel(-14, -35)
        });
        this.aMap.add(this.bikeMarker)
        this.beginMarker = new AMap.Marker({
          icon: this.beginIcon,
          position: lineArr[0],
          offset: new AMap.Pixel(-14, -35)
        });
        this.endMarker = new AMap.Marker({
          icon: this.endIcon,
          position: lineArr[lineArr.length - 1],
          offset: new AMap.Pixel(-14, -35)
        });
        this.aMap.add([this.endMarker, this.bikeMarker]);
        // 绘制轨迹
        console.log(pathSimplifierIns, "pathSimplifierIns");
        pathSimplifierIns.setData([
          {
            // 设置数据
            name: "路线0",
            path: lineArr
          }
        ]);
        this.locusPolyline = pathSimplifierIns.createPathNavigator(0, {
          loop: true, // 循环播放
          speed: 200 // 巡航速度，单位千米/小时
        });
        this.locusPolyline.start();
        this.aMap.setFitView(lineArr);
        console.log(this.aMap, "amap");
      });
    },
    showSatelliteLayer(bol) {
      bol
        ? this.aMap.add(this.satelliteLayer)
        : this.aMap.remove(this.satelliteLayer);
    },
    getRecord(id) {
      this.listLoading = true;
      this.phoneList = [];
      api
        .findOrderControlRecord({ id })
        .then(res => {
          console.log("Record:", res);
          this.recordList = res.results.controlRecords;
          let pInfo = res.results.phoneData;
          this.phoneList = [
            { key: "brand", label: "品牌", value: pInfo.brand },
            { key: "model", label: "型号", value: pInfo.model },
            { key: "platform", label: "系统平台", value: pInfo.platform },
            { key: "system", label: "系统版本", value: pInfo.system },
            { key: "WxVersion", label: "微信版本", value: pInfo.WxVersion },
            {
              key: "WxJsApiSdkVersion",
              label: "小程序版本",
              value: pInfo.WxJsApiSdkVersion
            }
          ];
          console.log(pInfo.locationEnabled, pInfo.locationEnabled !== "");
          if (pInfo.locationEnabled !== "")
            this.phoneList.push({
              key: "locationEnabled",
              label: "定位状态",
              value: pInfo.locationEnabled ? "开" : "关"
            });
          if (pInfo.locationAuthorized !== "")
            this.phoneList.push({
              key: "locationAuthorized",
              label: "定位授权",
              value: pInfo.locationAuthorized ? "已授权" : "未授权"
            });
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  beforeUpdate() {
    this.initMap();
    AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], (PathSimplifier, $) => {
      console.log("load");
      if (!PathSimplifier.supportCanvas) {
        alert("当前环境不支持 Canvas！");
        return;
      }
      console.log("return");
      var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        autoSetFitView: false,
        //autoSetFitView:false,
        map: this.aMap, //所属的地图实例
        getPath: function(pathData, pathIndex) {
          return pathData.path;
        },
        getHoverTitle: function(pathData, pathIndex, pointIndex) {
          if (pointIndex >= 0) {
            //point
            return (
              pathData.name + "，点：" + pointIndex + "/" + pathData.path.length
            );
          }
          return pathData.name + "，点数量" + pathData.path.length;
        },
        renderOptions: {
          renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
        }
      });

      window.pathSimplifierIns = pathSimplifierIns;
      this.pathSimplifierIns = pathSimplifierIns;
    });
  },
  created() {
    this.$bus.$on("showSatelliteLayer", bol => {
      this.showSatelliteLayer(bol);
    });
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialog-info {
  top: -10vh;
}
.el-dialog__body {
  display: flex;
  align-items: center;
  position: relative;
}
.info {
  display: flex;
  &-wrp {
    margin-top: 20px;
    margin-right: 20px;
    padding-bottom: 10px;
    background-color: #eee;
    &:first-child {
      width: 450px;
    }
    &:last-child {
      width: 400px;
    }
  }
  &-item {
    margin-bottom: 10px;
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }
    & > span:first-child {
      display: inline-block;
      width: 120px;
      text-align: right;
    }
    & > span:last-child {
      padding-left: 10px;
    }
    .amount {
      font-size: 18px;
      color: coral;
      margin-right: 5px;
    }
    .cost {
      padding-left: 135px;
      padding-top: 8px;
      p {
        line-height: 1.4;
        margin: 0;
        span {
          color: orangered;
        }
      }
    }
  }
  .title {
    font-weight: bold;
    font-size: 16px;
    margin: 20px 0 10px;
    padding-left: 20px;
  }
}
.aMap {
  position: absolute;
  top: 65px;
  right: 40px;
  #allmap {
    overflow: hidden;
    /*background-color: rgba(0,0,0,.2);*/
    .anchorBL {
      display: none;
    }
  }
}
</style>
