<template>
  <div class="wrap">
    <div class="title">报备事项:</div>
    <div class="line"></div>
    <van-radio-group v-model="radio" @change="change">
      <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>
    <textarea class="multiple" id="text-input" rows="4" cols="50" placeholder="报备描述" v-model="decscripTxt"></textarea><br>
    <common-btn @submitClick="submit" />
  </div>
</template>

<script>
import {orderReporting} from "@/api/order"
import CommonBtn from "@/components/commonBtn.vue"
export default {
  name: "reportingView",
  data(){
    return{
      decscripTxt:'',
      radio: '',
      activeIcon: require('@/assets/check.png'),
      inactiveIcon: require('@/assets/uncheck.png'),
      queryType:'',
      userOrderId:'',
      orderCode:''
    }
  },
  mounted() {
    console.log(this.radio)
    const urlParams = new URLSearchParams(window.location.search);
    this.queryType = urlParams.get('queryType');
    this.userOrderId = urlParams.get('userOrderId');
    this.orderCode = urlParams.get('orderCode')
  },
  methods:{
    submit(){
      console.log("提交1111111111")
      this.goReporting();
    },
    change(e){
      this.radio=e
      console.log("可以拿到选中的是哪个值",this.radio)
    },
    async goReporting(){
      let result = await orderReporting({
        queryType:this.queryType,
        userOrderId:this.userOrderId,
        orderCode:this.orderCode,
        reportingItem:this.radio ? this.radio : "",
        reportingDesc:this.decscripTxt ? this.decscripTxt : ""
      })
      if(result.code === 200){
        this.$toast(result.msg)
        setTimeout(()=>{
          window.android.sendMessage("goBack");
        },2000)
      }
    }
  },
  components:{
    CommonBtn
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap {
  box-sizing: border-box;
  padding: 13px 24px 0;
  width: 100%;
  height: 100%;
}

.title {
  @include fontWeightSize(500,14px);
  color: #323643;

}
.item{
  font-size: 14px;
  margin-bottom: 8px;
  @include flexCenter;
}
.line {
  @include wh(100%,2px);
  opacity: 0.16;
  border-top: 1px solid;
  margin-bottom: 10px;
  margin-top: 10px;
  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,10px);
}

.multiple {
  width: 100%;
  height: 125px;
  background: #FAFAFA;
  border-radius: 3px;
  border: 1px solid #E6E6E6;
  backdrop-filter: blur(10px);
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}


</style>