<template>
  <div class="box">
    <!-- <section class="nav">
		<section @click="handleGoToPage('/dutyBook/qycy/SafetyDiscussion', '安全大讨论')">安全论坛</section>
		<section @click="gotoyh">隐患报告</section>
		<section @click="handleGoToPage('/dutyBook/qycy/safetySuggest', '安全建议')">安全建议</section>
	</section> -->
    <div class="aqjs-section">
      <div class="aqjs-card aqlt" style="background-color: #E0FAE8;"
        @click="handleGoToPage('/dutyBook/qycy/SafetyDiscussion', '安全大讨论')">
        <div class="aqjs-title-container">
          <span>安全论坛</span>
          <span></span>
        </div>
        <div class="aqjs-content">
          <div v-for="(item, index) in aqltArr" class="content-text">
            <span>{{ index + 1 }}.</span>
            <span style="margin-left: 4px;" :title="item.title">{{ item.title }}</span>
          </div>
        </div>
      </div>
      <div class="aqjs-card" style="background-color: #FDF0E5;" @click="gotoyh">
        <div class="aqjs-title-container">
          <span>隐患报告</span>
          <span></span>
        </div>
        <div class="aqjs-content">
          <div v-for="(item, index) in yhbgArr" class="content-text">
            <span>{{ index + 1 }}.</span>
            <span :title="item.observedescribe" style="margin-left: 4px;">{{ item.observedescribe }}</span>
          </div>
        </div>
      </div>
      <div class="aqjs-card" style="background-color: #E3F2FD;"
        @click="handleGoToPage('/dutyBook/qycy/safetySuggest', '安全建议')">
        <div class="aqjs-title-container">
          <span>安全建议</span>
          <span></span>
        </div>
        <div class="aqjs-content">
          <div v-for="(item, index) in aqjyArr" class="content-text">
            <span>{{ index + 1 }}.</span>
            <span style="margin-left: 4px;" :title="item.jycontent">{{ item.jycontent }}</span>
          </div>
        </div>
      </div>
    </div>
    <Warning />
  </div>

</template>

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


/** 安全论坛 */
const aqltArr = ref([])
/** 隐患报告 */
const yhbgArr = ref([])
/** 安全建议 */
const aqjyArr = ref([])
const handleGoToPage = (_url, _title) => {
  router.push(_url)

  // if (_url) {
  // 	store.commit(
  // 		"app/addTagsViewList",
  // 		{
  // 			fullPath: _url,
  // 			meta: {
  // 				meta: {
  // 					title: _title
  // 				}
  // 			},
  // 			name: _url,
  // 			params: {},
  // 			path: _url,
  // 			query: {},
  // 			title: _title
  // 		},
  // 		{
  // 			immediate: true
  // 		}
  // 	);
  // }
}
function gotoyh () {
  router.push('/fxgk/yhbg')
}
/** 设置-安全论坛 */
const setAqdtl = () => {
  const params = {
    pageSize: 3,
    pageCurrent: 1,
  }
  getApi(params, "/mosty-jcgl/discuss/getPageList").then((res) => {
    aqltArr.value = Array.isArray(res?.records) ? res.records : [];
  })
}
/** 设置-隐患报告 */
const setYhbg = () => {
  const params = {
    pageSize: 3,
    pageCurrent: 1,
    disposeType: ['3']
  }
  postApi(params, `/mosty-jcgl/safetyobserve/getPageList`).then((res) => {
    yhbgArr.value = Array.isArray(res?.records) ? res.records : [];

  })
}
/** 设置-安全建议 */
const setAqjy = () => {
  const params = {
    pageSize: 3,
    pageCurrent: 1,
  }
  postApi(params, `/mosty-jcgl/suggest/querySuggestList`).then((res) => {
    aqjyArr.value = Array.isArray(res?.records) ? res.records : [];

  })
}
onMounted(() => {
  setAqdtl()
  setYhbg()
  setAqjy()
});
</script>

<style scoped lang="scss">
.box{
  display: flex;
  flex-direction: column;
  height: 100%;
  // overflow: auto;
}
.aqjs-section {
  height: 125px;
  display: flex;
  background-color: #fff;
  margin-bottom: 5px;
  padding: 10px;
}

.aqjs-card {
  // flex: 1;
  width: 33%;
  /* 这将确保每个卡片占据相等的宽度 */
  padding: 5px 8px;
  box-sizing: border-box;
  margin: 5px;
  border-radius: 4px;
  color: black;
  cursor: pointer;

  // text-align: center;
  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }

  &.aqlt {
    background-color: #29cae0;

  }

  .aqjs-title-container {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #cccccc22;
  }

  .aqjs-content {
    min-height: 62px;
  }

  .content-text {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 可选：为h3标签添加一些样式 */
.aqjs-card h3 {
  margin-top: 0;
  /* 去除顶部外边距 */
}
</style>
