<template>
  <div class="wrap">
    <div class="baseInfo common">
      <div class="title">基本信息:</div>
      <div class="line"></div>
      <div class="infoWrap fontColor">
        <div class="leftTitle">
          <div class="leftItem">工单编号:</div>
          <div class="leftItem">合同:</div>
          <div class="leftItem">结算方式:</div>
          <div class="leftItem">客户姓名:</div>
          <div class="leftItem">客户电话:</div>
          <div class="leftItem">车牌号:</div>
          <div class="leftItem">车型品牌:</div>
        </div>
        <div class="rightContent">
          <div class="rightItem" style="display: flex;align-items: center;">
            <span id="copyText">{{orderDetailInfo.orderCode}}</span>
            <img @click="copyText" src="@/assets/copy.png" style="width: 35px;height: 15px;margin-left: 10px"/>
          </div>
          <div class="rightItem">{{ orderDetailInfo.contractName }}</div>
          <div class="rightItem">{{ orderDetailInfo.contractSettleType?.label }}</div>
          <div class="rightItem">{{ orderDetailInfo.userName }}</div>
          <div class="rightItem">{{ orderDetailInfo.userPhone }}</div>
          <div class="rightItem">{{ orderDetailInfo.plateNumber }}</div>
<!--          <div class="rightItem" >理想智动LXA6500SHEVM理想智动LXA6500SHEVM</div>-->
          <div class="rightItem" >{{orderDetailInfo.model}}{{ orderDetailInfo.brand }}</div>

        </div>
      </div>
    </div>
    <div class="serviceInfo common">
      <div class="title">服务信息:</div>
      <div class="line"></div>
      <div class="infoContent">
        <div class="item">
          <span class="leftTitle fontColor">服务类型:</span><span class="rightContent">{{ orderDetailInfo.taskServiceName }}</span>
        </div>
        <div class="item">
          <span class="leftTitle fontColor">车辆位于:</span><span class="rightContent">{{ orderDetailInfo.positionEnvironment?.label }}</span>
        </div>
        <div class="item"  style="align-items: baseline">
          <span class="leftTitle fontColor">事发地:</span><span class="rightContent" style="flex: 1">{{ orderDetailInfo.vehiclePointAddress }}</span>
        </div>
        <div class="item" style="align-items: baseline">
          <span class="leftTitle fontColor">事发地补充:</span><span class="rightContent vehicleRemark" >{{orderDetailInfo.vehiclePointRemark}}
      </span>
        </div>
        <div v-show="orderDetailInfo.taskFlowId === 2" class="item"  style="align-items: baseline" >
          <span class="leftTitle fontColor">目的地:</span><span class="rightContent" style="flex: 1">{{ orderDetailInfo.destinationAddress }}</span>
        </div>
        <div v-show="orderDetailInfo.taskFlowId === 2" class="item"  style="align-items: baseline">
          <span class="leftTitle fontColor">目的地补充:</span><span class="rightContent vehicleRemark">{{orderDetailInfo.destinationRemark}}</span>
        </div>
        <div class="item">
          <span class="leftTitle fontColor">工单状态:</span><span class="rightContent orderStatus">{{ orderDetailInfo.taskOrderStatusString }}</span>
        </div>
        <div class="item">
          <span class="leftTitle fontColor">服务车辆:</span><span class="rightContent">{{ orderDetailInfo.taskVehicleName }}</span>
        </div>
        <div class="item">
          <span class="leftTitle fontColor">服务师傅:</span><span class="rightContent">{{ orderDetailInfo.driverName }} {{orderDetailInfo.drivePhone ? '/' : ''}} {{orderDetailInfo.drivePhone }}
           <span v-if="queryType == 5" class="driverPoiBtn" @click="noMultipleClicks(showMap)">查看司机位置</span>
          </span>
        </div>
        <div class="item" v-if="queryType == 9 || queryType ==11  || queryType ==12">
          <span class="leftTitle fontColor">工单照片:</span><span class="rightContent">
           <span  class="driverPoiBtn" @click="checkPhoto">查看照片</span>
          </span>
        </div>
      </div>
    </div>
    <div class="serviceInfo common" v-if="orderDetailInfo.batteryNo">
      <div class="title">电瓶信息:</div>
      <div class="line"></div>
      <div class="infoContent">
        <div class="item">
          <span class="leftTitle fontColor">设备号:</span><span class="rightContent">{{orderDetailInfo?.batteryNo}}</span>
        </div>
        <div class="item">
          <span class="leftTitle fontColor">品牌:</span><span class="rightContent">{{orderDetailInfo?.batteryBrand}}</span>
        </div>
        <div class="item">
          <span class="leftTitle fontColor">型号:</span><span class="rightContent">{{orderDetailInfo?.batteryModel}}</span>
        </div>
      </div>
    </div>

    <div class="map" v-show="showPopup"   id="container">
      <img @click="showPopup = false"  src="@/assets/delKey.png" class="mapImg">
    </div>
  </div>
</template>
<script>
import {myMixins} from '@/utils/myMixins'
import {getOrderDetail,showVehiclePositionInfo} from "@/api/order"
import minePosition from '@/assets/minePosition.png';
import vehiclePosition from '@/assets/vehiclePosition.png';
import  desitationPosition from '@/assets/desitationPosition.png'
export default {
  name: "workOrderDetail",
  mixins:[myMixins],
  data(){
    return{
      userOrderId:'',
      queryType:'',
      orderCode:'',
      taskOrderId:'',
      orderDetailInfo:{},
      showPopup: false,
      map: '',
      driverPoiInfo:{},
      noClick:true,
    }
  },
  async mounted() {
    // 获取当前 URL
    const urlParams = new URLSearchParams(window.location.search);
    // 获取指定参数的值
    this.queryType=urlParams.get('queryType');
    this.userOrderId = urlParams.get('userOrderId');
    this.orderCode=urlParams.get('orderCode');
    this.taskOrderId=urlParams.get('taskOrderId') ? urlParams.get('taskOrderId') : '';
    await this.getDetail();
    if(this.queryType == 5){
      await this.getDriverPoi();
    }
    this.$nextTick(() => {
      this.initMap();
    });

  },
  methods:{
    async getDetail(){
      let result=await getOrderDetail({
        queryType:this.queryType,
        userOrderId:this.userOrderId,
        orderCode:this.orderCode,
        taskOrderId:this.taskOrderId ? this.taskOrderId : ''
      })
      // if(result.code === 200){
        this.orderDetailInfo=result.data;
      // }
    },
    showMap() {
      this.showPopup = true;
      this.mapMarkers();
    },
    checkPhoto(){
      let isAllowImage = this.queryType == 9 ? 0 : 1
      let data = {
        "action": "orderPhoto",
        "params": {
          "userOrderId": this.userOrderId,
          "orderCode": this.orderCode,
          "taskOrderId": this.taskOrderId,
          "isAllowImage":isAllowImage,
        }
      }
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isiOS){
        window.webkit.messageHandlers.nativeObject.postMessage(data);
      }else {
        window.android.sendMessage("orderPhoto,"+this.userOrderId+","+this.orderCode+","+this.taskOrderId+","+isAllowImage);
      }
    },
    initMap() {
      this.map = new AMap.Map('container',{
        zoom:14,//级别(缩放比例 3-20 )
        center: [this.driverPoiInfo.vehiclePositionLongtitude,this.driverPoiInfo.vehiclePositionLatitude],//中心点坐标
        viewMode:'2D',//使用3D视图
      })
      this.map.on('complete', () => {
        console.log("地图加载完成")
        this.mapMarkers();
      });
    },
    mapMarkers(){
      // 车辆位置，a点
      let marker = new AMap.Marker({
        position: [this.driverPoiInfo?.vehiclePositionLongtitude,this.driverPoiInfo?.vehiclePositionLatitude],
        icon: new AMap.Icon({
          image: minePosition, // 图片的相对路径
          size: new AMap.Size(22, 32),  // 图标的尺寸
          imageSize: new AMap.Size(22, 32)  // 图片的实际尺寸
        }),
      });
      this.map.add(marker);
      // 事发地，b点
      let marker1 = new AMap.Marker({
        position: [this.driverPoiInfo?.vehiclePointLongitude,this.driverPoiInfo?.vehiclePointLatitude],
        icon: new AMap.Icon({
          image: vehiclePosition, // 图片的相对路径
          size: new AMap.Size(26, 28),  // 图标的尺寸
          imageSize: new AMap.Size(26, 28)  // 图片的实际尺寸
        })
      });
      this.map.add(marker1);
      let marker2 = new AMap.Marker({
        position: [this.driverPoiInfo?.destinationLongitude,this.driverPoiInfo?.destinationLatitude],
        icon: new AMap.Icon({
          image: desitationPosition, // 图片的相对路径
          size: new AMap.Size(28, 28),  // 图标的尺寸
          imageSize: new AMap.Size(28, 28)  // 图片的实际尺寸
        })
      });
      this.map.add(marker2);
      this.map.setFitView([marker,marker1,marker2])
    },
    async getDriverPoi(){
      let res=await showVehiclePositionInfo({
        userOrderId:this.userOrderId,
        taskOrderId:this.taskOrderId
      })
      // 2704382，24145
      this.driverPoiInfo = res.data
      console.log("driverPoiInfo",this.driverPoiInfo)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap{
  @include wh(100%,100%);
  background-color: #F4F5F7;
  overflow-y: auto;
}
::v-deep .amap-copyright{
  display: none !important;
}
::v-deep .amap-logo{
  display: none !important;
}
.map{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  @include wh(95%,350px);
  .mapImg{
    background-color: #FFFFFF;
    position: absolute;
    right: 0;
    top: 0;
    @include wh(25px,25px);
    z-index: 1111111;
  }
}

.common{
  background: #FFFFFF;
  @include radiusSizing(6px);
  padding: 11px 17px 15px 24px;
}
.fontColor{
  @include fontWeightSize(400,12px);
  color: #000000;
  line-height: 24px;
}
.baseInfo{
  @include wh(100%,260px);
  margin-bottom: 12px;
  .infoWrap{
    display: flex;
    .leftTitle{
      margin-left: 5px;
      margin-right: 6px;
      @include wh(60px,189px);
      opacity: .5;
    }
    .rightContent{
      height: 189px;
      width: calc(100% - 60px);
    }
  }
}
.serviceInfo{
  //@include wh(100%,356px);
  width: 100%;
  margin-bottom: 30px;
  .item{
    @include flexCenter;
  }
  .infoContent{
    .leftTitle{
      display: block;
      width: 72px;
      opacity: .5;
    }
    .rightContent{
      width: calc(100% - 90px);
      @include fontWeightSize(bold,12px);
      .driverPoiBtn{
        display: inline-block;
        padding: 3px 8px;
        @include bgFontColor(#FFFFFF,#354D93);
        opacity: .7;
        border-radius: 3px;
        text-align: center;
        margin-left: 6px;
        cursor: pointer;
      }
    }

    .vehicleRemark{
      @include fontWeightSize(400,11px);
      @include colorOpa(#121212,0.55);
      line-height: 14px;
      flex: 1;
    }
    .orderStatus{
      color: #E69B0B;
    }
  }
}
.title{
  @include fontWeightSize(bold,14px);
  @include colorOpa(#323643,0.6);
  line-height: 20px;
}
.line{
  @include wh(100%,2px);
  opacity: 0.16;
  border-bottom: 1px solid;
  margin: 7px 0;
  border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
}
</style>