<template>
  <div class="wrap">
    <div class="navBar">
      <van-nav-bar
          title="案件详情"
          left-arrow
          left-arrow-color="#FFFFFF"
          :border="false"
          :fixed="true"
          :safe-area-inset-top="true"
          @click-left="goPrePage"
      />
    </div>
    <div class="listWrap">
     <div class="mapWrap">
       <div>DDA2304142407036</div>
       <div class="map">
         <div class="title">
           <div><span>司机姓名:</span><span>{{ detailInfo.driverName }}</span></div>
           <div><span>车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
         </div>
         <div class="mapContainer"    id="container"></div>
       </div>
       <div class="wiadgeWrap">
          <div class="lineWrap">
            <div class="left">
              <img class="commonImg" :src="detailInfo.bridgeAbUrl">
              <span class="free">AB(出发段)路桥费</span>
              <span>{{detailInfo.bridgeAmountAb}}公里</span>
            </div>
            <div class="right">
              <span>{{detailInfo.settleMileageAb}}</span>
              <span>元</span>
            </div>
          </div>
          <div class="line"></div>
         <div class="lineWrap">
           <div class="left">
             <img class="commonImg" :src="detailInfo.bridgeBcUrl">
             <span class="free">BC(出发段)路桥费</span>
             <span>{{detailInfo.bridgeAmountBc}}公里</span>
           </div>
           <div class="right">
             <span>{{detailInfo.settleMileageBc}}</span>
             <span>元</span>
           </div>
         </div>
         <div class="line"></div>
         <div class="lineWrap">
           <div class="left">
             <img class="commonImg" :src="detailInfo.bridgeCaUrl">
             <span class="free">CA(出发段)路桥费</span>
             <span>{{detailInfo.bridgeAmountCa}}公里</span>
           </div>
           <div class="right">
             <span>{{detailInfo.settleMileageCa}}</span>
             <span>元</span>
           </div>
         </div>
         <div class="line"></div>
         <div class="totalFree">
           <span>总金额</span>
           <span>{{ detailInfo.settleMileageAb+detailInfo.settleMileageBc+detailInfo.settleMileageCa }}</span>
           <span>元</span>
         </div>
       </div>
     </div>
     <div class="aduit">
        <div  :class="{itemWrap : true,aduitResult: detailInfo.secondAudit}">
          <div>
            <span class="star">*</span>
            <span>{{detailInfo.secondAudit ? '二次审核结果' : '审核结果'}}</span>
          </div>
          <div class="isJoin">
            <van-radio-group v-model="states" @change="isUse"  class="joinWrap">
              <van-radio :name="1" style="margin-right: 26px" class="item">
                通过
                <img
                    slot="icon"
                    slot-scope="props"
                    :src="props.checked ? activeIcon : inactiveIcon"
                >
              </van-radio>
              <van-radio :name="2" class="item">
                {{detailInfo.secondAudit? '报销失败' : '不通过'}}
                <img
                    slot="icon"
                    slot-scope="props"
                    :src="props.checked ? activeIcon : inactiveIcon"
                >
              </van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="itemWrap" v-show="states == 2">
         <div>
           <div>
             <span class="star">*</span>
             <span>不通过原因</span>
           </div>
         </div>
         <select id="mySelect" class="mySelect" v-model="other"  >
           <option value="缺失凭证照片">缺失凭证照片</option>
           <option value="申请金额与凭证不一致">申请金额与凭证不一致</option>
           <option value="非正常产生路桥费">非正常产生路桥费</option>
           <option value="其他">其他</option>
         </select>
       </div>
        <div v-show="other == '其他'">
          <div>其他原因</div>
          <textarea v-model="otherReason" class="multipleTxt" placeholder="描述"></textarea>
        </div>
     </div>
      <div class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>
   </div>
  </div>

</template>

<script>
import {myMixins} from "@/utils/myMixins";
import {reimburseOrderDetail,reimburseOrderAudit} from  "@/api/reimbursementBatch"
import minePosition from "@/assets/realApoint.png";
import vehiclePosition from "@/assets/realBpoint.png";
import desitationPosition from "@/assets/realCpoint.png";
export default {
  name: "caseDetail",
  mixins: [myMixins],
  data(){
    return{
      states:'',
      activeIcon: require('@/assets/check.png'),
      inactiveIcon: require('@/assets/uncheck.png'),
      otherReason:'',
      other:'',
      firstSubmit:2,
      id:'',
      detailInfo:{},
      noClick:true,
      state:'',//审核状态
      map: '',
      abPath:[],
      bcPath:[],
      activeIndex:'',
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.activeIndex=this.$route.params.index;
  },
  async mounted(){
    await this.getOrderDetail()
    this.$nextTick(() => {
      this.initMap();
    });
  },
  methods:{
    goPrePage(){
      this.$router.push({
        name: 'caseAuditList',  // 目标路由的名称
        params: {
          id:this.id,
          activeIndex:this.activeIndex,
        }
      });
    },
    initMap() {
      this.map = new AMap.Map('container',{
        zoom:14,//级别(缩放比例 3-20 )
        center: [this.detailInfo.apointLongtitude,this.detailInfo.apointLatitude],//中心点坐标
        viewMode:'2D',//使用3D视图
      })
      this.map.on('complete', () => {
        this.mapMarkers();
      });
    },
    mapMarkers(){
      let ABpolyline=''
      let BCpolyline=''
      if(this.abPath && this.abPath.length>0){
        ABpolyline = new AMap.Polyline({
          path: [...this.abPath],
          strokeColor: '#005DC7', // 路径线颜色
          strokeWeight: 5 ,// 路径线宽度
          showDir: true // 显示箭头
        });
        this.map.add(ABpolyline);
      }
      if(this.bcPath && this.bcPath.length>0){
        BCpolyline = new AMap.Polyline({
          path: [...this.bcPath],
          strokeColor: '#005DC7 ', // 路径线颜色
          strokeWeight: 5 ,// 路径线宽度
          showDir: true // 显示箭头
        });
        this.map.add(BCpolyline);
      }
      // 车辆位置，a点
      let marker = new AMap.Marker({
        position: [this.detailInfo?.apointLongtitude,this.detailInfo?.apointLatitude],
        icon: new AMap.Icon({
          image: minePosition, // 图片的相对路径
          size: new AMap.Size(43, 43),  // 图标的尺寸
          imageSize: new AMap.Size(43, 43)  // 图片的实际尺寸
        }),
      });
      this.setLabel(marker,this.detailInfo.apointAddress)
      this.map.add(marker);
      // 事发地，b点
      let marker1 = new AMap.Marker({
        position: [this.detailInfo?.bpointLongtitude,this.detailInfo?.bpointLatitude],
        icon: new AMap.Icon({
          image: vehiclePosition, // 图片的相对路径
          size: new AMap.Size(43, 43),  // 图标的尺寸
          imageSize: new AMap.Size(43, 43)  // 图片的实际尺寸
        })
      });
      this.setLabel(marker1,this.detailInfo.bpointAddress)
      this.map.add(marker1);
      let marker2=''
      if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
          marker2 = new AMap.Marker({
               position: [this.detailInfo?.cpointLongtitude,this.detailInfo?.cpointLatitude],
               icon: new AMap.Icon({
                 image: desitationPosition, // 图片的相对路径
                 size: new AMap.Size(28, 28),  // 图标的尺寸
                 imageSize: new AMap.Size(28, 28)  // 图片的实际尺寸
               })
             });
        this.setLabel(marker2,this.detailInfo.cpointAddress)
        this.map.add(marker2);
      }
      if(this.detailInfo.cpointLongtitude && this.detailInfo.cpointLatitude){
        this.map.setFitView([marker,marker1,marker2])
      }else{
        this.map.setFitView([marker,marker1])
      }
    },
    setLabel(markerPoint,address){
      markerPoint.setLabel({
        offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
        content: address, //设置文本标注内容
        direction: 'top'
      });
    },
    async submitHandle(){
      if(!this.states){
          this.$toast('审核结果必选')
          return
      }
      if(this.states == 1  && !this.other){
        this.$toast('审核不通过原因必填')
        return
      }
      if(this.other == '其他'  && !this.otherReason){
        this.$toast('审核不通过原因是其他时审核原因必填')
        return
      }
      let res = await reimburseOrderAudit({
          id:this.id,
          state:this.state,
          auditRemark:this.other=='其他' ? this.other+ '/' + this.otherReason : this.other,
      })
      console.log("ressssss",res)
    },
    isUse(e){
      this.states=e
      if(this.states == 1){
        this.state=2
      }else if(this.states == 2){
        if(this.detailInfo.secondAudit){
          this.state=4
        }else{
          this.state=3
        }
      }
    },
    async getOrderDetail(){
      let res=await reimburseOrderDetail({
        id:this.id
      })
      this.detailInfo=res.data
      if(this.detailInfo.gpsTrackQOsAB && this.detailInfo.gpsTrackQOsAB .length > 0){
        this.detailInfo?.gpsTrackQOsAB.forEach((item)=>{
          this.abPath.push([item.lon,item.lat])
        })
      }
      if(this.detailInfo.gpsTrackQOsBC && this.detailInfo.gpsTrackQOsBC .length > 0){
        this.detailInfo?.gpsTrackQOsBC.forEach((item)=>{
          this.bcPath.push([item.lon,item.lat])
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
  @include wh(100%,100%);
  box-sizing: border-box;
}
.navBar{
  margin-bottom: 46px;
}
::v-deep .van-nav-bar__content{
  background-color: #354683 !important;
}
.listWrap{
  width: 100%;
  height: calc(100% - 46px);
  overflow-y: auto;
  background-color: #F4F5F7;
  box-sizing: border-box;
  padding: 10px 8px;
  position: relative;
  .mapWrap{
    @include wh(100%,407px);
    background-color: #FFFFFF;
    border-radius: 6px;
    margin-bottom: 15px;
    box-sizing: border-box;
    padding: 9px 8px 0;
    .map{
      @include wh(100%,204px);
      border-radius: 4px;
      border: 1px solid #F0F0F0;
      margin-top: 7px;
      margin-bottom: 13px;
      .title{
        @include wh(100%,31px);
        line-height: 31px;
        background: #F9FCFF;
        border-radius: 0px 0px 6px 6px;
        display: flex;
        div{
          width: 50%;
          margin-left: 17px;
          font-size: 12px;
          span:first-child{
            display: inline-block;
            color: #555A68;
            margin-right: 3px;
          }
          span:last-child{
            color: #3A3A3A;
          }
        }
      }
      .mapContainer{
        @include wh(100%,173px)
      }
    }
  }
  .wiadgeWrap{
    box-sizing: border-box;
    padding: 0 6px;
    .lineWrap{
      @include flexBetCen();
      line-height: 32px;
      .left{
        @include flexCenter();
        img{
          @include wh( 48px,31px);
        }
        .free{
          margin: 0 11px;
          @include fontWeightSize(bold,13px);
          @include colorOpa(#000000,0.9);
        }
        span:last-child{
          font-size: 12px;
          color: #555A68;
        }
      }
      .right{
        span:first-child{
          @include fontWeightSize(bold,18px);
          @include colorOpa(#000000,0.75);
        }
        span:last-child{
          @include fontWeightSize(bold,10px);
          @include colorOpa(#000000,0.8);
          margin-left: 4px;
        }
      }
    }
    .line{
      width: 100%;
      border-bottom: 1px solid #E9E9EA;
      opacity: 0.6;
      margin-top: 2px;
    }
    .totalFree{
      width: 100%;
      line-height: 42px;
      @include flexCenter();
      justify-content: flex-end;
      span:first-child{
        @include fontWeightSize(bold,13px);
        @include colorOpa(#000000,0.9);
      }
      span:nth-child(2){
        @include fontWeightSize(600,22px);
        color: #FF5D2E;
        margin: 0 3px 0 9px;
      }
      span:last-child{
        @include fontWeightSize(bold,10px);
        @include colorOpa(#000000,0.8);
      }
    }
  }
  .aduit{
    width: 100%;
    background-color: #FFFFFF;
    //height: 201px;
    line-height: 37px;
    border-radius: 6px;
    margin-bottom: 15px;
    box-sizing: border-box;
    padding: 17px 21px 19px 16px;
    @include flexBetween();
    .itemWrap{
      display: flex;
      justify-content: space-between;
    }
    .star{
      color:  #FF0808;
      @include fontWeightSize(bold,13px);
    }
    .multipleTxt{
      @include wh(100%,87px);
      background: #FAFAFA;
      @include sizingPadRadius(8px,8px,3px);
      border: 1px solid #E6E6E6;
      backdrop-filter: blur(10px);
      margin-top: 3px;
    }
    .aduitResult:after{
      content: '该案件为二次提交，审核不通过后司机无法再次申请报销。';
      color: red;
      position: absolute;
      line-height: 70px;
      font-size: 10px;
    }
  }
  .submitBtn{
    //position: absolute;
    //bottom: 30px;
    margin:20px 0 10px 6%;
    border-radius: 5px;
    text-align: center;
    @include bgFontColor(#FFFFFF,#354D93);
    @include fontWeightSize(bold,15px);
    @include whLin(88%,48px);
  }
}
.greColor{
  color:#38AD00 ;
  font-weight: 500;
}
.redColor{
  color:#FF5D2E ;
  font-weight: 500;
}
.commonImg{
  @include widHeiMar(13px,13px,4px);
}
.rightArrImg{
  @include wh(6px,9px);
  margin-left: 6px;
}
.yelColor{
  color: #E69B0B;
  font-weight: 600;
}
.greColor{
  color: #56B628;
  font-weight: 600;
}
.oraColor{
  color: #FF5D2E;
  font-weight: 600;
}
.garyColor{
  color: #9C9C9C;
  font-weight: 600;
}
.isJoin{
  display: flex;
  .joinWrap, .item{
    @include flexCenter;
  }
  img{
    @include widHeiMar(16px,16px,6px)
  }
}
::v-deep .amap-copyright{
  display: none !important;
}
::v-deep .amap-logo{
  display: none !important;
}
::v-deep .amap-marker-label{
  border: none;
  padding: 0 8px;
  @include all-height(25px);
  @include fontWeightSize(12px,400);
  color: #3A3A3A;
  @include bgcolorOpa(#FFFFFF,0.98);
  box-shadow: 0px 1px 4px 0px rgba(164,162,162,0.69);
  border-radius: 17px;
}
</style>
