<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="goback"
    />
  </div>
  <div class="baseInfo common">
    <div class="title">基本信息:</div>
    <div class="line"></div>
    <div class="item">
      <span class="titleLeft">工单编号：</span>
      <span class="content" id="copyText">{{ orderInfo.orderCode }}</span>
      <img @click="copyText" src="@/assets/copy.png" />
    </div>
    <div class="item">
      <span class="titleLeft">车牌号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="content">{{orderInfo.plateNumber}}</span>
    </div>
    <div class="item">
      <span class="titleLeft">服务类型：</span>
      <span class="content" >{{ orderInfo.serviceName }}</span>
    </div>
    <div class="item">
      <span class="titleLeft">工单状态：</span>
      <span class="content" >{{ orderInfo.taskStatus?.label }}</span>
    </div>
    <div class="item">
      <span class="titleLeft">结算比例：</span>
      <span class="content" >{{ orderInfo.supplierSettleRatio?.label }}</span>
    </div>
    <div class="item">
      <span class="titleLeft">结算类型：</span>
      <span class="content" >{{ orderInfo.settleType?.label }}</span>
    </div>
    <div class="item" >
      <span class="titleLeft">结算方式：</span>
      <div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
        <span>{{orderInfo.taskSettleType?.label}}</span>
      </div>
    </div>
    <div class="item">
      <span class="titleLeft">扣除责任险费：</span>
      <span class="content">{{orderInfo.policyAmount}} {{orderInfo.cutInsuranceAmount}}</span>
    </div>

  </div>
  <div class="baseInfo common">
    <div class="title">审核数据:</div>
    <div class="line"></div>
    <div class="item" v-show="abState">
      <span class="titleLeft">到事发地距离：</span>
      <span class="content">{{ orderInfo.settleMileageAb + ' km' }}</span>
    </div>
    <div class="item" v-show="bcState">
      <span class="titleLeft">拖车里程：</span>
      <span class="content">{{ orderInfo.settleMileageBc + ' km' }}</span>
    </div>
    <div class="item" v-show="caState">
      <span class="titleLeft">返程里程：</span>
      <span class="content">{{ orderInfo.settleMileageCa + ' km' }}</span>
    </div>
    <div class="item" v-show="bridgeAbState">
      <span class="titleLeft">ab路桥费：</span>
      <span class="content">{{orderInfo.bridgeAmountAb + ' 元' }}</span>
    </div>
    <div class="item" v-show="bridgeBcState">
      <span class="titleLeft">bc路桥费：</span>
      <span class="content">{{orderInfo.bridgeAmountBc + ' 元' }}</span>
    </div>
    <div class="item" v-show="bridgeCaState">
      <span class="titleLeft">va路桥费：</span>
      <span class="content">{{orderInfo.bridgeAmountCa + ' 元' }}</span>
    </div>
    <div class="item"  v-show="tyreAmountState">
      <span class="titleLeft">小轮费：</span>
      <span class="content" >{{ orderInfo.tyreAmount  + ' 元'}}</span>
    </div>
    <div class="item" v-show="dilemmaAmountState && basePriceDisabled">
      <span class="titleLeft">困境费：</span>
      <span class="content" >{{ orderInfo.dilemmaAmount  + ' 元'}}</span>
    </div>
    <div class="item" v-show="waitAmountState">
      <span class="titleLeft">等候费：</span>
      <span class="content" >{{ orderInfo.waitAmount  + ' 元'}}</span>
    </div>
    <div class="item" v-show="basementFeeState">
      <span class="titleLeft">地库费：</span>
      <span class="content" >{{ orderInfo.basementFee  + ' 元'}}</span>
    </div>
    <div class="item">
      <span class="titleLeft">基本费用：</span>
      <span class="content" >{{ orderInfo.basePrice   + '元'}}</span>
    </div>
    <div class="item">
      <span class="titleLeft">额外费用总计：</span>
      <span class="content" >{{ orderInfo.extraPrice   + '元'}}</span>
    </div>
    <div class="item">
      <span class="titleLeft">收取客户金额：</span>
      <span class="content" >{{ orderInfo.customerAmount   + '元'}}</span>
    </div>
    <div class="item">
      <span class="titleLeft">费用总计：</span>
      <span class="content" >{{ orderInfo.settleAmount  + ' 元' }}</span>
    </div>
  </div>

</div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {getAccountRecordDetail} from "@/api/mine"
export default {
  name: "aduitCompleteDetail",
  mixins:[myMixins],
  data(){
    return{
      id:'',
      postfix:'',
      orderInfo:{},
      index:"",
      queryTime:'',//记录工单对账选择的时间
      serviceType:'',
      settleType:'',
      taskFlowId: '',
      appCode:'',
      abState:false,
      bcState:false,
      caState:false,
      bridgeAbState:false,
      bridgeBcState:false,
      bridgeCaState:false,
      waitAmountState:false,
      dilemmaAmountState:false,
      tyreAmountState:false,
      basementFeeState:false,
      accountStatus:'',
    }
  },
  computed:{
    basePriceDisabled(){
      return !(this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'
          || (this.fixedPrice && parseFloat(this.fixedPrice) > 0 && this.fixedPriceType) || this.supplierId == 500921)
    },
    //保险实拖案件，剔除人保和太平事故
    isCPICDrag(){
      return this.settleType == '实拖' &&  !['PICC10101','PICCSHANGQI','PICC101099','SAIPCC2021',''].includes(this.appCode)
    },
    isBasement(){
      return this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'
    },
  },
  async mounted() {
    this.id=this.$route.params?.id;
    this.postfix=this.$route.params?.postfix;
    this.index=this.$route.params?.index;
    this.queryTime = this.$route.params?.queryTime
    await this.getDetail()
  },
  methods: {
    goback(){
      this.$router.push({
        name:"workOrderReconciliation",
        params:{
          activeIndex:this.index,
          queryTime:this.queryTime
        }
      })
    },
    async getDetail(){
      this.abState = false
      this.bcState = false
      this.caState = false
      this.bridgeAbState = false
      this.bridgeBcState = false
      this.bridgeCaState = false
      this.waitAmountState = false
      this.dilemmaAmountState = false
      this.tyreAmountState = false
      this.basementFeeState = false
      this.accountStatus = ''
      let res= await getAccountRecordDetail({
        id:this.id,
        postfix:this.postfix
      })
      if(res.code === 200){
        this.orderInfo=res.data
        this.serviceType=this.orderInfo.serviceName
        this.taskFlowId=this.orderInfo.taskFlowId
        this.settleType=this.orderInfo.settleType?.label
        this.accountStatus = this.orderInfo.accountStatus?.code
        this.appCode=this.orderInfo.appCode
      }
      if(this.settleType == '实拖'  && this.basePriceDisabled){
        this.bcState = true

      }else if(this.settleType == '单程' && this.basePriceDisabled){
        this.abState = true
        this.bcState = true
        if(this.taskFlowId == '1'  && this.basePriceDisabled ){
          this.bcState = false
        }
      }else if(this.settleType == '全程'  && this.basePriceDisabled){
        this.abState = true
        this.bcState = true
        this.caState = true
      }else if(this.settleType == '全程减半'  && this.basePriceDisabled){
        this.abState = true
        this.bcState = true
        this.caState = true
      }
      if(this.orderInfo.refBridgeAmountAB > 0 && !this.isCPICDrag && !this.isBasement) this.bridgeAbState = true
      if(this.orderInfo.refBridgeAmountBC > 0 && !this.isCPICDrag && !this.isBasement) this.bridgeBcState = true
      if(this.orderInfo.refBridgeAmountCA > 0 && !this.isCPICDrag && !this.isBasement) this.bridgeCaState = true
      if(this.orderInfo.refWaitFee > 0) this.waitAmountState = true
      if(this.orderInfo.refDilemmaFee > 0) this.dilemmaAmountState = true
      if(this.orderInfo.refTyreNumber > 0 && this.taskFlowId != '1') this.tyreAmountState = true
      if(this.orderInfo.refBasementFee > 0 && this.taskFlowId != '1' ){
        this.basementFeeState = true
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
  @include wh(100%,100%);
  background-color: #F4F5F7;
  overflow-y: auto;
}
.navBar{
  margin-bottom: 46px;
}
.title{
  @include fontWeightSize(bold,14px);
  @include colorOpa(#323643,0.66);
}
.line{
  @include wh(100%,2px);
  opacity: 0.16;
  border-top: 1px solid;
  margin-top: 7px;
  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;
}
.item{
  @include flexCenter;
  font-size: 12px !important;
  font-weight: 400 !important;
  .titleLeft{
    opacity: .5;
    line-height: 27px;
  }
}
img{
  @include wh(35px,15px);
  margin-left: 21px;
}
.common{
  background-color: #FFFFFF;
  padding: 11px 24px 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.baseInfo{
  @include wh(100%,276px);

}
.supplierData {
  @include wh(100%, 438px);

  .inpInfo {
    @include flexColBet;
    margin: 0 5px;
    color: #323643;
    line-height: 32px;

    input {
      border: none;
      text-align: right;
    }

    .titleContent {
      width: 91px;
      @include fontWeightSize(bold, 13px);

    }

    .halfOpcity {
      opacity: .5;
    }

    .inputContent {
      text-align: right;
      .btnComputed {
        width: 48px;
        text-align: center;
        border-radius: 3px;
        @include all-height(18px);
        @include bgFontColor(#FFFFFF,#354D93);
      }
    }
  }
}
</style>