<template>
  <div style="padding-top: 14vw">
    <TopNav navTitle="警情详情" :showRight="false" :showLeft="true" />
    <div class="ry_info">
      <List :item="jqDetail" v-if="jqDetail" />
    </div>
    <Steps :data="stepsData">
      <template v-slot:default="{ scope }">
        <div class="content">
          <div class="cont_l">
            <div class="text title">{{ scope.content }}</div>
            <div class="text">执行人:{{ scope.cjPoliceName }}</div>
            <div class="text">执行部门:{{ scope.cjOrgName }}</div>
            <div class="text">状态:{{ scope.statusName }}</div>
          </div>
        </div>
      </template>
    </Steps>
    <van-empty
      description="没有警情信息"
      image="default"
      v-if="stepsData.length <= 0 && showEmpty"
    />
  </div>
</template>
<script setup>
import axios from "axios";
import List from "../../../components/xzjqList.vue";
import TopNav from "../../../components/topNav.vue";
import Steps from "../../../components/Steps.vue";
import { getJqInfo } from "../../../api/jqxx";
import { onMounted, ref } from "vue";
import { baseUrl2 } from "../../../utils/request";
const route = useRoute();
const jqDetail = ref();
const stepsData = ref([]);
const showEmpty = ref(false);
onMounted(() => {
  jqDetail.value = JSON.parse(route.query.item);
  _getCjList(jqDetail.value.incidentCode);
});
//获取处警记录
function _getCjList(incidentCode) {
  axios
    .get(`${baseUrl2}/xz1Api/api/alarm/cj/${incidentCode}`, {})
    .then((res) => {
      if (res.data && res.data.data.length > 0) {
        for (let i = 0; i < res.data.data.length; i++) {
          let item = res.data.data[i];
          item.time = item.cjTime.substring(0, item.cjTime.length - 3);
        }
        res.data.data.sort(
          (a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()
        );
        stepsData.value = res.data.data;
      } else {
        showEmpty.value = true;
      }
    })
    .catch((err) => {
      showEmpty.value = true;
    });
}
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.ry_info {
  margin: 2vw 3vw;
  border-radius: 2vw;
  @include jrtz_fill_color($jrtz-fill-color-theme);
}
.content {
  display: flex;
  padding-bottom: 20px;
  .cont_l {
    margin-right: 16px;
    .text {
      line-height: 5.5vw;
    }
    .title {
      @include font_size($font_medium);
      font-weight: 550;
    }
  }
}
</style>