<template>
  <div class="aqdt-show-container">
    <div class="aqdt-show-content">
      <div style="text-align: center;font-size: 30px;font-weight: bolder;padding-bottom: 10px;">{{ row.name }}</div>
      <div class="aqdt-divider">
        <div class="title-left">{{ titleObj[level] || '安全头条' }}</div>
      </div>
      <div class="aqdt-show-content-text">
        <div class="item-container" v-for="item in aqdtArr" @click="handleClickDetail(item)">
          <span class="item-name">
            <span class="item-point"></span>
            <span>{{ item.name }}</span>
          </span>
          <span class="item-time">{{ item.time && item.time.slice(0, 10) }}</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { postApi } from '@/api/tobAcco_api.js';
const route = useRoute();
const router = useRouter();

const row = ref({});
const level = ref('01');
const titleObj = ref({
  '01': '安全头条',
  '02': '安全要闻',
  '03': '基层动态',
})
/** 安全动态内容 */
const aqdtArr = ref([]);
// 点击查看详情
const handleClickDetail = (val) => {
  router.push({
    name: 'dutyBook/aqdt/show',
    params: {
      id: val.id,
      row: JSON.stringify({
        id: val.id,
        name: val.name,
        time: val.time,
        content: val.content,
        otherFile: val.otherFile,
        level: level.value
      })
    }
  })
}

onMounted(() => {
  const { query, params } = route;
  level.value = params.level;
  postApi({}, `/mosty-jcgl/securityDynamics/querySecurityDynamicsInfo?type=${1}&level=${level.value}`).then((res) => {
    aqdtArr.value = Array.isArray(res?.records) ? res.records : []
  }).catch(err => {
  })
});
</script>

<style lang="scss" scoped>
.aqdt-show-container {
  background-color: #fff;
  color: #000;
  padding: 10px;

  .aqdt-show-content {
    height: calc(100vh - 155px);
    padding: 15px;
    border: 1px solid #ebeef5;
    overflow-y: auto;

    .aqdt-divider {
      width: 100%;
      background-color: #9bbc81;
      color: #fff;

      .title-left {
        width: 200px;
        padding: 2px 0;
        text-align: center;
        background-color: #368d77;
      }
    }

    .aqdt-show-content-text {
      margin-top: 10px;
      height: calc(100% - 50px);
      overflow-y: auto;

      .item-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 3px;
        cursor: pointer;

        &:hover {
          background-color: #4a545e0c;
        }

        .item-name {
          display: inline-block;
          width: calc(100% - 100px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          .item-point {
            display: inline-block;
            width: 4px;
            height: 4px;
            background-color: #368d77;
            margin-right: 10px;
            margin-bottom: 3px;
          }
        }

        .item-time {
          color: #333;
        }
      }
    }

  }
}
</style>
