<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        :title="id ? '修改车辆信息' : '添加车辆'"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="h5GoBack"
    />
  </div>
<div class="addContentWrap">
  <cell-group label="车牌号" placeholder="请输入车牌号"  @input="getPLateNum(carNum)" v-model="carNum" />
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>车辆类型</span>
    </div>
    <select id="mySelect" style="width: 70px"  v-model="selectedOption">
      <option v-for="(item,index) in typeList" :key="index" :value="index">{{item}}</option>
    </select>
  </div>
  <div class="lineBot"></div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>是否参与中道聚合</span>
    </div>
    <div class="isJoin">
      <van-radio-group v-model="isJoin" @change="isChange"  class="joinWrap">
        <van-radio :name="1" style="margin-right: 26px">
          参与
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio :name="0">
          不参与
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
      </van-radio-group>
    </div>
  </div>
  <div class="lineBot"></div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>选择服务种类</span>
    </div>
  </div>
  <div class="serviceType">
    <div class="trailerService">
      <div class="serviceline">
        <span  class="service">拖车服务:</span>
        <span class="line"></span>
      </div>
      <van-radio-group v-model="trailerService" @change="change" class="radioWrap">
        <van-radio name="故障——平板拖车" class="item">
          故障——平板拖车
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio name=" 事故——平板拖车" class="item">
          事故——平板拖车
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
      </van-radio-group>
    </div>
    <div class="smallRepairService">
      <div  class="serviceline">
        <span class="service">小修服务:</span>
        <span class="line"></span>
      </div>
      <van-radio-group v-model="smallRepairService" @change="change2" class="radioWrap">
        <van-radio name="换胎" class="item">
          换胎
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio name="搭电" class="item">
          搭电
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio name="送油" class="item">
          送油
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio name="送水" class="item">
          送水
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
      </van-radio-group>
    </div>
  </div>
  <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
</div>
</div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {vehicleTypeList,saveVehicle,getInfoById} from "@/api/mine"
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
import CellGroup from "@/components/cellGroup.vue";
export default {
  name: "vehicleAdd",
  mixins:[myMixins],
  data(){
    return{
      trailerService: '',//拖车服务
      smallRepairService: '',//小修服务
      isJoin:'',//是否参与
      activeIcon: require('@/assets/check.png'),
      inactiveIcon: require('@/assets/uncheck.png'),
      carNum:"",//车牌号
      typeList:[],//车辆类型列表
      selectedOption:'1',//车辆类型
      id:'',//车辆Id
      serviceIds:''//车辆服务种类
    }
  },
  created() {
    this.id=this.$route.query?.id || ''
  },
  async mounted() {
    const selectElement = document.getElementById('mySelect');
    selectElement.addEventListener('change', function() {
     this.selectedOption=selectElement.value;
      // console.log(this.selectedOption,"11")
    });
    await this.getTypeList();
    // console.log(this.selectedOption,"22")
    this.id=this.$route.query?.id || ''
    console.log("this.$route.query",this.id);
    await this.vehicleInfo()
  },
  methods:{
    async getTypeList() {
        let result=await vehicleTypeList();
        if(result.code === 200){
          this.typeList=result.data
        }
    },
    async vehicleInfo(){
      let res= await  getInfoById({
        vehicleId:this.id
      })
      if(res.code === 200){
        let result=res.data;
        console.log("获取信息",res)
        this.id=result.vehicleId
        this.carNum=result.plateNumber
        this.isJoin=result.hasPolymerization.code
        this.selectedOption=result.vehicleType;
        this.serviceIds=result.serviceIds
        // console.log("num",this.carNum,this.isJoin)
      }

    },
    change(e) {
      console.log("拖车服务",e)
      this.trailerService=e
    },
    change2(e) {
      console.log("小修服务",e)
      this.smallRepairService=e
    },
    isChange(e){
      console.log("是否参与",e)
      this.isJoin=e
    },
    cancelBtn(){//取消车辆
      this.isJoin='';
      this.trailerService='';
      this.smallRepairService='';
      this.carNum=''
    },
    async submitBtn(){
      console.log("提交车辆");
      let res=await saveVehicle({
        vehicleId:this.id ? this.id : '',
        plateNumber:this.carNum ? this.carNum :'',
        vehicleType:this.selectedOption ? this.selectedOption : '',
        hasPolymerization:Number(this.isJoin ? this.isJoin : '') ,
        serviceIds:this.serviceIds ? this.serviceIds : []
      })
      if(res.code === 200){
        if(this.id){
          this.$toast('修改成功')
        }else{
          this.$toast('添加成功')
        }

        setTimeout(()=>{
          this.$router.back();
        },2000)
      }
      console.log("res",res)
    },
    getPLateNum(e){
      console.log("e",e)
    },
  },
  components:{
    CellGroup,
    TwoCommonBtn
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.navBar{
  margin-bottom: 46px;
}
.wrap{
@include wh(100%,100%);
}
.addContentWrap{
  margin-left: 16px;
  .itemContent{
    display: flex;
    justify-content: space-between;
    line-height: 56px;
    box-sizing: border-box;
    padding-right: 25px;
    .titleType{
      @include fontWeightSize(bold,14px);
      color: #323643;
    }
    .isJoin{
      display: flex;
      .joinWrap{
        display: flex;
      }
      img{
        @include widHeiMar(16px,16px,6px)
      }
    }
    .startImg{
      @include widHeiMar(6px,6px,3px);
      vertical-align: super;
    }
    input{
      border: none;
      text-align: right;
      @include fontWeightSize(bold,13px);
      opacity: .5;
    }
  }
  .lineBot{
    @include wh(100%,1px);
    background: #E9E9EA;
    opacity: 0.6;
  }
  .serviceType{
    @include fontWeightSize(bold,13px);
    margin-left: 15px;
    .trailerService{
      margin-bottom: 10px;
    }
    .serviceline{
      @include flexCenter;
      margin-bottom: 10px;
    }
    .item{
     margin: 20px 0;
      @include flexCenter;
    }
    .radioWrap{
      margin-left: 10px;
    }
    .service{
      opacity: .7;
      color: #323643;
      line-height: 18px;
    }
    .line{
      display: inline-block;
      @include wh(246px,2px);
      opacity: 0.16;
      border-bottom: 1px solid;
      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;
    }
    img{
      @include widHeiMar(16px,16px,12px)
    }
  }
  .btn{
    margin-left: 8px;
    width: 90%;
    position: fixed;
    bottom: 30px;
  }
}
</style>