<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="微电子车间公告" />
    <ShowScroll
      ref="ShowScrollRef1"
      :scrollRef="scrollbarRef1"
      :innerRef="innerRef1"
      class="message-container"
    >
      <el-scrollbar ref="scrollbarRef1" class="message-scroll">
        <div ref="innerRef1" class="message-scroll">
          <div
            class="message-row"
            v-for="(item, index) in taskRateArray"
            :key="index"
          >
            <div class="message-title">
              <span v-text="item.title" style="color: yellow"></span>
              <span v-text="item.updateTime"></span>
            </div>
            <div id="m-g-g-content-box" v-html="item.content"></div>
          </div>
        </div>
      </el-scrollbar>
    </ShowScroll>
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import {
  microelectronicWorkshopNotice,
  productionPlan,
  teamAttendance,
} from "@/api/screens";

const config = ref({});

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});
const bigScreenData: any = inject("bigScreenData");
const bsFS = bigScreenData.value.fontSize * 2;
const bsFSLH = bigScreenData.value.fontSize * 2 + 5 + "px";

const taskRateArray = ref<any[]>([]);
const loadData = async () => {
  let res = await microelectronicWorkshopNotice();
  taskRateArray.value = res.data;

  nextTick(() => {
    ShowScrollRef1.value.setActive(3);
  });
};
onMounted(async () => {
  loadData()
  const timer = setInterval(loadData, 60 * 5 * 1000) // 60秒 = 60000毫秒
  // 组件卸载时清除定时器
  onUnmounted(() => clearInterval(timer))
});

const tableHover = (data: any) => {
  // console.log("mouseover", data.row[data.columnIndex]);
};

const scrollbarRef1 = ref(null);
const ShowScrollRef1 = ref(null);
const innerRef1 = ref(null);
</script>

<style lang="scss" scoped>
.message-container {
  width: 100%;
  height: calc(100% - 25px);
}
.message-scroll {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.message-row {
  width: 100%;
  overflow: hidden;

  color: white;
  font-size: v-bind("bsFS");
  word-break: break-all;
  margin-bottom: 15px;
  border-bottom: 1px solid gray;
  .message-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: v-bind("bsFSLH");
    span {
      line-height: v-bind("bsFSLH");
    }
  }
}
</style>

<style lang="scss">
#m-g-g-content-box {
  display: flex;
  justify-content: start;
  align-items: start;
  width: 100%;
  overflow: hidden;
  line-height: v-bind("bsFSLH");
  word-break: break-all;
  font-size: v-bind("bsFS");
  flex-direction: column;
}

#m-g-g-content-box * {
  font-size: inherit;
  line-height: inherit; /* 强制继承 */
  padding: 0 !important;
  margin: 0 !important;
  word-break: break-all;
  overflow: hidden;
}
</style>
