<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>
<!--    h5GoBack-->
    <div class="listWrap">
     <div class="mapWrap">
       <div>{{ detailInfo.userOrderCode }}</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.settleMileageAb}}公里</span>
            </div>
            <div class="right">
              <span>{{detailInfo.bridgeAmountAb}}</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.settleMileageBc}}公里</span>
           </div>
           <div class="right">
             <span>{{detailInfo.bridgeAmountBc}}</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.settleMileageCa}}公里</span>
           </div>
           <div class="right">
             <span>{{detailInfo.bridgeAmountCa}}</span>
             <span>元</span>
           </div>
         </div>
         <div class="line"></div>
         <div class="totalFree">
           <span>总金额</span>
           <span>{{ detailInfo.bridgeAmountAb+detailInfo.bridgeAmountBc+detailInfo.bridgeAmountCa }}</span>
           <span>元</span>
         </div>
       </div>
     </div>
      <template  v-if="detailInfo.state.code == 1">
        <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="2" style="margin-right: 26px" class="item">
                  通过
                  <img
                      slot="icon"
                      slot-scope="props"
                      :src="props.checked ? activeIcon : inactiveIcon"
                  >
                </van-radio>
                <template v-if="detailInfo.secondAudit">
                  <van-radio  :name="4"  class="item">报销失败
                    <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.checked ? activeIcon : inactiveIcon"
                    >
                  </van-radio>
                </template>
                <template v-else>
                  <van-radio  :name="3"  class="item">
                    不通过
                    <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.checked ? activeIcon : inactiveIcon"
                    >
                  </van-radio>
                </template>
              </van-radio-group>
            </div>
          </div>
          <div class="itemWrap"  v-if="states == 3 || states == 4">
            <div>
              <div>
                <span class="star">*</span>
                <span>不通过原因</span>
              </div>
            </div>
            <van-dropdown-menu active-color="#354683" direction="up">
                <van-dropdown-item v-model="other" :options="option"   @change="changeOption">
                  <template #title>
                    <span v-if="!other">请选择</span>
                    <span v-else>{{ other }}</span>
                  </template>
                </van-dropdown-item>
            </van-dropdown-menu>
          </div>
          <div v-show="other == '其他'">
            <div>其他原因</div>
            <textarea v-model="otherReason" class="multipleTxt" placeholder="描述"></textarea>
          </div>
        </div>
      </template>
      <template v-else>
       <div class="aduit" style="line-height: 20px">
         <div  class="itemWrap" >
           <div> {{ result }}</div>
           <div class="gary">{{detailInfo.state.label}}
         </div>
         </div>
         <div class="itemWrap"  v-if="detailInfo.state.code == 3 || detailInfo.state.code == 4">
           <div>不通过原因 </div>
           <div class="gary">{{detailInfo.auditRemark.includes('/') ? detailInfo.auditRemark.substring(0,2) : detailInfo.auditRemark}}</div>
         </div>
         <div class="itemWrap" v-show="detailInfo.auditRemark.substring(0,2) == '其他'">
           <div>其他原因</div>
           <div class="gary" style="flex: 1;width: 75%;text-align: end">{{detailInfo.auditRemark}}</div>
         </div>
       </div>
     </template>
     <div  v-if="detailInfo.state.code == 1" 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:'',
      batchCode:'',
      isShowBtn:false,
      type:'',
      option: [
        { text: '缺失凭证照片', value: '缺失凭证照片' },
        { text: '申请金额与凭证不一致', value: '申请金额与凭证不一致' },
        { text: '非正常产生路桥费', value: '非正常产生路桥费' },
        { text: '其他', value: '其他' },

      ],
    }
  },
  created() {
    this.id = this.$route.params.id;
    // this.id=29
    this.activeIndex=this.$route.params.index;
    this.batchCode=this.$route.params.batchCode
    this.isShowBtn=this.$route.params.getUrlId
    this.type=this.$route.params?.type
    console.log("created",this.type)
    console.log(" this.isShowBackBtn",this.isShowBackBtn)
  },
  async mounted(){
    await this.getOrderDetail()
    this.$nextTick(() => {
      this.initMap();
    });
  },
  computed:{
    result() {
      if (this.detailInfo.secondAudit) {
        if(this.detailInfo.state.code != 3){
          return '二次审核结果';
        }else{
          return '审核结果';
        }
      } else {
        return '审核结果';
      }
    },
  },
  methods:{
    changeOption(){
      console.log("99999",this.other)
    },
    goPrePage(){
      this.$router.push({
        name: 'caseAuditList',  // 目标路由的名称
        params: {
          activeIndex:this.activeIndex,
          batchCode:this.batchCode,
          isShowBtn:this.isShowBtn,
          type:this.type
        }
      });
    },
    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 != 2  && !this.other){
        this.$toast('审核不通过原因必填')
        return
      }
      if(this.other == '其他'  && !this.otherReason){
        this.$toast('审核不通过原因为其他时审核原因必填')
        return
      }
      let res=''
      try {
        res = await reimburseOrderAudit({
          id: this.id,
          state: this.state,
          auditRemark: this.other == '其他' ? this.other + '/' + this.otherReason : this.other,
        })
      } catch (e) {
        // this.$toast(e.error)
      }
      if(res.code == 200){
        this.$toast("提交成功")
        setTimeout(()=>{
          this.goPrePage()
        },1500)
      }else{
        this.$toast(res.msg)
      }
    },
    isUse(e){
      this.state=e
    },
    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;
}
::v-deep .van-dropdown-menu__bar {
  background-color: #FFFFFF !important; /* 去掉边框 */
  box-shadow: none !important; /* 去掉阴影（如果有的话）*/
}
/*.mySelect{
  @include fontWeightSize(bold,13px);
  color: #323643;
  appearance: none;
  padding-right: 16px;
  background: url('@/assets/arrow_bot.png') no-repeat right center / 15px 14px;
  text-align: right; !* 将下拉列表的文本右对齐 *!
}
.mySelect {
  -webkit-appearance: none; !* 移除默认的样式 *!
  -moz-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
}

.mySelect::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: #000 transparent transparent transparent;
}*/
.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;
      .gary{
        opacity: 0.5;
      }
    }
    .star{
      color:  #FF0808;
      @include fontWeightSize(bold,13px);
    }
    .isJoin{
      display: flex;
      position: relative;
      z-index: 10;
      .joinWrap, .item{
        @include flexCenter;
      }
      img{
        @include widHeiMar(16px,16px,6px)
      }
    }
    .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;
      z-index: 1;
      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;
}
::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>
