<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        title="车辆维保"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="goPrePage"
    />
  </div>
  <div class="flowWrap">
    <div class="detailInfo">
      <div class="line1">
        <div class="leftTitle commonTitle">{{ rowInfo.stage }}:</div>
        <div class="right">
          <img class="commonImg" :src="getStatus(detailInfo.states)">
          <div :class="getStatusColor(detailInfo.states)" >{{detailInfo.statesStr}}</div>
        </div>
      </div>
      <div class="line"></div>
      <div ><span class="opa">车辆名称:</span><span>{{ detailInfo.vehicleName }}</span></div>
      <div><span class="opa">车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
<!--      审批中，通过，终止-->
      <div class="shopName" v-if="[1,2,3].includes(detailInfo.states)"><span class="opa">门店信息:</span><span>{{detailInfo.address || ''}}</span></div>
      <div class="shopImgList">
        <template v-if="detailInfo.storePhotoUrls.indexOf(',') !== -1">
          <div v-for="(item,index) in (detailInfo.storePhotoUrls?.split(','))" :key="index">
            <img  :src="item" @click="previewPhoto(item)">
          </div>
        </template>
        <template v-else>
          <img  :src="detailInfo.storePhotoUrls" @click="previewPhoto(detailInfo.storePhotoUrls)">
        </template>
<!--        <img :src="detailInfo.storePhotoUrls" @click="previewPhoto(detailInfo.storePhotoUrls)">-->
      </div>
<!--      不通过-->
      <div v-if="noPassStatus"><span class="opa">车辆里程:</span><span>{{ detailInfo.mileage?.toFixed(2) ||'' }}km</span></div>
      <div v-if="noPassStatus"><span class="opa">结算类型:</span><span>月结</span></div>
      <div v-if="noPassStatus"><span class="opa">维修金额:</span><span>{{ detailInfo.amount || ''}}元</span></div>
      <div v-if="noPassStatus" class="shopName"><span class="opa">维保项目:</span><span class="project">{{ detailInfo.information ||'' }}</span></div>
    </div>
<!--   不通过-->
    <div class="detailInfo"  v-if="noPassStatus">
      <div class="line1">
        <div class="leftTitle commonTitle">维保项目照片:</div>
      </div>
      <div class="shopImgList">
        <template v-if="detailInfo.maintenancePhotoUrls.indexOf(',') !== -1">
          <div v-for="(item,index) in (detailInfo.maintenancePhotoUrls?.split(','))" :key="index">
            <img  :src="item" @click="previewPhoto(item)">
          </div>
        </template>
        <template v-else>
          <img  :src="detailInfo.maintenancePhotoUrls" @click="previewPhoto(detailInfo.maintenancePhotoUrls)">
        </template>
<!--        <img :src="detailInfo.maintenancePhotoUrls">-->
      </div>
    </div>
    <div class="detailInfo"  v-if="noPassStatus">
      <div class="line1">
        <div class="leftTitle commonTitle">维保清单/凭证照片:</div>
      </div>
      <div class="shopImgList">
        <template v-if="detailInfo.voucherPhotoUrls.indexOf(',') !== -1">
          <div v-for="(item,index) in (detailInfo.voucherPhotoUrls?.split(','))" :key="index">
            <img  :src="item" @click="previewPhoto(item)">
          </div>
        </template>
        <template v-else>
          <img  :src="detailInfo.voucherPhotoUrls" @click="previewPhoto(detailInfo.voucherPhotoUrls)">
        </template>
<!--        <img :src="detailInfo.voucherPhotoUrls">-->
      </div>
    </div>
    <!--  维保申请审批中，维保完成审批中  -->
    <div class="approvalContent" v-if="detailInfo.states == 1 || detailInfo.states == 4">
      <div class="title commonTitle">审批意见：</div>
      <textarea class="multiple" placeholder="输入意见" v-model="auditRemark"></textarea>
    </div>
<!--审批意见显示：   只要不是审批中状态-->
    <div class="resultWrap" v-if="!(detailInfo.states == 1 || detailInfo.states == 4)">
      <div class="result">
        <div class="title commonTitle">审批意见：</div>
        <div class="right">
          <img class="commonImg" :src="getStatus(detailInfo.states)">
          <div :class="getStatusColor(detailInfo.states)" >{{detailInfo.statesStr}}</div>
        </div>
      </div>
      <div :class="getStatusColor(detailInfo.states)" class="time">{{ detailInfo.createTime }}  {{detailInfo.statesStr}}</div>
<!--      完成不通过-->
      <div class="line" v-if="detailInfo.states==2 || detailInfo.states==5"></div>
      <div class="reason" v-if="detailInfo.states==2 || detailInfo.states==5">{{detailInfo.auditRemark}}</div>
    </div>
  </div>
<!--  维保申请审批中，维保完成审批中-->
  <div class="btnWrap"  v-if="detailInfo.states==1 || detailInfo.states==4">
    <div class="noPass" @click="approvalHandle(0)">不通过</div>
    <div class="pass" @click="approvalHandle(1)">通过</div>
  </div>
<!-- 维保申请通过 -->
  <div class="btnWrap" v-if="detailInfo.states == 3">
    <div  class="stoping pass" @click="show=true">维保终止</div>
  </div>
  <van-dialog v-model="show" title="请确认是否终止维保" show-cancel-button @confirm="handleConfirm"></van-dialog>
</div>
</template>

<script>
import {getVehicleMaintenanceDetail,vehicleMaintenanceStop,vehicleMaintenanceApproval} from "@/api/maintenance"
import {myMixins} from  "@/utils/myMixins"
import { ImagePreview } from "vant";
export default {
  name: "maintenance-application",
  mixins:[myMixins],
  data() {
    return {
      rowInfo:'',
      noClick:true,
      detailInfo:'',
      show:false,
      auditRemark:'',
      // activeIndex:'',
    }
  },
  mounted() {
    this.rowInfo=this.$route.params.info
    this.getDetail()
  },
  computed: {
     // 维保申请不通过，维保完成不通过
     noPassStatus(){
       return  this.detailInfo.states===5
     },
  },
  methods: {
    goPrePage(){
      this.$router.push({
        name: 'vehicleMaintenanceList',
        params: {
          activeIndex:this.$route.params?.activeIndex,
        }
      });
    },
    previewPhoto(url) {
      let urls=[]
      // this.auditPhotoList.forEach((item)=>{
        urls.push(url)
      // })
      ImagePreview({
        images: url,
        startPosition: 0,
        closeable: true,
      });

    },
    async handleConfirm(){
      let res=await vehicleMaintenanceStop({id:this.rowInfo.id, vehicleId:this.rowInfo.vehicleId})
      if (res.code==200){
        this.show=false
        await this.getDetail();
      }
    },
    async approvalHandle(approvalType){
      let res=await vehicleMaintenanceApproval({
        id:this.rowInfo.id,
        vehicleId:this.rowInfo.vehicleId,
        auditResult:approvalType,
        auditRemark:this.auditRemark,
      })
      if(res.code==200){
        await this.getDetail();
      }
    },
    // 1申请审批，2申请不通过，3申请通过，4完成审批中，5完成不通过，6完成通过，9维保终止
    getStatusColor(i){
      switch (i){
        case 1://
        case 4://
          return 'yelColor'
        case 2://
        case 5://
          return 'redColor'
        case 3://
        case 6://
          return 'greColor'
        case 9://
          return 'garyColor'
        default:
          return 'yelColor'
      }
    },
    getStatus(i){
      switch (i){
        case 1://
        case 4://
          return require('@/assets/waitSubmit.png')
        case 2://审核通过
        case 5://已打款
          return require('@/assets/unpass.png')
        case 3://
        case 6://
          return require('@/assets/dakuan.png')
        case 9://报销失败
          return require('@/assets/unSubmit.png')
        default:
          return require('@/assets/waitSubmit.png')
      }
    },
    async getDetail() {
      let res=await getVehicleMaintenanceDetail ({
        id:this.rowInfo.id,
        vehicleId:this.rowInfo.vehicleId,
      })
      if(res.code===200 && res.data){
        this.detailInfo=res.data
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
@import "@/styles/approval.scss";
.wrap{
  background-color: #F4F5F7;
}
.flowWrap{
  height: calc(100% - 120px);
  overflow-y: auto;
}
.line{
  margin: 5px 0;
  width: 325px;
  border-bottom: 2px solid;
  opacity: 0.16;
  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;
}
.commonTitle{
  @include fontWeightSize(14px,bold);
  @include colHeight( #323643,20px);
}
.detailInfo{
  width: 100%;
  background: #FFFFFF;
  @include sizing4Padding(13px,25px,14px,24px);
  margin-bottom: 10px;
  .line1{
    @include flexColBet;
    line-height: 23px;
    .leftTitle{
      opacity: .66;
    }
    .right{
      @include flexCenter;
    }
  }
  .opa{
    display: inline-block;
    width: 60px;
    @include colorOpa(#000000,.5);
    font-size: 12px;
    line-height: 27px;
  }
  .shopName{
    display: flex;
    align-items: baseline;
  }
  .project{
    color: #E8A524;
    width: calc(100% -  60px);
  }
  .shopImgList{
    margin-top: 6px;
    @include flexColBet;
    flex-wrap: wrap;
    img{
      background: #FAFAFA;
      border-radius: 3px;
      border: 1px solid #EAEAEA;
      backdrop-filter: blur(10px);
      @include wh(154px,93px);
      margin-bottom: 10px;
    }
  }
}
.approvalContent{
  background-color: #FFFFFF;
  width: 100%;
  @include sizing4Padding(13px,25px,24px,25px);
  .title {
    margin-bottom: 8px;
  }
  .multiple{
    @include wh(100%,125px);
    background: #FAFAFA;
    border: 1px solid #E6E6E6;
    backdrop-filter: blur(10px);
    @include sizingPadRadius(7px,10px,3px);
  }
}
.resultWrap{
  width: 100%;
  background: #FFFFFF;
  @include sizing4Padding(12px,23px,16px,24px);
  @include flexBetween;
  .title {
    margin-bottom: 8px;
  }
  .result{
    @include flexColBet;
  }
  .right{
    @include flexCenter;
  }
  .commonImg{
    @include widHeiMar(13px,13px,4px);
  }
  .time{
    text-align: right;
  }
  .reason {
    font-size: 13px;
    color: #FF5D2E;
    line-height: 20px;
  }
}
.btnWrap{
  @include wh(100%, 54px);
  @include sizingPadding(0,30px);
  @include flexBetCen;
  position: absolute;
  bottom: 12px;
  background-color: #F4F5F7;
  div{
    @include wh(152px, 48px);
    line-height: 48px;
    text-align: center;
    border-radius: 5px;
    @include fontWeightSize(15px,bold);
    color: #FFFFFF;
  }
  .noPass{
    background: #9EA7C0;
  }
  .pass{
    background: #354D93;
  }
  .stoping{
    width: 100% !important;
  }
}
</style>