<template>
  <div class="dialogBox" v-loading="loading">
    <div class="title">
      <span class="mc">{{ title }}</span>
      <span class="close" @click="close">×</span>
    </div>
    <ul class="warningList" ref="gjyjList">
      <li v-for="item in warningList" :key="item.id">
        <div>打卡人：{{ item.dkrXm }}</div>
        <div>必到点位置：{{ item.bddMc }}</div>
        <div>打卡开始时间：{{ item.dkKsSj }}</div>
        <div class="fj_box">
          <div>打卡开始附件：</div>
          <el-image
            :append-to-body="true"
            :preview-src-list="[
              `/mosty-api/mosty-base/minio/image/download/${item.dkKsFj}`
            ]"
            style="width: 75px; height: 75px"
            :src="`/mosty-api/mosty-base/minio/image/download/${item.dkKsFj}`"
            fit="cover"
            lazy
          />
        </div>
        <div>打卡结束时间：{{ item.dkJsSj }}</div>
        <div class="fj_box">
          <div>打卡结束附件：</div>
          <el-image
            :append-to-body="true"
            :preview-src-list="[
              `/mosty-api/mosty-base/minio/image/download/${item.dkJsFj}`
            ]"
            style="width: 75px; height: 75px"
            :src="`/mosty-api/mosty-base/minio/image/download/${item.dkJsFj}`"
            fit="cover"
            lazy
          />
        </div>
      </li>
      <el-empty
        description="没有数据"
        :image-size="0.1"
        v-if="!loading && warningList.length <= 0"
      />
    </ul>
  </div>
</template>
<script setup>
import YjItem from "@/views/largeScreen/home/components/yjItem.vue";
import { qcckPost, qcckGet, qcckPut, qcckDelete } from "@/api/qcckApi.js";
import {
  ref,
  onMounted,
  getCurrentInstance,
  defineEmits,
  defineProps,
  watch
} from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_YJLX } = proxy.$dict("D_BZ_YJLX");
const warningList = ref([]); //预警列表数据
const pageCurrent = ref(1);
const pageTotal = ref(0);
const yjInfo = ref(null); //预警信息
const gjyjList = ref(null); //预警列表数据
const loading = ref(false);
//参数传递
const props = defineProps({
  //某条预警详情
  info: {
    type: Object,
    default: {}
  },
  //标题数据
  title: String
});
const emit = defineEmits(["close"]);
onMounted(() => {
  yjInfo.value = props.info;
  // _getSelectTrack(props.info.id);
});
// 监听视频地址变化
watch(
  () => props.info,
  (val) => {
    pageCurrent.value = 1;
    yjInfo.value = val;
    _getSelectTrack(val.id);
  },
  { immediate: true, deep: true }
);
//关闭
function close() {
  emit("close", false);
}

//获取轨迹预警列表
function _getSelectTrack(id) {
  loading.value = true;
  qcckGet({ xfbbId: id }, "/mosty-yjzl/tbZdxlFgdwBddxlrwJl/getRwjlByXfbbId")
    .then((res) => {
      loading.value = false;
      warningList.value = res;
    })
    .catch((err) => {
      loading.value = false;
    });
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.dialogBox {
  ul.warningList {
    height: calc(100vh - 198px);
    overflow: hidden;
    overflow-y: auto;
    padding: 7px 10px;
    box-sizing: border-box;
    li {
      margin-bottom: 10px;
      border: 1px solid #14347b;
      background: #0f2f59;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
    }
    .photo {
      width: 60px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
//加载时 取消背景
::v-deep .el-loading-mask {
  background-color: transparent !important;
}
.fj_box {
  display: flex;
  align-items: flex-start;
}
</style>
