<template>
  <div style="padding-top: 13vw">
    <TopNav navTitle="指令详情" :showRight="false" :showLeft="true" />
    <div class="detailBox">
      <div class="detailInfo">
        <div class="detailInfo-left">
          <!-- <div class="photo"><img :src="detailInfo.carImg" alt=""></div> -->
          <div class="photo"><img :src="detailInfo.photo" alt=""></div>
          <div class="title">预警</div>
        </div>
        <div class="detailInfo-right">
          <div class="info-item"><van-icon name="coupon-o" />{{detailInfo.plateNumber}}</div>
          <div class="info-item"><van-icon name="manager-o" />{{detailInfo.userName}}</div>
          <div class="info-item"><van-icon name="coupon-o" />{{detailInfo.checkName}}</div>
          <div class="info-item">
            <van-icon name="location-o" />{{detailInfo.activityAddress}}
          </div>
          <div class="info-item">
            <van-icon name="clock-o" />{{detailInfo.time}}
          </div>
        </div>
      </div>
      <div class="liucheng">
        <Steps :data="stepsData">
          <template v-slot:default="{ scope }">
            <div class="content">
              <div class="cont_l" v-if="scope.isQsStatus == '01'">
                <span class="triangleleft"></span>
                <div class="status">待签收</div>
                <div class="btns">
                  <span @click="handelEvents('reback')">拒绝</span>
                  <span @click="handelEvents('receive')">签收</span>
                </div>
              </div>
              <div class="cont_l" v-if="scope.isQsStatus == '02'">
                <span class="triangleleft"></span>
                <div class="text">已签收</div>
                <div class="text">
                  <van-icon name="manager-o" />周瓜皮 特警大队
                </div>
                <div class="text">
                  <van-icon
                    name="location-o"
                  />成都市武侯区高新成都市武侯区高新公安局公安局
                </div>
              </div>
              <div class="cont_l" v-if="scope.isQsStatus == '03'">
                <span class="triangleleft"></span>
                <div class="text">
                  <van-icon name="manager-o" />周瓜皮 特警大队
                </div>
                <div class="text">
                  <van-icon
                    name="location-o"
                  />成都市武侯区高新成都市武侯区高新公安局公安局
                </div>
              </div>
            </div>
          </template>
        </Steps>
      </div>
    </div>
  </div>
</template>

<script  setup>
import { ref, onMounted } from "vue";
import TopNav from "../../../components/topNav.vue";
import Steps from "../../../components/Steps.vue";
import { updateDetail,getyjzlInfoDetail } from "../../../api/checkponit.js";
import { useRouter, useRoute } from "vue-router";
import { Form } from "vant";
const route = useRoute();
const router = useRouter();
const detailInfo = ref({})
const stepsData = ref([
  { time:  route.query.time, isQsStatus: "01" },
]);
onMounted(() => {
  detailInfo.value = route.query
  getInfoDetail('01')
});

// 签收
function handelEvents(val){
  switch(val){
    case 'receive':
      getInfoDetail('02')
      break
    case 'reback':
      break
  }

}

// 指令详情
function getDetail(zlId){
  getyjzlInfoDetail(zlId).then(res=>{
  })
}

function getInfoDetail(zlztdm){
  let params = {
    zlztsj:route.query.time,
    zlztddxz:route.query.activityAddress,
    zlztddjd:route.query.jd,
    zlztddwd:route.query.wd,
    zlid:route.query.id,
    zlztbmdm:JSON.parse(window.localStorage.getItem("userInfo")).deptList[0].deptCode,
    zlztbmmc:JSON.parse(window.localStorage.getItem("userInfo")).deptList[0].deptName,
    zlztrysfzh:route.query.sfzh,
    zlztryxm:route.query.userName,
    ssfxjmc:'',
    ssfxjdm:'',
    ssdszmc:'',
    ssdszdm:'',
    zlztdm:zlztdm,
  }
  updateDetail(params).then(res=>{
    getDetail(route.query.id)
  })
}
</script>

<style lang="scss" scoped>
.detailBox {
  background: #e9e9e9;
  height: calc(100vh - 13vw);
  padding: 2vw 4vw;
  box-sizing: border-box;
  .detailInfo {
    display: flex;
    width: 100%;
    background: #fff;
    font-size: 14px;
    padding: 2vw;
    box-sizing: border-box;
    .detailInfo-left {
      margin-right: 4vw;
      .photo {
        width: 90px;
        height: 110px;
        border: 1px solid #e9e9e9;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .title {
        text-align: center;
        line-height: 8vw;
        color: #000;
      }
    }
    .detailInfo-right {
      flex: 1;
      .info-item {
        line-height: 7vw;
        .van-icon {
          margin-right: 2vw;
        }
      }
    }
  }
  .liucheng {
    .content {
      padding: 2vw;
      box-sizing: border-box;
      .cont_l {
        position: relative;
        padding: 2vw;
        box-sizing: border-box;
        background: #fff;
        .status {
          line-height: 10vw;
          border-bottom: 1px solid #ccc;
        }
        .btns {
          display: flex;
          span {
            flex: 1;
            text-align: center;
            margin-top: 4vw;
            color: #3373fa;
          }
          span:nth-child(1) {
            color: red;
          }
        }
        .triangleleft {
          position: absolute;
          left: -16px;
          top: 46%;
          display: inline-block;
          width: 0;
          height: 0;
          border: 8px solid transparent;
          border-right-color: #fff;
        }
        .text {
          line-height: 7vw;
          .van-icon {
            margin-right: 2vw;
          }
        }
      }
    }
  }
}
::v-deep .main .item .item_l .icon {
  top: 50%;
}
::v-deep .main .item .item_l {
  padding-top: 13%;
  box-sizing: border-box;
}
</style>