<template>
  <div>
    <MOSTY.FromPage :title="'综合检查隐患列表'" @closeDialog="CloseEvent">
      <template #content>
        <div class="body-box">
          <ul>
            <li v-for="item in list" :key="item" @click="openxq(item)">
              <div class="picbox">
                <!-- <el-image v-if="item.picsUrl"  :src="item.picsUrl" fit="scale-down" /> -->
                <img v-if="item.picsUrl" :src="item.picsUrl" />
                <img v-else :src="getImgUrl('indexImages/zwtp.jpg')" alt="" style="height:100%;width:auto;">
                <!-- <dict-tag :options="D_DBZ_YHDJ" :value="item.pitfallLevel" :tag="false"
                  style="color: #fff !important;" /> -->
                <span class="status red" v-if="item.pitfallLevel == '1'"> 重大</span>
                <span class="status orange" v-if="item.pitfallLevel == '2'"> 较大</span>
                <span class="status yellow" v-if="item.pitfallLevel == '3'"> 一般</span>
                <span class="status blue" v-if="item.pitfallLevel == '4'"> 轻微</span>
              </div>
              <div class="bottomContent">
                <span style="color:red;">{{ item.nextstaename }}</span>
                <span style="color:#000;">{{ item.pitfallDescribe }}</span>
                <span style="color:#939191;">{{ item.belongDeptname }}</span>
              </div>
            </li>
          </ul>
        </div>
      </template>
      <template #footer>
        <router-link to="/fxgk/jcss/zhjc" style="margin-left: 10px;">
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </router-link>

      </template>
    </MOSTY.FromPage>
    <div class="dialog-box" v-if="yhjdShow">
      <!-- <Danger @changePage="changePage" :editObj="editObj.editObj"></Danger> -->
      <Ckyhjd @changePage="changePage" :editObj="editObj.editObj" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { getImgUrl } from "@/utils/tools.js"
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import Ckyhjd from "./components/ckyhjd.vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const store = useStore();
const route = useRoute();
const yhjdShow = ref(false)
const editObj = reactive({
  editObj: null
})
const { proxy } = getCurrentInstance();
const { D_DBZ_YHDJ } = proxy.$dict("D_DBZ_YHDJ");
const list = ref([])
const listQuery = ref({
  pageSize: 1000,
  pageCurrent: 1
})
onMounted(() => {
  listQuery.value.dxmHzid = route.query.zhjcId
  getxqData()
});
function getxqData() {
  getApi(listQuery.value, '/mosty-jcgl/overallCheckPitfallHz/getXPitfallPage').then((res) => {
    if (res.records) {
      list.value = res.records
      list.value.forEach(item => {
        if (item.pics) {
          getApi({}, `/mosty-base/minio/file/download/${item.pics}`).then(
            (res) => {
              item.picsUrl = res.url
            }
          );
        }
      })
    }
  })
}

//隐患详情
function openxq(val) {
  editObj.editObj = val
  yhjdShow.value = true
}
function changePage(e) {
  yhjdShow.value = false
}
function CloseEvent() {
  let arr = store.getters.tagsViewList;
  for (let i = 0; i < arr.length; i++) {
    const e = arr[i];
    if (e.path == '/fxgk/jcss/zhjczgqk') {
      arr.splice(i, 1);
    }
  }
  router.push("/fxgk/jcss/zhjc");
}
</script>

<style lang="scss" scoped>
.dialog-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
}

.title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #0f3916;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-icon {
    cursor: pointer;
  }
}

.body-box {
  height: 80vh;

  overflow-y: scroll;

  >ul {
    display: flex;
    flex-wrap: wrap;

    >li {
      width: 200px;
      background-color: #e7e8e7;
      border: 1px solid var(--el-color-primary);
      margin: 10px;
    }
  }
}

.picbox {
  position: relative;
  height: 224px;
  width: 200px;

  >img {
    height: 100%;
    object-fit: scale-down;
    width: 198px;
    margin: 0;
    padding: 0;
  }

  .status {
    color: white;
    font-size: 12px;
    padding: 0 4px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: 0px;
    top: 0px;
  }
}

.bottomContent {

  border-radius: 0 0 4px 4px;
  height: 60px;

  >span {
    width: 100%;
    text-align: center;
    display: block;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.red {
  background: red;
}

.orange {
  background: orange;
}

.yellow {
  background: #e7e71c;
}

.blue {
  background: blue;
}
</style>
