<template>
  <div class="orderViews" v-show="showDe">
    <div class="orderText1">
      <div class="orderText1_1">订单信息</div>
      <span
        class="el-icon-message-solid orderText1_img"
        style="color: #00ffff; font-size: 28px"
      ></span>
      <span v-show="orderObj.status!==3" style="color: #00ffff">请您前往：
        <span style="color: #e47e1b; font-weight: 600">{{ orderObj.status<3?orderObj.zcArea||'':orderObj.xcArea||'' }}</span>
      </span>
      <span v-show="orderObj.status===3" style="color: #00ffff">挖机牌号：
        <span style="color: #e47e1b; font-weight: 600">{{ orderObj.ccCarNumber }}</span>
      </span>
      <span style="color: #00ffff">状态：{{ orderStuText }}</span>
    </div>
    <div class="orderText2" @click="navigation()" v-show="orderObj.status===1 && navStu===0">
      导航前往
    </div>
    <div class="orderText2" @click="reachCD()" v-show="orderObj.status===1 && navStu===1">
      到达采点
    </div>
    <div class="orderText2" @click="loadTruck()" v-show="orderObj.status===3">
      完成装车
    </div>
    <div class="orderText2" @click="navigation()" v-show="orderObj.status===4 && navStu===0">
      导航前往
    </div>
    <div class="orderText2" @click="checkDestination()" v-show="orderObj.status===4 && navStu===1">
      到达卸点
    </div>
    <div class="orderText2" @click="unloadTruck()" v-show="orderObj.status===5">
      完成卸车
    </div>
    <audio id="audioMp3" controls :src="mp3Url" style="display:none;"></audio>
  </div>
</template>

<script>
import {
  httpGet,
  httpPostForJson,
  putForJson,
  httpDelForJson,
} from "@/common/httpBean.js";
import {
  tRealTimeOrder,
  arriveCaiDian,
  completeZC,
  completeXC,
  crossDB,
} from "@/axios/api.js";
import xdd from "@/assets/audio/xdd.mp3";
import ddcd from "@/assets/audio/ddcd.mp3";
import qkjwj from "@/assets/audio/qkjwj.mp3";
import qzc from "@/assets/audio/qzc.mp3";
import gdb from "@/assets/audio/gdb.mp3";
import wdd from "@/assets/audio/wdd.mp3";
import ddwc from "@/assets/audio/ddwc.mp3";

export default {
  data() {
    return {
      showDe: false, //接派单窗口
      carNumber: null,
      orderObj: {},
      sonTimer1: null,
      navStu: 0,
      orderStuText: '正在前往',
      orderAudio: null,
      mp3Url:'',
    };
  },
  mounted() {
    this.sonTimer1 = setInterval(() => {
      this.queryOrder()
    }, 5000);
  },
  methods: {
    loadData(carNumber) {
      this.carNumber = carNumber;
      this.$nextTick(() => {
        this.queryOrder()
      });
    },
    queryOrder(){
      httpGet(tRealTimeOrder,{carNumber: this.carNumber}).then((res) => {
        if(res.code===200 && res.data){
          if(res.data.id!==this.orderObj.id && res.data.status===1){
            //有新的订单
            this.$parent.kcListView = false;
            this.showDe = true;
            this.navStu=0;
            this.orderStuText='正在前往';
            this.orderObj = res.data;
            if(this.orderObj.zcArea.length>5){
              this.orderObj.zcArea = this.orderObj.zcArea.substr(0,5)+'...'
            }
            if(this.orderObj.xcArea.length>5){
              this.orderObj.xcArea = this.orderObj.xcArea.substr(0,5)+'...'
            }
            this.audioPlayByUrl(xdd);
          } else {
            if (res.data.id !== this.orderObj) {
              this.orderObj = res.data;
              if(this.orderObj.zcArea.length>6){
                this.orderObj.zcArea = this.orderObj.zcArea.substr(0,5)+'...'
              }
              if(this.orderObj.xcArea.length>6){
                this.orderObj.xcArea = this.orderObj.xcArea.substr(0,5)+'...'
              }
            }
            this.orderObj.status = res.data.status;
            if (this.orderObj.status === 6) {
              this.showDe = false;
              this.$parent.kcListView = true;
              return;
            } else {
              this.showDe = true;
            }
            if (this.orderObj.status === 2) {
              this.orderStuText = '等待装车';
              //播放靠近挖机语音
              return;
            }
            if (this.orderObj.status === 3) {
              this.orderStuText = '正在装车';
              this.audioPlayByUrl(qzc);
              return;
              //播放根据提示进行装车
            }
            if (this.orderObj.status === 4) {
              this.orderStuText = '完成装车';
              //播放根据提示进行装车
            }
          }
        } else {
          this.orderObj = {};
          this.showDe = false;
        }
      });
    },
    //点击导航
    navigation() {
      // this.$parent.zhixinglujing(true, this.carnumber, this.carDestination);
      this.navStu = 1;
    },
    //点击到达采点
    reachCD() {
      putForJson(arriveCaiDian,{carNumber:this.carNumber,orderNumber: this.orderObj.orderNumber}).then((res) => {
        if(res.code===200){
          if(res.data>0){
            this.navStu = 0;
            if (this.$parent.carclass != "铲车") {
              this.audioPlayByUrl(ddcd);
            }
            this.queryOrder();
          }else{
            this.$notify({
              title: res.msg,
              type: "warning",
              duration: 5000,
              dangerouslyUseHTMLString: true,
            });
            if (this.$parent.carclass != "铲车") {
              this.audioPlayByUrl(qkjwj);
            }
          }
        } else {
          this.$notify({
            title: '网络异常，请稍后再试',
            type: "warning",
            duration: 5000,
            dangerouslyUseHTMLString: true,
          });
        }
      });
    },
    //点击完成装车
    loadTruck() {
      putForJson(completeZC,{kc:this.carNumber, orderNumber: this.orderObj.orderNumber}).then((res) => {
        if(res.code===200){
          this.$notify({
            title: res.msg,
            type: "warning",
            duration: 5000,
            dangerouslyUseHTMLString: true,
          });
          this.queryOrder();
        } else {
          this.$notify({
            title: '网络异常，请稍后再试',
            type: "warning",
            duration: 5000,
            dangerouslyUseHTMLString: true,
          });
        }
      });
    },
    //校验目的地
    checkDestination() {
      if(this.$parent.localName==this.orderObj.xcArea){
        this.navStu = 0;
        this.$notify({
          title: '您已到达'+this.orderObj.xcArea+',请卸车',
          type: "warning",
          duration: 5000,
          dangerouslyUseHTMLString: true,
        });
        this.orderObj.status=0;
        this.orderStuText = '正在卸车';
        putForJson(crossDB,{orderNumber: this.orderObj.orderNumber}).then((res) => {
          if(res.code===200){
            this.$notify({
              title: res.msg,
              type: "warning",
              duration: 5000,
              dangerouslyUseHTMLString: true,
            });
            this.queryOrder();
            this.audioPlayByUrl(gdb);
          } else {
            this.$notify({
              title: '网络异常，请稍后再试',
              type: "warning",
              duration: 5000,
              dangerouslyUseHTMLString: true,
            });
          }
        });
      }else{
        this.$notify({
          title: '您尚未到达'+this.orderObj.xcArea,
          type: "warning",
          duration: 5000,
          dangerouslyUseHTMLString: true,
        });
        this.audioPlayByUrl(wdd);
      }
    },
    //点击完成卸车
    unloadTruck() {
      httpDelForJson(completeXC,{id: this.orderObj.id, orderNumber: this.orderObj.orderNumber}).then((res) => {
        if(res.code===200){
          this.$notify({
            title: res.msg,
            type: "warning",
            duration: 5000,
            dangerouslyUseHTMLString: true,
          });
          if(res.data){
            this.audioPlayByUrl(ddwc);
          }
          this.queryOrder();
        } else {
          this.$notify({
            title: '网络异常，请稍后再试',
            type: "warning",
            duration: 5000,
            dangerouslyUseHTMLString: true,
          });
        }
      });
    },
    //播放语音
    audioPlayByUrl(url) {
      this.$nextTick(() => {
        this.mp3Url = url;
        let au = document.getElementById("audioMp3");
        au.currentTime = 0;
        setTimeout(()=>{
          au.play();
        },500);
      });
      // if(!this.orderAudio){
      //   this.orderAudio = document.createElement("audio");
      // }
      // this.orderAudio.currentTime = 0;
      // this.orderAudio.src = url;
      // this.orderAudio.play();
    },
    //关闭清除定时器
    dingshiqiCloseFn() {
      if (this.sonTimer1) {
        clearInterval(this.sonTimer1);
      }
    },
  },
  beforeDestroy() {
    this.dingshiqiCloseFn();
  },
};
</script>

<style scoped>
@media screen and (max-width: 901px) {
  .orderText1_img {
    color: #00ffff;
    font-size: 16px;
  }
  .orderViews {
    display: flex;
    z-index: 2;
    position: absolute;
    top: 8vh;
    left: 20vw;
  }
  .orderText1 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 45vw;
    height: 7vh;
    border-radius: 5px;
    background-color: rgba(26, 39, 83, 0.9);
    border: 1px solid lightskyblue;
    font-size: 13px;
  }
  .orderText1_1 {
    background-image: -webkit-linear-gradient(bottom, #02a2f1, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
  }
  .orderText2 {
    margin-left: 1vw;
    width: 10vw;
    line-height: 7vh;
    text-align: center;
    height: 7vh;
    border-radius: 5px;
    background-color: rgba(26, 39, 83, 0.9);
    border: 1px solid lightskyblue;
    font-size: 13px;
    font-weight: 600;
    color: lightskyblue;
    cursor: pointer;
  }
}

@media screen and (min-width: 901px) {
  .orderText1_img {
    color: #00ffff;
    font-size: 28px;
  }
  .orderViews {
    display: flex;
    z-index: 2;
    position: absolute;
    top: 8vh;
    left: 20vw;
  }
  .orderText1 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 45vw;
    height: 7vh;
    border-radius: 5px;
    background-color: rgba(26, 39, 83, 0.9);
    border: 1px solid lightskyblue;
    font-size: 20px;
  }
  .orderText1_1 {
    background-image: -webkit-linear-gradient(bottom, #02a2f1, #fafeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
  }
  .orderText2 {
    margin-left: 20px;
    width: 10vw;
    line-height: 7vh;
    text-align: center;
    height: 7vh;
    border-radius: 5px;
    background-color: rgba(26, 39, 83, 0.9);
    border: 1px solid lightskyblue;
    font-size: 22px;
    font-weight: 600;
    color: lightskyblue;
    cursor: pointer;
  }
}
</style>