<template>
  <div class="wrap" >
    <div class="headerWrap">
      <img class="bg" src="@/assets/secondHandCar/bg.png" />
      <div class="navWrap">
        <div v-if="isWebFunc()" style="opacity: 0;" class="back"></div>
        <img v-else class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />
        <img class="navIcon" src="@/assets/secondHandCar/sellingInfo.png" />
<!--        <span class="title">售出信息</span>-->
        <div style="opacity: 0;" class="back"></div>
      </div>
      <div class="audit" v-if="type=='revise' && status==9 && auditRemark">
        <span><img class="noAudit" src="@/assets/secondHandCar/noAudit.png" />审核不通过：</span>
        <span>{{auditRemark }}</span>
      </div>
    </div>
    <div class="contentWrap" :class="[!(status==9 && auditRemark) ? 'noReasonWrap': 'hasReasonWrap']">
      <div  class="content">
        <div class="item" style="align-items: center">
          <span> <span class="star">*</span>售出渠道 </span>
          <van-radio-group v-model="form.salesChannel" direction="horizontal" class="radioWrap"  :disabled="type !== 'revise'">
            <van-radio name="1" :class="{'checked':form.salesChannel==1,'salesChannelRadio':true,'radio':true}">中道二手拖车</van-radio>
            <van-radio name="2" :class="{'checked':form.salesChannel==2,'salesChannelRadio':true}">本地线下</van-radio>
            <van-radio name="3" :class="{'checked':form.salesChannel==3,'salesChannelRadio':true}">报废</van-radio>
          </van-radio-group>
        </div>
        <template v-if="form.salesChannel==3">
          <div class="item" style="margin-top: 8px">
            <span style="line-height: 0.5rem"> <span class="star">*</span>报废机动车回收证明 </span>
            <upload-common  @success3="getRecyclePhoto"   @delete3="deleteImgRecycle" :show-del="type == 'revise'"
                            :text="'回收证明'" :multiple="false"  :files.sync="recyclePathList"/>
          </div>
          <div class="item">
            <span> <span class="star">*</span>报废年月</span>
            <van-field
                :disabled="type !== 'revise'"
                @focus="showDatetime = true"
                class="radioWrap"
                readonly
                v-model="scrapTimeFormatShow"
                input-align="right"
            >
            </van-field>
          </div>
        </template>
        <template v-else>
          <div class="item">
            <span> <span class="star">*</span>购买方 </span>
            <van-field
                :disabled="type !== 'revise'"
                class="radioWrap"
                v-model="form.purchaser"
                input-align="right"
            > </van-field>
          </div>
          <div class="item">
            <span> <span class="star">*</span>售出价格 </span>
            <van-field
                :disabled="type !== 'revise'"
                type="number"
                class="radioWrap"
                v-model="form.sellPrice"
                input-align="right"
            >
              <template slot="right-icon" >
                <span style="white-space: nowrap;  margin-left: 8px;"> 元 </span>
              </template>
            </van-field>
          </div>
          <div class="item"  style="margin-top: 8px">
            <span> <span class="star">*</span>交易合同 </span>
            <upload-common @success3="getTradePhoto"   @delete3="deleteImgTrade" :show-del="type == 'revise'"
                           :text="'交易合同'" :multiple="false"  :files.sync="tradeContractPathList"/>
          </div>
          <div class="item">
            <span> <span class="star">*</span>交易年月</span>
            <van-field
                :disabled="type !== 'revise'"
                @focus="showDatetime = true"
                class="radioWrap"
                readonly
                v-model="tradeTimeFormatShow"
                input-align="right"
            > </van-field>
          </div>
        </template>
      </div>
      <div class="btnWrap" v-if="type !== 'view'">
        <div v-if="type == 'revise'" class="btn commonBtn"  @click="noMultipleClicks(submitHandle)">确认售出</div>
        <template  v-else-if="type=='audit'">
          <div style="margin: 10px">不通过原因</div>
          <el-input style="margin-bottom: 10px;margin-left: 10px"  class="ipt" v-model.trim="auditReason" type="textarea"  :autosize="{ minRows: 2, maxRows: 6 }"
                    maxlength="200" show-word-limit placeholder="请填写不通过原因"></el-input>
          <div  class="auditBtn">
            <div  class="commonBtn" @click="noMultipleClicks(auditHandle,0)">审核不通过</div>
            <div  class="commonBtn" @click="noMultipleClicks(auditHandle,1)"><span style="margin-right: 6px">✔</span>审核通过</div>
          </div>
        </template>
      </div>
    </div>
    <van-popup v-model="showDatetime" round position="bottom">
      <van-datetime-picker
          class="dataTime"
          v-if="showDatetime"
          v-model="time"
          type="date"
          :min-date="minDate"
          @confirm="onConfirm"
          @cancel="showDatetime = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {auditCarInfo, usedCarRemove,carInfoDetail,auditCarInfoAgain} from "@/api/secondHandCar"
import uploadCommon from "@/views/secondHandCar/components/upload-common.vue";
import {timeFormat} from "@/utils/common";
export default {
  name: "sellingInfo",
  mixins:[myMixins],
  data(){
    return{
      noClick:true,
      form:{
        id:'',
        downReason: '已售出',
        salesChannel:'',
        purchaser:'',
        sellPrice:'',
        tradeContractPath:'',
        tradeTime:'',
        recyclePath:'',
        scrapTime:'',
      },
      tradeContractPathList:[],
      recyclePathList:[],
      otherImgSrc:[],
      otherImgSrcList:[],
      type:'',
      auditRemark:'',
      auditReason:'',
      status:'' ,
      time:'',
      showDatetime:false,
      minDate: new Date(),
    }
  },
  async mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    this.form.id=this.$route.query.id ||  urlParams.get('id');
    this.type=this.$route.query.type || urlParams.get('type');
    if( this.form.id){
      let res = await carInfoDetail({
        id:this.form.id,
        queryType:4,
      })
      this.form={...res.data}
      this.form.downReason='已售出'
      this.auditRemark=res.data?.auditRemark
      this.status=res.data?.status?.code
      if(res.data?.tradeContractPath){
        this.tradeContractPathList=[{url:res.data?.tradeContractPath}]
      }
      if(res.data?.recyclePath){
        this.recyclePathList=[{url:res.data?.recyclePath}]
      }
    }
  },
  methods:{
    onConfirm(data) {
      this.time = timeFormat(new Date(data))
      if(this.form.salesChannel==3){
        this.form.scrapTime = timeFormat(new Date(data))
      }else {
        this.form.tradeTime = timeFormat(new Date(data))
      }
      this.showDatetime = false;
    },
    // 审核操作
    async auditHandle(type){
      if (!type && !this.auditReason){
        this.$toast('请填写不通过原因')
        return
      }
      try {
        await auditCarInfo({
          id: this.form.id,
          auditResult: type  ? 1 : 0 ,
          auditReason: this.auditReason,
          ...this.form,
          licenseType:this.form?.licenseType?.code,
          boardType:this.form?.boardType?.code,
          emissionStandard:this.form?.emissionStandard?.code,
        })
        setTimeout(()=>{
          this.closeParentDialog()
        },1000)
      } finally {
        console.log(type)
      }
    },
    async submitHandle(){
      let rule = this.validationRules.find(item =>
          item.required && (item.value === null || item.value === undefined || item.value === ''))
      if(rule){
        this.$toast(rule.name)
        return
      }
      try {
        // 清除原本选择的信息
        if(this.form.salesChannel==3){
          this.form.purchaser=''
          this.form.sellPrice=''
          this.form.tradeContractPath=''
          this.form.tradeTime=''
        }else{
          this.form.recyclePath=''
          this.form.scrapTime=''
        }
        let res=''
        if(this.status == 9){
          res=await auditCarInfoAgain({// 审核不通过再次提交
            ...this.form,
            salesChannel:Number(this.form.salesChannel)
          })
        }else {
          res=await usedCarRemove({
            ...this.form,
            salesChannel:Number(this.form.salesChannel)
          })
        }
        if(res.code == 200 && !res.msg){
          this.$toast('操作成功')
          if(this.isWebFunc()){
            setTimeout(()=>{
              this.closeParentDialog()
            },1000)
          }else{
            setTimeout(()=>{
              this.h5GoBack()
            },1000)
          }
        }else{
          this.$toast(res.msg)
        }
      } catch (e) {
        console.log(e)
      }
    },
    getTradePhoto(data) {
      this.form.tradeContractPath = data.url
    },
    deleteImgTrade() {
      this.form.tradeContractPath = '';
    },
    getRecyclePhoto(data) {
      this.form.recyclePath = data.url
    },
    deleteImgRecycle() {
      this.form.recyclePath = '';
    },
  },
  computed: {
    tradeTimeFormatShow(){
      return this.form.tradeTime ? this.form.tradeTime?.substring(0,10) :  '';
    },
    scrapTimeFormatShow(){
      return this.form.scrapTime ? this.form.scrapTime?.substring(0,10) :  '';
    },
    validationRules() {
      return [
        {required:true, value: this.form.salesChannel, name: '售出渠道不能为空' },
        {required:this.form.salesChannel==3 ? false : true, value: this.form.purchaser, name: '购买方不能为空' },
        {required:this.form.salesChannel==3 ? false : true, value: this.form.sellPrice, name: '售出价格不能为空' },
        {required:this.form.salesChannel==3 ? false : true, value: this.form.tradeContractPath, name: '交易合同文件不能为空' },
        {required:this.form.salesChannel==3 ? false : true, value: this.form.tradeTime, name: '交易年月不能为空' },
        {required:this.form.salesChannel==3 ? true : false, value: this.form.recyclePath, name: '报废机动车回收证明不能为空' },
        {required:this.form.salesChannel==3 ? true : false, value: this.form.scrapTime, name: '报废年月不能为空' },
      ];
    },
  },
  components:{uploadCommon}
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
.wrap {
  @include wh(100%, 100%);
  position: relative;
}
.headerWrap{
  width: 100%;
  box-sizing: border-box;
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
  .navWrap{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 16px 10px;
  }
  .bg {
    position: absolute;
    width: 100%;
    height: 120px;
    line-height: 120px;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: -1;
  }
  .back{
    @include wh(15px,15px);
  }
  .title{
    font-weight: bold;
    font-size: 16px;
    color: #203152;
  }
  .navIcon{
    @include wh(84px,21px);
  }
  .audit{
    @include wh(100%,43px);
    background: #FFF7F4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #FF6B3B;
    .noAudit{
      @include wh(13px,12px);
      margin-right: 5px;
      vertical-align: bottom;
    }
    span:first-child{
      font-weight: 600;
    }
  }
}
.navBar{
  margin-bottom: 46px;
}
.noReasonWrap{
  height: calc(100% - 42px);
}
.hasReasonWrap{
  height: calc(100% - 85px);
}
.contentWrap{
  width: 100%;
  overflow-y: auto;
  @include sizingPadding(15px,15px);
  @include flexBetween;
  .btnWrap{
    padding-bottom: 20px;
    padding-top: 15px;
  }
  .commonBtn{
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    color: #FFFFFF;
    cursor: pointer;
  }
  .btn{
    width: 296px;
    background: #4A7FEB;
    margin: 0 auto;
    font-size: 15px;
  }
  .auditBtn{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0 6px;
    div:first-child{
      width: 100px;
      opacity: 0.79;
      background: #1C2C49;
    }
    div:last-child{
      width: 200px;
      background: #4A7FEB;
    }
  }
}

.content{
  width: 100%;
  .item{
    display: flex;
    font-weight: 400;
    font-size: 13px;
    color: #2C3D54;
    line-height: 44px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 21px;
    padding-right: 9px;
    span:first-child{
      display: inline-block;
      width:70px;
      font-size: 13px;
      color: rgba(44, 61, 84, 0.59);
    }
    span:last-child{
      display: inline-block;
      width:calc(100% - 70px);
      border-bottom: 1px solid #E9E9EA;
    }
    .orc{
      box-sizing: border-box;
      padding-left: 6px;
    }
  }
  .star{
    color: #FF4B4B !important;
    opacity: 1 !important;
    font-weight: bold;
    font-size: 12px;
    margin-right: 6px;
    margin-left: -6px;
  }
  .radioWrap{
    width:calc(100% - 70px);
    border-bottom: 1px solid #E9E9EA;
  }
}
.lastLine{
  margin-top: 3px !important;
}
::v-deep .van-icon-success{
  display: none !important;
}
::v-deep .van-radio__label{
  margin-left: 0;
  width: 54px;
  height: 23px;
  border-radius: 13px;
  border: 1px solid #9F9F9F;
  opacity: 0.5;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
  color: #323233;
  opacity: 1;
}
::v-deep .van-radio--horizontal{
  margin-right: 4px;
}
::v-deep .van-radio--horizontal:last-child{
  margin-right: 0;
}
::v-deep  .checked .van-radio__label{
  background: #FFF1EC !important;
  border: 1px solid #FF5C26 !important;
  color: #FE5006 !important;
  border-radius: 13px !important;
}
::v-deep  .van-field__right-icon{
  margin-right: 0;
  padding: 0;
}
::v-deep .ipt .el-textarea__inner{
  background: #F5F7F9;
  border-radius: 4px;
  font-size: 12px;
  border: none;
}
::v-deep .van-popup__close-icon--top-right{
  display: none;
}
::v-deep .salesChannelRadio .van-radio__label{
  margin-bottom: 8px !important;
}
::v-deep .radio .van-radio__label{
  width: 80px !important;
}
</style>
