<template>
  <div class="wrap">
    <div class="navBar">
      <van-nav-bar
          :title="auditFormShow ? '重新记账' : '记账' "
          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>
        <span class="content">{{ orderInfo.taskSettleType?.label }}</span>
        <span class="driverPoiBtn" v-if="settleDetail.length>0" style="margin-left: 8px" @click="viewSettlementDoc">查看结算单</span>
      </div>
      <div class="item">
        <span class="titleLeft">扣除责任险费：</span>
        <span
            class="content">{{ orderInfo.policyAmount }}</span>
      </div>
      <div class="item">
        <span class="titleLeft">车衣费用：</span>
        <span
            class="content">{{ orderInfo.carClothingToolAmount }}</span>
      </div>
      <div class="item">
        <span class="titleLeft">免拖：</span>
        <span
            class="content">{{ orderInfo.customerDistanceLimit }} {{orderInfo.hedgingMileage && orderInfo.hedgingMileage > 0 ? '(超限对冲，只结免拖)' : ''}}</span>
      </div>
      <div class="item">
        <span class="titleLeft">换电瓶费用：</span>
        <span
            class="content">{{ orderInfo.replaceBatteryAmount }}</span>
      </div>
      <div class="item">
        <span class="leftTitle fontColor">工单照片:</span>
        <span class="rightContent">
           <span class="driverPoiBtn" @click="checkPhoto">查看照片</span>
      </span>
      </div>
    </div>
    <div class="supplierData common" v-show="!auditFormShow">
      <div class="title">供应商数据:</div>
      <div class="line"></div>
      <div class="inpInfo">
        <div class="titleContent">
          <div class="flex-between" v-show="abState">
            <div><span style="color: red;">*</span> 到事发地距离:</div>
            <div class="halfOpcity"><input @input="validateIntegerInput"  class="ipt"  type="number" v-model="form.supplierSettleMileageAb"/>公里</div>
          </div>
          <div class="flex-between" v-show="bcState">
            <div><span style="color: red;">*</span> 拖车里程:</div>
            <div class="halfOpcity"><input class="ipt"    type="number" v-model="form.supplierSettleMileageBc"/>公里</div>
          </div>
          <div class="flex-between" v-show="caState">
            <div><span style="color: red;">*</span>返程里程:</div>
            <div class="halfOpcity"><input  class="ipt"   type="number" v-model="form.supplierSettleMileageCa"/>公里</div>
          </div>
          <div class="flex-between" v-show="bridgeAbState">
            <div><span v-show="!isUnsuccessfulSettle" style="color: red;">*</span>ab路桥费:</div>
            <div class="halfOpcity"><input class="ipt"  @input="validateIntegerInput" :disabled="isUnsuccessfulSettle"  type="number" v-model="form.supplierBridgeAmountAb"/>元</div>
          </div>
          <div class="flex-between" v-show="bridgeBcState">
            <div><span v-show="!isUnsuccessfulSettle" style="color: red;">*</span>bc路桥费:</div>
            <div class="halfOpcity"><input class="ipt"  @input="validateIntegerInput" :disabled="isUnsuccessfulSettle"  type="number" v-model="form.supplierBridgeAmountBc"/>元</div>
          </div>
          <div class="flex-between" v-show="bridgeCaState">
            <div><span v-show="!isUnsuccessfulSettle" style="color: red;">*</span>ca路桥费:</div>
            <div class="halfOpcity"><input class="ipt"  @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountCa"/>元</div>
          </div>
          <div class="flex-between" v-show="waitAmountState">
            <div><span style="color: red;">*</span>等候费:</div>
            <div class="halfOpcity inputContent"><input class="ipt"  @input="validateIntegerInput"   type="number" v-model="form.supplierWaitAmount"/>元</div>
          </div>
          <div class="flex-between" v-show="tyreAmountState">
            <div><span v-show="!isUnsuccessfulSettle" style="color: red;">*</span>小轮个数:</div>
            <div class="halfOpcity inputContent"><input class="ipt"  @input="validateIntegerInput" :disabled="isUnsuccessfulSettle"   type="number" v-model="form.tyreNumber"/>个</div>
          </div>
          <div class="flex-between" v-show="tyreAmountState">
            <div>小轮费:</div>
            <div class="halfOpcity inputContent"><input @input="validateIntegerInput"  disabled  type="number" v-model="form.supplierTyreAmount"/>元</div>
          </div>
          <div class="flex-between" v-show="dilemmaAmountState && basePriceDisabled">
            <div><span style="color: red;">*</span>困境费:</div>
            <div class="halfOpcity inputContent"><input class="ipt"  @input="validateIntegerInput"   type="number" v-model="form.supplierDilemmaAmount"/>元</div>
          </div>
          <div class="flex-between" v-show="basementFeeState">
            <div><span v-show="isBasementSettle && !isUnsuccessfulSettle" style="color: red;">*</span>地库费:</div>
            <div class="halfOpcity inputContent"><input @input="validateIntegerInput"  class="ipt"  type="number" v-model="form.supplierBasementFee" :disabled="!isBasementSettle || isUnsuccessfulSettle" />元</div>
          </div>
          <div class="flex-between">
            <div>收取客户金额:</div>
            <div class="halfOpcity inputContent"><input type="number" class="ipt"  v-model="form.supplierCustomerAmount"/>元</div>
          </div>
          <div class="flex-between bgDisable" :class=" { 'flex-between': true, 'bgDisable' : basePriceDisabled } ">
            <div><span v-show="!basePriceDisabled && !isBasementSettle" style="color: red;">*</span>基本费用:</div>
            <div class="halfOpcity inputContent "><input class="disable" type="number" :readonly="basePriceDisabled || isBasementSettle"
                                                         v-model="form.supplierBasePrice"/><span>元</span></div>
          </div>
          <div class="flex-between bgDisable">
            <div>额外费用总计:</div>
            <div class="halfOpcity inputContent "><input class="disable" type="number" :readonly="true"
                                                         v-model="form.supplierExtraPrice"/><span>元</span></div>
          </div>
          <div class="flex-between bgDisable ">
            <div>费用总计:</div>
            <div class="halfOpcity inputContent "><input class="disable" type="number" :readonly="true"
                                                         v-model="form.supplierSettleAmount"/><span>元</span></div>
          </div>
          <div class="flex-between">
            <div> &nbsp;</div>
            <div class="btnComputed" @click="compute">计算</div>
          </div>
          <div>备注说明:</div>
        </div>
      </div>
      <textarea v-model="form.supplierRemark" class="multipleTxt" placeholder="报备描述"></textarea>
      <!--    <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="save" />-->
      <div class="btn">
        <button class="cancel" @click="noMultipleClicks(cancelBtn )">取消</button>
        <button v-if="orderInfo.checkCount < 3" :class="{'submit' : true,'loading' : loading}"
                @click="noMultipleClicks(save)">提交
        </button>
      </div>

    </div>
    <div class="dataType" v-show="auditFormShow">
      <table>
        <tr>
          <td class="col1 checkData">审核数据</td>
          <td class="col2 supplierShuju">供应商数据</td>
        </tr>
        <tr v-show="abState">
          <td class="col1">到事发地距离:{{ orderInfo.settleMileageAb + '公里' }}</td>
          <td class="col2 halfOpc"><input  @input="validateIntegerInput"   placeholder="输入到事发地距离" v-model="form.supplierSettleMileageAb"/></td>
        </tr>
        <tr v-show="bcState">
          <td class="col1">拖车里程:{{ orderInfo.settleMileageBc + '公里' }}</td>
          <td class="col2 halfOpc"><input  @input="validateIntegerInput"   placeholder="输入拖车公里" v-model="form.supplierSettleMileageBc"/></td>
        </tr>
        <tr v-show="caState">
          <td class="col1">返程里程:{{ orderInfo.settleMileageCa + '公里' }}</td>
          <td class="col2 halfOpc"><input  @input="validateIntegerInput"   placeholder="输入返程里程" v-model="form.supplierSettleMileageCa"/></td>
        </tr>
        <tr v-show="bridgeAbState">
          <td class="col1">ab路桥费:{{ orderInfo.bridgeAmountAb + '元' }}</td>
          <td class="col2 halfOpc"><input  @input="validateIntegerInput"   placeholder="输入ab路桥费" v-model="form.supplierBridgeAmountAb"/></td>
        </tr>
        <tr v-show="bridgeBcState">
          <td class="col1">bc路桥费:{{ orderInfo.bridgeAmountBc + '元' }}</td>
          <td class="col2 halfOpc"><input     @input="validateIntegerInput"   placeholder="输入bc路桥费" v-model="form.supplierBridgeAmountBc"/></td>
        </tr>
        <tr v-show="bridgeCaState">
          <td class="col1">ca路桥费:{{ orderInfo.bridgeAmountCa + '元' }}</td>
          <td class="col2 halfOpc"><input  @input="validateIntegerInput"   placeholder="输入ca路桥费" v-model="form.supplierBridgeAmountCa"/></td>
        </tr>
        <tr v-show="tyreAmountState">
          <td class="col1">小轮费:{{ orderInfo.bridgeAmount + '元' }}</td>
          <td class="col2 halfOpc"><input  @input="validateIntegerInput"   placeholder="输入小轮费" v-model="form.supplierTyreAmount"/></td>
        </tr>
        <tr v-show="dilemmaAmountState && basePriceDisabled">
          <td class="col1">困境费:{{ orderInfo.dilemmaAmount + '元' }}</td>
          <td class="col2 halfOpc"><input  @input="validateIntegerInput"   placeholder="输入困境费" v-model="form.supplierDilemmaAmount"/></td>
        </tr>
        <tr v-show="waitAmountState">
          <td class="col1">等候费:{{ orderInfo.waitAmount + '元' }}</td>
          <td class="col2 halfOpc"><input  @input="validateIntegerInput"   placeholder="输入等候费" v-model="form.supplierWaitAmount"/></td>
        </tr>
        <tr v-show="basementFeeState">
          <td class="col1">地库费:{{ orderInfo.basementFee + '元' }}</td>
          <td class="col2 halfOpc"><input  @input="validateIntegerInput"   placeholder="输入地库费" v-model="form.supplierBasementFee"/></td>
        </tr>
        <tr>
          <td class="col1">基本费用:{{ orderInfo.basePrice + '元' }}</td>
          <td class="col2 halfOpc" :style="{ opacity: basePriceDisabled ? '1' : '0.5' }"><input
              :class="basePriceDisabled ? 'supplierdisable' : ''" :readonly="basePriceDisabled"
              v-model="form.supplierBasePrice"/></td>
        </tr>
        <tr>
          <td class="col1">额外费用总计:{{ orderInfo.extraPrice + '元' }}</td>
          <td class="col2 halfOpc" style="opacity: 1;"><input class="supplierdisable" :readonly="true"
                                                              v-model="form.supplierExtraPrice"/></td>
        </tr>
        <tr>
          <td class="col1">收取客户:{{ orderInfo.customerAmount + '元' }}</td>
          <td class="col2 halfOpc"><input placeholder="收取客户金额" v-model="form.supplierCustomerAmount"/></td>
        </tr>
        <tr>
          <td class="col1">费用总计:{{ orderInfo.settleAmount + '元' }}</td>
          <td class="col2" style="width: 100%;display: flex;justify-content: center;box-sizing: border-box">
            <input class="supplierdisable" :readonly="true" v-model="form.supplierSettleAmount"/>
            <button class="btnCom" @click="compute">计算</button>
          </td>
        </tr>
        <tr>
          <td class="col1 alignLeft" style="border-bottom-left-radius: 3px">
            <div class="title col1" style="white-space: nowrap;">审核失败原因</div>
            <div class="reason">{{ orderInfo.auditRemark }}</div>
            <div v-show="orderInfo.auditPhoto" style="display: flex;flex-wrap: wrap">
              <van-image class="camerImg" v-for="(item,index) in auditPhotoList" :key="index" :src="item.url"
                         @click="previewPhoto(index)"/>
            </div>
          </td>
          <td class="col2 alignLeft" style="border-bottom-right-radius: 3px">
            <div class="title" style="margin-bottom: 8px"> 备注:{{ orderInfo.supplierRemark }}</div>
            <div class="title" style="margin-bottom: 8px"> 本次补充说明:</div>
            <div style="display: flex;margin-bottom: 5px">
              <!--          @click="delSupplierPhoto(item)  -->
              <img v-for="(item,index) in supplierPhotoList" :key="index" class="supplierImg" :src="item.url"
                   @click="viewHandle(item)">
            </div>
            <div style="display: flex">
              <van-uploader
                  v-model="files"
                  :after-read="handleFileRead"
                  multiple
                  :preview-size="54"
                  accept="image "
              />
            </div>
          </td>
        </tr>
      </table>
    </div>
    <van-dialog v-model="show" title="确定删除此照片吗" show-cancel-button @confirm="handleConfirm"></van-dialog>
    <div class="btn" v-show="auditFormShow">
      <button v-if="orderInfo.checkCount < 3" :class="{'submit' : true,'loading' : loading}"
              @click="noMultipleClicks(save)">提交
      </button>
      <button v-if="accountStatus == 2 || accountStatus == 3" :class="{'submit' : true,'loading1' : loading1}"
              @click="noMultipleClicks(confirmAudit)">确定审核
      </button>
    </div>
  </div>
</template>

<script>
import {myMixins} from '@/utils/myMixins'
import {leftCopy} from '@/utils/common'
import {
  getAccountRecordDetail, accountRecordCompute,
  updateAccountRecordInfo,
  selectRecordPictureList, deleteImage
} from "@/api/mine"
import {ImagePreview} from "vant";
import {orderReportingList} from "@/api/order";

export default {
  name: "accountingView",
  mixins: [myMixins],
  data() {
    return {
      files: [],
      formData: '',
      id: '',
      postfix: '',
      orderInfo: {},
      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: '',
      fixedPrice: '',
      fixedPriceType: '',
      supplierId: '',
      basePrice: '0.0',
      auditBasePrice: '0',
      auditExtraPrice: '0',
      extraPrice: '0',
      auditFormShow: false,
      auditPhotoList: [],
      supplierPhotoList: [],
      index: '',//记录工单对账属于哪个状态
      queryTime: '',//记录工单对账选择的时间
      uploadedImage: null,
      show: false,//是否显示弹框
      imgId: '',//删除供应商图片的Id
      form: {
        id: '',
        taskOrderCostHisId: '',
        userOrderId: '',
        supplierId: '',
        cutInsuranceAmount: '',
        policyState: '',
        taskFlowId: '',
        contractSettleId: '',
        supplierSettleMileageAb: '',
        supplierSettleMileageBc: '',
        supplierSettleMileageCa: '',
        startPrice: '',
        containMileage: '',
        unitPrice: '',
        supplierOtherAmount: '',
        supplierCustomerAmount: '',
        supplierCustomerAmountRemark: '',
        supplierBridgeAmountAb: '',
        supplierBridgeAmountBc: '',
        supplierBridgeAmountCa: '',
        supplierBridgeAmount: '',
        supplierDilemmaAmount: '',
        supplierTyreAmount: '',
        supplierWaitAmount: '',
        supplierBasementFee: '',
        supplierBasePrice: '',
        supplierExtraPrice: '',
        supplierSettleAmount: '',
        supplierOtherAmountRemark: '',
        policyAmount: '',
        dilemmaAmount: '',
        tyreAmount: '',
        waitAmount: '',
        bridgeAmountAb: '',
        bridgeAmountBc: '',
        bridgeAmountCa: '',
        supplierRemark: '',
        settleMileageAb: '',
        settleMileageBc: '',
        settleMileageCa: '',
        settleAmount: '',
        otherAmount: '',
        otherAmountRemark: '',
        customerAmount: '',
        customerAmountRemark: '',
        auditRemark: '',
        createTime: '',
        updateTime: '',
        batchCode: '',
        checkCount: '',
        auditUser: '',
        auditTime: '',
        basePrice: '',
        bridgeAmount: '',
        extraPrice: '',
        basementFee: '',
        financePrice: '',
        firstAuditSuccessRemark: '',
        createUser: '',
        updateUser: '',
        autoRollback: '',
        isExceptionAuditConfirm: '',
        isExceptionAuditConfirmRemark: '',
        financeRefuseAuditRemark: '',
        exceptionApprovalStatus: '',
        exceptionApprovalRemark: '',
        auditSuccessRemark: '',
        accountStatus: '',
        carClothingToolAmount: '',
        replaceBatteryAmount: '',
        supplierSettleRatio:{},
        contractSettleTypeString:'',
        tyreNumber:'',
        taskStatus:{},
      },
      noClick: true,
      loading: false,
      loading1: false,
      settleDetail: [],
    }
  },
  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
    this.$nextTick(async () => {
      await this.getDetail()
      await this.getSettlementDetail()
    })
  },
  computed: {
    basePriceDisabled() {
      // return false
      return !(this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'
          || (this.fixedPrice && parseFloat(this.fixedPrice) > 0 && this.fixedPriceType) || this.supplierId == 500921)
    },
    isBasementSettle(){
      return (this.form?.supplierSettleRatio?.code == 5)
    },
    //保险实拖案件，剔除人保和太平事故
    isCPICDrag() {
      return this.settleType == '实拖' && this.orderInfo?.contractType == 1 && !['PICC10101', 'PICCSHANGQI', 'PICC101099', 'SAIPCC2021', ''].includes(this.appCode) && !(this.appCode.indexOf("TAIPING") != -1 && this.orderInfo?.malfunctionReason == 2)
    },
    isBasement() {
      return this.serviceType == '困境救援' ||this.serviceType == '困境拖车'|| this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'||this.serviceType =='困境救援（非事故）'||this.serviceType =='困境-吊车（非事故）'
 },
    //取消案件和结算比例为按服务不成功结算的案件都不能在后台记账模块填写路桥费、小轮费和地库费；
    isUnsuccessfulSettle(){
      return (this.form?.supplierSettleRatio && this.form?.supplierSettleRatio?.code==3 )|| this.form?.taskStatus?.code==19002
    },
  },
  methods: {
    validateIntegerInput(event) {
      const regex = /^\d*$/;
      if (!regex.test(event.target.value)) {
        event.target.value = event.target.value.replace(/[^\d]/g, '');
      }
    },
    viewSettlementDoc() {//查看结算单
      this.$router.push({
        name: "settlementDetail",
        params: {
          id: this.id,                  // 参数对象的属性
          postfix: this.postfix,
          index: this.activeIndex,
          queryTime: this.time || this.queryTime,
          settleDetailList: this.settleDetail
        }
      })
    },
    checkPhoto() {
      let isAllowImage = 1
      let data = {
        "action": "orderPhoto",
        "params": {
          "userOrderId": String(this.orderInfo.userOrderId),
          "orderCode": this.orderInfo.orderCode,
          "taskOrderId": String(this.orderInfo.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.orderInfo.userOrderId + "," + this.orderInfo.orderCode + "," + this.orderInfo.taskOrderId + "," + isAllowImage);
      }
    },
    previewPhoto(index) {
      let url = []
      this.auditPhotoList.forEach((item) => {
        url.push(item.url)
      })
      ImagePreview({
        images: url,
        startPosition: index,
        closeable: true,
      });

    },
    async getSettlementDetail() {
      let res = await orderReportingList({
        queryType: 7,
        userOrderId: this.orderInfo.userOrderId,
        orderCode: this.orderInfo.orderCode,
        taskOrderId: this.orderInfo.taskOrderId,
        searchCostRemark: 1
      })
      this.settleDetail = res.data
      console.log("工单列表接口res", this.settleDetail)
    },
    handleFileRead(file) {
      console.log("file", file)
    },
    viewHandle(i) {
      console.log("ii", i)
    },
    goback() {
      this.$router.push({
        name: "workOrderReconciliation",
        params: {
          activeIndex: this.index,
          queryTime: this.queryTime,
        }
      })
    },
    async compute() {
      if(this.orderInfo.contractSettleTypeString == '车主现收'){
        this.form.supplierBasePrice = 0
        this.form.supplierExtraPrice = 0
        this.form.supplierSettleAmount = 0
      }else {
        if (this.form.supplierOtherAmount > 0) {
          if (this.form.supplierOtherAmountRemark == '') {
            this.$toast('请填写其他费用说明');
            return;
          }
        }
        if (!this.basePriceDisabled && !this.isBasementSettle) {
          //困境的案件，或者一口价案件，基本费用可以输入
          let dilemmaBasePrice = parseFloat(this.form.supplierBasePrice) || 0
          this.form.supplierBasePrice = dilemmaBasePrice
          this.form.supplierExtraPrice = 0
          this.form.supplierSettleAmount = dilemmaBasePrice - (parseFloat(this.form.supplierCustomerAmount) || 0)
        } else {
          let data = await accountRecordCompute({
            ...this.form,
            settleType: this.orderInfo.settleType?.code,
            taskOrderCostHisId:this.orderInfo.taskOrderCostHisId,
            orderCode: this.orderInfo.orderCode,
          });
          this.form.supplierBasePrice = data.data.basePrice
          this.form.supplierExtraPrice = data.data.extraPrice
          this.form.supplierSettleAmount = data.data.totalPrice
          if (data.data?.supplierTyreAmount){
            this.form.supplierTyreAmount=data.data.supplierTyreAmount
          }
        }
        // }
        /*if(this.form.cutInsuranceAmount == 1 && this.form.policyState === 0){
          this.form.supplierSettleAmount = parseFloat(parseFloat(this.form.supplierSettleAmount) - parseFloat(this.form.policyAmount || 0)).toFixed(2)
        }*/
      }
      if (this.form.policyAmount && this.form.policyAmount > 0) {
        this.form.supplierSettleAmount = parseFloat(parseFloat(this.form.supplierSettleAmount) - parseFloat(this.form.policyAmount || 0)).toFixed(2)
      }
      if (this.form.carClothingToolAmount) {
        this.form.supplierSettleAmount = parseFloat(parseFloat(this.form.supplierSettleAmount) + parseFloat(this.form.carClothingToolAmount || 0)).toFixed(2)
      }
      if (this.form.replaceBatteryAmount) {
        this.form.supplierSettleAmount = parseFloat(parseFloat(this.form.supplierSettleAmount) - parseFloat(this.form.replaceBatteryAmount || 0)).toFixed(2)
      }
    },
    async pictureList() {
      let res = await selectRecordPictureList({
        userOrderId:this.orderInfo.userOrderId,
        taskOrderCostRecordId: this.id,
        state: 0,
        postfix: this.postfix
      })
      if (res.code === 200) {
        this.supplierPhotoList = res.data
      }
    },
    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 = ''
      this.basePrice = '0.0'
      this.extraPrice = '0'
      this.totalPrice = '0.0'
      let res = await getAccountRecordDetail({
        id: this.id,
        postfix: this.postfix
      })
      if (res.code === 200) {
        this.orderInfo = res.data
        console.log("this.orderInfo", this.orderInfo)
        this.accountStatus = this.orderInfo.accountStatus?.code

        this.serviceType = this.orderInfo.serviceName
        this.taskFlowId = this.orderInfo.taskFlowId
        this.settleType = this.orderInfo.settleType?.label
        this.appCode = this.orderInfo.appCode
        this.fixedPrice = this.orderInfo.fixedPrice
        this.fixedPriceType = this.orderInfo.fixedPriceType
        this.supplierId = this.orderInfo.supplierId
        this.auditPhotoList = this.orderInfo.auditPhoto
      }
      await this.pictureList()
      if (this.accountStatus == 1 || this.accountStatus == 0) {//没有记录，等待审核
        leftCopy(this.form, {...res.data})
      }
      if (this.accountStatus == 2 || this.accountStatus == 3) {//审核失败，再次审核
        leftCopy(this.form, {...res.data})
        this.auditFormShow = true;//是否显示审核数据
      }
      console.log("this.form",this.form)
      if (this.settleType == '实拖' && this.basePriceDisabled && !this.isBasementSettle) {
        this.bcState = true
        this.form.supplierSettleMileageAb = 0
        this.form.supplierSettleMileageCa = 0
      } else if (this.settleType == '单程' && this.basePriceDisabled && !this.isBasementSettle) {
        this.abState = true
        this.bcState = true
        this.form.supplierSettleMileageCa = 0
        if (this.taskFlowId == '1' && this.basePriceDisabled) {
          this.bcState = false
          this.form.supplierSettleMileageBc = 0
        }
      } else if (this.settleType == '全程' && this.basePriceDisabled && !this.isBasementSettle) {
        this.abState = true
        this.bcState = true
        this.caState = true
      } else if (this.settleType == '全程减半' && this.basePriceDisabled && !this.isBasementSettle) {
        this.abState = true
        this.bcState = true
        this.caState = true
      }
      if (this.form.supplierSettleRatio && this.form.supplierSettleRatio?.code == 5){
        this.basementFeeState = true
        this.form.supplierSettleMileageAb = 0
        this.form.supplierSettleMileageBc = 0
        this.form.supplierSettleMileageCa = 0
        this.form.supplierBridgeAmountAb = 0
        this.form.supplierBridgeAmountBc = 0
        this.form.supplierBridgeAmountCa = 0
        this.form.supplierBridgeAmount = 0
        this.form.supplierDilemmaAmount = 0
        this.form.supplierOtherAmount = 0
        this.form.supplierTyreAmount = 0
        this.form.supplierWaitAmount = 0
      }else {
        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
        this.form.supplierBasementFee = this.orderInfo.refBasementFee
      }
      if (this.form.supplierSettleRatio?.code != 5 && (this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障')){
        // await this.$alert("该案件为困境案件，需确认填写基本费用")
        await  this.$toast("该案件为困境案件，需确认填写基本费用")
        return
      }
    },
    cancelBtn() {
      this.goback()
    },
    async save() {
      const isBlank = (v) => v === '' || v === null || v === undefined || parseFloat(v) <= 0
      if (this.abState && isBlank(this.form.supplierSettleMileageAb)) {
        this.$toast('请填写到事发地距离'); return;
      }
      if (this.bcState && isBlank(this.form.supplierSettleMileageBc)) {
        this.$toast('请填写拖车里程'); return;
      }
      if (this.caState && isBlank(this.form.supplierSettleMileageCa)) {
        this.$toast('请填写返程里程'); return;
      }
      if (this.bridgeAbState && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBridgeAmountAb)) {
        this.$toast('请填写ab路桥费'); return;
      }
      if (this.bridgeBcState && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBridgeAmountBc)) {
        this.$toast('请填写bc路桥费'); return;
      }
      if (this.bridgeCaState && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBridgeAmountCa)) {
        this.$toast('请填写ca路桥费'); return;
      }
      if (this.waitAmountState && isBlank(this.form.supplierWaitAmount)) {
        this.$toast('请填写等候费'); return;
      }
      if (this.tyreAmountState && !this.isUnsuccessfulSettle && isBlank(this.form.tyreNumber)) {
        this.$toast('请填写小轮个数'); return;
      }
      if (this.dilemmaAmountState && this.basePriceDisabled && isBlank(this.form.supplierDilemmaAmount)) {
        this.$toast('请填写困境费'); return;
      }
      if (this.basementFeeState && this.isBasementSettle && !this.isUnsuccessfulSettle && isBlank(this.form.supplierBasementFee)) {
        this.$toast('请填写地库费'); return;
      }
      if (!this.basePriceDisabled && !this.isBasementSettle && isBlank(this.form.supplierBasePrice)) {
        this.$toast('请填写基本费用'); return;
      }
      if (
        this.orderInfo.customerDistanceLimit &&
        parseFloat(this.form.supplierSettleMileageBc) > parseFloat(this.orderInfo.customerDistanceLimit)
      ) {
        console.log(11111111)
        if (!this.form.supplierCustomerAmount || parseFloat(this.form.supplierCustomerAmount) == 0) {
          this.$toast('拖车里程超出免拖范围，请填写收取客户金额');
          return;
        }
      }
      if (this.form.supplierOtherAmount > 0) {
        if (this.form.supplierOtherAmountRemark == '') {
          this.$toast('请填写其他费用说明');
          return;
        }
      }
      if (this.isBasement && ((this.form.supplierSettleRatio && this.form?.supplierSettleRatio?.code==3)|| this.form?.taskStatus?.code==19002) && !(this.basePriceDisabled || this.isBasementSettle) && (this.form.supplierBasePrice>this.form.startPrice)){
        this.$toast('取消或服务不成功结算的困境案件,基本费用的填写不能超过起步价');
        return;
      }
      if (this.accountStatus >= 4) {
        this.$toast('已进入后续流程，不允许操作');
        return;
      }
      this.loading = true;
      let accountStatus = 0
      if (this.accountStatus == 0) accountStatus = 1
      if (this.accountStatus == 1) accountStatus = 1
      if (this.accountStatus == 2) accountStatus = 3
      if (this.accountStatus == 3) accountStatus = 3
      this.form.accountStatus = accountStatus;
      this.form.supplierSettleMileageAb = parseInt(this.form.supplierSettleMileageAb) || 0
      this.form.supplierSettleMileageBc = parseInt(this.form.supplierSettleMileageBc) || 0
      this.form.supplierSettleMileageCa = parseInt(this.form.supplierSettleMileageCa) || 0
      this.form.supplierBridgeAmountAb = parseInt(this.form.supplierBridgeAmountAb) || 0
      this.form.supplierBridgeAmountBc = parseInt(this.form.supplierBridgeAmountBc) || 0
      this.form.supplierBridgeAmountCa = parseInt(this.form.supplierBridgeAmountCa) || 0
      this.form.supplierBridgeAmount = parseInt(this.form.supplierBridgeAmountAb) + parseInt(this.form.supplierBridgeAmountBc) + parseInt(this.form.supplierBridgeAmountCa)
      this.form.supplierCustomerAmount = parseFloat(this.form.supplierCustomerAmount) || 0
      this.form.supplierDilemmaAmount = parseInt(this.form.supplierDilemmaAmount) || 0
      this.form.supplierOtherAmount = parseInt(this.form.supplierOtherAmount) || 0
      this.form.supplierTyreAmount = parseInt(this.form.supplierTyreAmount) || 0
      this.form.supplierWaitAmount = parseInt(this.form.supplierWaitAmount) || 0
      this.form.supplierBasementFee = parseInt(this.form.supplierBasementFee) || 0
      await this.compute();
      const formData = new FormData();
      let obj = this.form;
      console.log('obj',obj)
      Object.keys(obj).forEach((key) => {
        formData.append(key, obj[key]);
      });
      this.files.forEach((file) => {
        formData.append('file', file.file);
      });
      formData.append('userOrderId', this.orderInfo.userOrderId);
      formData.append('state', 0);
      formData.append('postfix', this.postfix);
      formData.append('supplierBridgeAmount', parseInt(this.form.supplierBridgeAmountAb || 0) + parseInt(this.form.supplierBridgeAmountBc || 0) + parseInt(this.form.supplierBridgeAmountCa || 0));
      let res = await updateAccountRecordInfo(formData);
      if (res.code === 200) {
        this.$toast('操作成功')
        setTimeout(() => {
          // this.$router.back()
          this.$router.push({
            name: "workOrderReconciliation",
            params: {
              activeIndex: this.index,
              queryTime: this.queryTime,
            }
          })
        }, 2000)
      }
      this.loading = false;
    },
    async confirmAudit() {
      if (this.accountStatus >= 4) {
        this.$toast('已进入后续流程，不允许操作');
        return;
      }
      const isBlank = (v) => v === '' || v === null || v === undefined || parseFloat(v) <= 0
      if (this.abState && isBlank(this.form.settleMileageAb)) {
        this.$toast('请填写到事发地距离'); return;
      }
      if (this.bcState && isBlank(this.form.settleMileageBc)) {
        this.$toast('请填写拖车里程'); return;
      }
      if (this.caState && isBlank(this.form.settleMileageCa)) {
        this.$toast('请填写返程里程'); return;
      }
      if (this.bridgeAbState && !this.isUnsuccessfulSettle && isBlank(this.form.bridgeAmountAb)) {
        this.$toast('请填写ab路桥费'); return;
      }
      if (this.bridgeBcState && !this.isUnsuccessfulSettle && isBlank(this.form.bridgeAmountBc)) {
        this.$toast('请填写bc路桥费'); return;
      }
      if (this.bridgeCaState && !this.isUnsuccessfulSettle && isBlank(this.form.bridgeAmountCa)) {
        this.$toast('请填写ca路桥费'); return;
      }
      if (this.waitAmountState && isBlank(this.form.waitAmount)) {
        this.$toast('请填写等候费'); return;
      }
      if (this.tyreAmountState && !this.isUnsuccessfulSettle && isBlank(this.form.tyreNumber)) {
        this.$toast('请填写小轮个数'); return;
      }
      if (this.dilemmaAmountState && this.basePriceDisabled && isBlank(this.form.dilemmaAmount)) {
        this.$toast('请填写困境费'); return;
      }
      if (this.basementFeeState && this.isBasementSettle && !this.isUnsuccessfulSettle && isBlank(this.form.basementFee)) {
        this.$toast('请填写地库费'); return;
      }
      if (!this.basePriceDisabled && !this.isBasementSettle && isBlank(this.form.basePrice)) {
        this.$toast('请填写基本费用'); return;
      }
      if (
        this.orderInfo.customerDistanceLimit &&
        parseFloat(this.form.settleMileageBc) > parseFloat(this.orderInfo.customerDistanceLimit)
      ) {
        if (!this.form.customerAmount || parseFloat(this.form.customerAmount) == 0) {
          this.$toast('拖车里程超出免拖范围，请填写收取客户金额');
          return;
        }
      }
      this.loading1 = true;
      this.form.supplierExtraPrice = this.form.extraPrice || 0
      this.form.supplierBasePrice = this.form.basePrice || 0
      this.form.supplierBridgeAmountAb = this.form.bridgeAmountAb || 0
      this.form.supplierBridgeAmountBc = this.form.bridgeAmountBc || 0
      this.form.supplierBridgeAmountCa = this.form.bridgeAmountCa || 0
      this.form.supplierBridgeAmount = this.form.supplierBridgeAmountAb + this.form.supplierBridgeAmountBc + this.form.supplierBridgeAmountCa
      this.form.supplierCustomerAmount = this.form.customerAmount || 0
      this.form.supplierDilemmaAmount = this.form.dilemmaAmount || 0
      this.form.supplierOtherAmount = this.form.otherAmount || 0
      this.form.supplierSettleAmount = this.form.settleAmount || 0
      this.form.supplierTyreAmount = this.form.tyreAmount || 0
      this.form.supplierSettleMileageAb = this.form.settleMileageAb || 0
      this.form.supplierSettleMileageBc = this.form.settleMileageBc || 0
      this.form.supplierSettleMileageCa = this.form.settleMileageCa || 0
      this.form.supplierWaitAmount = this.form.waitAmount || 0
      this.form.supplierBasementFee = this.form.basementFee || 0
      let accountStatus = 11
      if (this.form.financePrice >= this.form.settleAmount) {//服务商确认中道价格，且等于财务金额，则直接到审核完成
        accountStatus = 4
      }
      this.form.accountStatus = accountStatus;
      const formData = new FormData();
      let obj = this.form;
      Object.keys(obj).forEach((key) => {
        formData.append(key, obj[key]);
      });
      this.files.forEach((file) => {
        formData.append('file', file.file);
      });
      // formData.append('accountStatus', accountStatus);
      formData.append('userOrderId', this.orderInfo.userOrderId);
      formData.append('state', 0);
      formData.append('postfix', this.postfix);
      formData.append('supplierBridgeAmount', parseInt(this.form.supplierBridgeAmountAb || 0) + parseInt(this.form.supplierBridgeAmountBc || 0) + parseInt(this.form.supplierBridgeAmountCa || 0));
      let res = await updateAccountRecordInfo(formData);
      if (res.code === 200) {
        this.$toast('操作成功')
        setTimeout(() => {
          // this.$router.back()
          this.$router.push({
            name: "workOrderReconciliation",
            params: {
              activeIndex: this.index,
              queryTime: this.queryTime
            }
          })
        }, 2000)
      }
      this.loading1 = false;
    },


    async delSupplierPhoto(item) {
      this.show = true
      this.imgId = item.id
    },
    async handleConfirm() {//删除供应商图片
      await deleteImage({
        recordPictureId: this.imgId,
        postfix: this.postfix
      })
      await this.pictureList()
    },
  },
  components: {
    // TwoCommonBtn
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";

.loading, .loading1 {
  position: relative;
}

.loading::after, .loading1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.btn {
  @include flexColBet;

  button {
    @include whLin(152px, 39px);
    border-radius: 5px;
    color: #FFFFFF;
    @include fontWeightSize(bold, 14px)
  }

  .cancel {
    background: #9EA7C0;
  }

  .submit {
    background-color: #354D93;
  }
}

.wrap {
  @include wh(100%, 100%);
  background-color: #F4F5F7;
  overflow-y: auto;
}

.disable {
  background-color: transparent;
  border: none;
  opacity: 1 !important;
}

.supplierdisable {
  color: #999999;;
  border: none;
  opacity: 1 !important;
}

.bgDisable {
  background: rgba(204, 204, 204, .3);
}

.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;
  }

  .leftTitle {
    opacity: .5;
    width: 60px;
  }

  .rightContent {
    /*height: 189px;*/
    width: calc(100% - 60px);
  }

  .fontColor {
    @include fontWeightSize(400, 12px);
    color: #000000;
    line-height: 24px;
  }

  .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;
  }
}

img {
  @include wh(35px, 15px);
  margin-left: 21px;
}

.common {
  background-color: #FFFFFF;
  padding: 11px 24px 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.baseInfo {
  width: 100%;

}

.supplierData {
  width: 100%;
  margin-bottom: 0;

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

    input {
      border: none;
      text-align: right;
      padding-right: 3px;
      margin-right: 0;
    }

    .titleContent {
      @include fontWeightSize(bold, 13px);
    }

    .flex-between {
      width: 100%;
      @include flexBetCen
    }

    .halfOpcity {
      opacity: .5;
      .ipt{
        border: 1px solid #cccccc !important;
      }
    }

    .inputContent {
      text-align: right;
      flex: 1;
    }
  }

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

  .multipleTxt {
    @include wh(100%, 87px);
    background: #FAFAFA;
    @include sizingPadRadius(8px, 8px, 3px);
    border: 1px solid #E6E6E6;
    backdrop-filter: blur(10px);
  }

  .btn {
    margin-top: 28px;
  }
}

.dataType {
  padding: 0 8px;

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
  }

  .alignLeft {
    text-align: left !important;
    opacity: 1 !important;

    .reason {
      @include fontWeightSize(400, 11px);
      @include colorOpa(#FF8F37, 1);
      //color: #FF8F37;
      //opacity: 1 !important;
    }

    .camerImg {
      @include widHeiMar(54px, 42px, 5px);
      margin-top: 15px;
    }

    .supplierImg {
      @include widHeiMar(54px, 42px, 8px);
      margin-top: 0;
      margin-left: 0;
    }

    .title {
      @include fontWeightSize(400, 11px);
      opacity: .5;
    }
  }

  .col1 {
    width: 41%;
    background-color: #E9E9EA;
    @include fontWeightSize(400, 12px);
    opacity: 0.55;
  }

  .col2 {
    width: 58%;
    background-color: #EAEFF6;
    @include fontWeightSize(400, 12px);
    color: #0434D0;

    input {
      width: 72px;
      border: none;
      background-color: #EAEFF6;
      text-align: center;
    }

    input::placeholder {
      color: #0434D0; /* 设置提示内容文字颜色 */
    }

  }

  .btnCom {
    border: none;
    padding: 4px 7px;
    @include flexTwoCenter;
    //display: flex;
    //justify-content: center;
    //align-items: center;
    background: #354D93;
    border-radius: 3px;
    color: #FFFFFF;
    @include fontWeightSize(bold, 12px)
  }

  .checkData, .supplierShuju {
    color: #323643;
  }

  .checkData {
    border-top-left-radius: 3px;
    opacity: 0.66;
  }

  .supplierShuju {
    border-top-right-radius: 3px;
  }

  .halfOpc {
    opacity: .5;
  }
}

.twoBtn {
  margin-top: 28px;
  margin-bottom: 30px;
  @include flexColBet;
  @include sizingPadding(0, 15px);

  button {
    @include whLin(152px, 39px);
    @include fontWeightSize(bold, 14px);
    @include bgFontColor(#FFFFFF, #354D93);
    border-radius: 5px;
  }
}

.btn {
  margin-top: 31px;
  margin-bottom: 31px;
  @include flexColAround;
  box-sizing: border-box;

  button {
    line-height: 39px;
    border-radius: 5px;
    @include wh(105px, 39px);
    @include bgFontColor(#FFFFFF, #9EA7C0);
    @include fontWeightSize(bold, 14px);
    border: none;
  }

  .submit {
    background: #354D93;
  }
}
</style>
