<template>
  <div class="wrap">
    <div class="title">报备事项:</div>
    <div class="line"></div>
    <van-radio-group v-model="radio" @change="change">
      <van-radio v-for="(item,index) in reportingRadioList" :key="index" :name="item" class="item">
        {{ item }}
        <img
            slot="icon"
            slot-scope="props"
            :src="props.checked ? activeIcon : inactiveIcon"
        >
      </van-radio>
    </van-radio-group>
    <textarea v-if="radio == '其他报备'" class="multiple" id="text-input" rows="4" cols="50" placeholder="报备描述"
              v-model.trim="decscripTxt"></textarea><br>
    <common-btn @submitClick="submit"/>
  </div>
</template>

<script>
import {orderReporting} from "@/api/order"
import {myMixins} from "@/utils/myMixins"
import CommonBtn from "@/components/commonBtn.vue"

export default {
  name: "reportingView",
  mixins: [myMixins],
  data() {
    return {
      decscripTxt: '',
      radio: '',
      activeIcon: require('@/assets/check.png'),
      inactiveIcon: require('@/assets/uncheck.png'),
      queryType: '',
      userOrderId: '',
      orderCode: '',
      reportingList: [],
      reportingRadioList: ['目的地变更', '服务项目更改', '拖车实际在地库', '目的地没有门头照片', '联系不到客户', '车牌、车架号不符',
        '第三方路段无法救援', '客户酒后代驾叫拖车', '车上有货物无法卸货', '客户无钥匙打不开车门', '事故车走故障救援', '电瓶检测仪显示优良客户要搭电', '客户车辆位于非正常路面', '其他报备']
    }
  },
  mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    this.queryType = urlParams.get('queryType');
    this.userOrderId = urlParams.get('userOrderId');
    this.orderCode = urlParams.get('orderCode')
    // this.$toast('queryType' + this.queryType)
  },
  computed: {
    isRadio() {
      return this.radio ? true : false
    },
    isTxt() {
      return this.decscripTxt ? true : false
    },
  },
  methods: {
    submit() {
      this.goReporting();
    },
    change(e) {
      this.radio = e
    },
    async goReporting() {
      if (!this.isRadio) {
        this.$toast('报备事项必选')
        return
      }
      if (this.radio == '其他报备') {
        if (!this.decscripTxt) {
          this.$toast('报备描述必填')
          return
        }
      }
      let result = await orderReporting({
        queryType: Number(this.queryType),
        userOrderId: this.userOrderId,
        orderCode: this.orderCode,
        reportingConfirm: 1,
        reportingItem: this.radio ? this.radio : "",
        reportingDesc: this.decscripTxt ? this.decscripTxt : ""
      })
      // reportingConfirm: this.radio == '其他报备' ? 0 : 1,
      this.$toast(result.msg)
      setTimeout(() => {
        let data = {"action": "goBack", "params": ""}
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isiOS) {
          window.webkit.messageHandlers.nativeObject.postMessage(data);
        } else {
          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%;
  overflow-y: auto;
}

.title {
  @include fontWeightSize(bold, 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;
  margin-bottom: 10px;
}

.btn {
  box-sizing: border-box;
  padding: 13px 24px 0;
}

.scrollWrap {

}

</style>