<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>
      <div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
        <span>{{orderInfo.taskSettleType?.label}}</span>
<!--        <span>包含公里数:15</span>-->
<!--        <span>超出单价:6</span>-->
         </div>
    </div>
    <div class="item">
      <span class="titleLeft">扣除责任险费：</span>
      <span class="content">{{orderInfo.policyAmount}} {{orderInfo.cutInsuranceAmount}}</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>  到事发地距离:</div>
          <div  class="halfOpcity"><input type="number" v-model="form.supplierSettleMileageAb"/>公里</div>
        </div>
        <div  class="flex-between" v-show="bcState" >
            <div>   拖车里程:</div>
            <div class="halfOpcity"><input type="number" v-model="form.supplierSettleMileageBc"/>公里</div>
         </div>
        <div  class="flex-between"  v-show="caState" >
          <div>返程里程:</div>
          <div class="halfOpcity"><input type="number" v-model="form.supplierSettleMileageCa"/>公里</div>
        </div>
        <div  class="flex-between" v-show="bridgeAbState">
            <div>ab路桥费:</div>
             <div  class="halfOpcity"><input type="number" v-model="form.supplierBridgeAmountAb"/>元</div>
        </div>
        <div  class="flex-between"  v-show="bridgeBcState">
            <div>bc路桥费:</div>
            <div class="halfOpcity"><input type="number"  v-model="form.supplierBridgeAmountBc"/>元</div>
        </div>
        <div  class="flex-between" v-show="bridgeCaState">
            <div>ca路桥费:</div>
            <div  class="halfOpcity"><input type="number" v-model="form.supplierBridgeAmountCa"/>元</div>
        </div>
        <div  class="flex-between" v-show="waitAmountState">
          <div>等候费:</div>
          <div class="halfOpcity inputContent"><input type="number" v-model="form.supplierWaitAmount"/>元</div>
        </div>
        <div  class="flex-between" v-show="tyreAmountState">
          <div>小轮费:</div>
          <div class="halfOpcity inputContent"><input type="number" v-model="form.supplierTyreAmount"/>元</div>
        </div>
        <div  class="flex-between" v-show="dilemmaAmountState && basePriceDisabled">
          <div>困境费:</div>
          <div class="halfOpcity inputContent"><input type="number" v-model="form.supplierDilemmaAmount"/>元</div>
        </div>
        <div  class="flex-between" v-show="basementFeeState">
          <div>地库费:</div>
          <div class="halfOpcity inputContent"><input type="number" v-model="form.supplierBasementFee"/>元</div>
        </div>
        <div  class="flex-between">
            <div>收取客户金额:</div>
            <div class="halfOpcity inputContent"><input type="number" v-model="form.supplierCustomerAmount"/>元</div>
        </div>
        <div  class="flex-between" >
          <div>基本费用:</div>
          <div class="halfOpcity inputContent"  ><input  type="number" :disabled="basePriceDisabled" v-model="form.supplierBasePrice"/>元</div>
        </div>
        <div  class="flex-between" >
          <div>额外费用总计:</div>
          <div class="halfOpcity inputContent" ><input type="number"  :disabled="true" v-model="form.supplierExtraPrice"/>元</div>
        </div>
        <div  class="flex-between">
            <div>费用总计: </div>
          <div class="halfOpcity inputContent" ><input type="number" :disabled="true" v-model="form.supplierSettleAmount"/>元</div>
        </div>
        <div  class="flex-between">
          <div> </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>
  <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 placeholder="输入到事发地距离"  v-model="form.supplierSettleMileageAb"/></td>
      </tr>
      <tr v-show="bcState">
        <td class="col1">拖车里程:{{orderInfo.settleMileageBc + '公里'}}</td>
        <td  class="col2 halfOpc"><input placeholder="输入拖车公里"  v-model="form.supplierSettleMileageBc"/></td>
      </tr>
      <tr v-show="caState">
        <td class="col1">返程里程:{{orderInfo.settleMileageCa + '公里'}}</td>
        <td  class="col2 halfOpc"><input placeholder="输入返程里程"  v-model="form.supplierSettleMileageCa"/></td>
      </tr>
      <tr  v-show="bridgeAbState">
        <td class="col1">ab路桥费:{{orderInfo.bridgeAmountAb +'元'}}</td>
        <td  class="col2 halfOpc"><input placeholder="输入ab路桥费"  v-model="form.supplierBridgeAmountAb"/></td>
      </tr>
      <tr  v-show="bridgeBcState">
        <td class="col1">bc路桥费:{{orderInfo.bridgeAmountBc +'元'}}</td>
        <td  class="col2 halfOpc"><input placeholder="输入bc路桥费"  v-model="form.supplierBridgeAmountBc"/></td>
      </tr>
      <tr  v-show="bridgeCaState">
        <td class="col1">ca路桥费:{{orderInfo.bridgeAmountCa +'元'}}</td>
        <td  class="col2 halfOpc"><input placeholder="输入ca路桥费"  v-model="form.supplierBridgeAmountCa"/></td>
      </tr>
      <tr  v-show="tyreAmountState">
        <td class="col1">小轮费:{{orderInfo.bridgeAmount +'元'}}</td>
        <td  class="col2 halfOpc"><input placeholder="输入小轮费" v-model="form.supplierTyreAmount"/></td>
      </tr>
      <tr v-show="dilemmaAmountState && basePriceDisabled">
        <td class="col1">困境费:{{orderInfo.dilemmaAmount +'元'}}</td>
        <td  class="col2 halfOpc"><input placeholder="输入困境费" v-model="form.supplierDilemmaAmount"/></td>
      </tr>
      <tr v-show="waitAmountState">
        <td class="col1">等候费:{{orderInfo.waitAmount +'元'}}</td>
        <td  class="col2 halfOpc"><input placeholder="输入等候费" v-model="form.supplierWaitAmount"/></td>
      </tr>
      <tr v-show="basementFeeState">
        <td class="col1">地库费:{{orderInfo.basementFee +'元'}}</td>
        <td  class="col2 halfOpc"><input placeholder="输入地库费" v-model="form.supplierBasementFee"/></td>
      </tr>
      <tr>
        <td class="col1">基本费用:{{orderInfo.basePrice +'元'}}</td>
        <td  class="col2 halfOpc" ><input  :disabled="basePriceDisabled" v-model="form.supplierBasePrice"/></td>
      </tr>
      <tr>
        <td class="col1">额外费用总计:{{orderInfo.extraPrice +'元'}}</td>
        <td  class="col2 halfOpc" ><input  :disabled="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   :disabled="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">
            <img v-for="(item,index) in supplierPhotoList"  :key="index" class="supplierImg" :src="item.url" @click="delSupplierPhoto(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>
  <two-common-btn v-show="auditFormShow" class="btn" title1="提交" title2="确定审核" @submitClick1="save" @submitClick="save" />
</div>
</template>

<script>
import {myMixins} from '@/utils/myMixins'
import {leftCopy} from '@/utils/common'
import {
  getAccountRecordDetail, accountRecordCompute,
  updateAccountRecordInfo,
  selectRecordPictureList, deleteImage, deleteVehicle
} from "@/api/mine"
import { ImagePreview } from "vant";
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
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:'',//记录工单对账属于哪个状态
      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: ''
      },
    }
  },
  async mounted() {
    this.id=this.$route.params?.id;
    this.postfix=this.$route.params?.postfix;
    this.index=this.$route.params?.index;
    this.$nextTick(async ()=>{
      await this.getDetail()
    })
  },
  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 == '困境救援-故障'
    },
  },
  methods:{
    previewPhoto(index) {
      let url=[]
      this.auditPhotoList.forEach((item)=>{
        url.push(item.url)
      })
      ImagePreview({
        images: url,
        startPosition: index,
        closeable: true,
      });
    },
     handleFileRead(file) {
      console.log("file",file)
     },
    goback(){
       this.$router.push({
         name:"workOrderReconciliation",
         params:{
           activeIndex:this.index
         }
       })
    },
    async compute() {
      //现金业务置为0
      // if(this.form.contractSettleTypeString == '车主现收'){
      //   this.form.supplierBasePrice = 0
      //   this.form.supplierExtraPrice = 0
      //   this.form.supplierSettleAmount = 0
      // } else {
        if (this.form.supplierOtherAmount > 0) {
          if (this.form.supplierOtherAmountRemark == '') {
            this.$alert('请填写其他费用说明');
            return;
          }
        }
        if (!this.basePriceDisabled) {
          //困境的案件，或者一口价案件，基本费用可以输入
          let dilemmaBasePrice = parseFloat(this.form.supplierBasePrice) || 0
          this.form.supplierBasePrice = dilemmaBasePrice
          this.form.supplierExtraPrice = 0
          this.form.supplierSettleAmount = dilemmaBasePrice - (parseFloat(this.form.supplierCustomerAmount) || 0)
          // console.log("困境案件费用总计",this.form.supplierSettleAmount)
        }else{
          let data = await accountRecordCompute( {
            ...this.form,
            settleType:this.orderInfo.settleType?.code
          });
          this.form.supplierBasePrice = data.data.basePrice
          this.form.supplierExtraPrice = data.data.extraPrice
          this.form.supplierSettleAmount = data.data.totalPrice
          // console.log("计算",this.form.supplierSettleAmount)
        }
      // }
      if(this.form.cutInsuranceAmount == 1 && this.form.policyState === 0){
        this.form.supplierSettleAmount = parseFloat(parseFloat(this.form.supplierSettleAmount) - parseFloat(this.form.policyAmount || 0)).toFixed(2)
        // console.log("有责任险",this.form.supplierSettleAmount)
      }
    },
    async pictureList(){
      let res = await selectRecordPictureList({
        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
        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
        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;//是否显示审核数据
      }
      if(this.settleType == '实拖'  && this.basePriceDisabled){
        this.bcState = true
        this.form.supplierSettleMileageAb = 0
        this.form.supplierSettleMileageCa = 0
      }else if(this.settleType == '单程' && this.basePriceDisabled){
        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.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
        this.form.supplierBasementFee = this.orderInfo.refBasementFee
      }
    },
    cancelBtn(){
      this.goback()
    },
    async save() {
      if(this.form.supplierOtherAmount > 0){
        if(this.form.supplierOtherAmountRemark == ''){
          this.$alert('请填写其他费用说明');
          return;
        }
      }
      if(this.accountStatus >= 4){
        this.$alert('已进入后续流程，不允许操作');
        return;
      }
      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;
      Object.keys(obj).forEach((key) => {
        formData.append(key, obj[key]);
      });
      this.files.forEach((file) => {
        formData.append('file', file.file);
      });
      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()
        },2000)
      }
    },
    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";
.wrap{
  @include wh(100%,100%);
  background-color: #F4F5F7;
  overflow-y: auto;
}
.navBar{
  margin-bottom: 46px;
}
.title{
  @include fontWeightSize(bold,14px);
  color: #323643;
  opacity: 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{
  width: 100%;
  margin-bottom: 0;
  .inpInfo{
    margin: 0 5px;
    color: #323643;
    line-height: 32px;
    input{
      border: none;
      text-align: right;
    }
    .titleContent{
      @include fontWeightSize(bold,13px);
    }
    .flex-between{
        @include flexColBet
    }
    .halfOpcity{
      opacity: .5;
    }
    .inputContent{
      text-align: right;
    }
  }
  .btnComputed{
    width: 48px;
    @include all-height(18px);
    text-align: center;
    @include bgFontColor(#FFFFFF,#354D93);
    border-radius: 3px;
  }
  .multipleTxt{
    @include wh(100%,87px);
    background: #FAFAFA;
    border-radius: 3px;
    border: 1px solid #E6E6E6;
    backdrop-filter: blur(10px);
    padding: 8px;
    box-sizing: border-box;
  }
  .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);
      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;
    //width: 48px;
    //@include all-height(18px);
    padding: 4px 7px;
    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;
  padding:0  15px;
  box-sizing: border-box;
  button{
    @include whLin(152px,39px);
    border-radius: 5px;
    color: #FFFFFF;
    @include fontWeightSize(bold,14px);
    background-color: #354D93;
  }
}
.btn{
  margin-top: 31px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  //padding: 0 8px;
  button{
    @include wh(105px,39px);
    line-height: 39px;
    background: #9EA7C0;
    border-radius: 5px;
    color: #FFFFFF;
    @include fontWeightSize(bold,14px);
    border: none;
  }
  .submit{
    background: #354D93;
  }
}
</style>
