<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="剔除列表" />
    <ShowScroll
      ref="ShowScrollRef1"
      :scrollRef="scrollbarRef1"
      :innerRef="innerRef1"
      class="message-container"
      @mouseenter="pauseScroll"
      @mouseleave="resumeScroll"
    >
      <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.workOrderCode"></span>
              <span v-text="'型号:' + item.materialModel"></span>
              <span v-text="item.stage"></span>
              <span v-text="item.updated"></span>
            </div>
            <div v-html="'管号:' + item.seqNo"></div>
            <div
              class="content-box"
              v-html="'问题描述:\t' + JSON.parse(item.remark1).content"
            ></div>
          </div>
        </div>
      </el-scrollbar>
    </ShowScroll>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, onUnmounted} from "vue";
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import { unqualifiedProductDetail } from "@/api/screens";

const props = defineProps({
  moduleId: {type: String, required: true},
});

const bigScreenData: any = inject("bigScreenData");
const taskRateArray = ref<any[]>([]);
const scrollbarRef1 = ref(null);
const ShowScrollRef1 = ref(null);
const innerRef1 = ref(null);
const scrollInterval = ref<NodeJS.Timeout | null>(null);
const isPaused = ref(false);

// 加载数据
const loadData = async () => {
  const res = await unqualifiedProductDetail(5);
  taskRateArray.value = res.data;
};

// 开始自动滚动
const startAutoScroll = () => {
  if (scrollInterval.value) clearInterval(scrollInterval.value);

  scrollInterval.value = setInterval(() => {
    if (!isPaused.value && scrollbarRef1.value) {
      // 正确访问 Element Plus Scrollbar 的 DOM
      const scrollContainer = scrollbarRef1.value.$el.querySelector('.el-scrollbar__wrap');
      if (scrollContainer) {
        // 平滑滚动到当前位置 +1
        scrollContainer.scrollTo({
          top: scrollContainer.scrollTop + 1,
          behavior: 'auto'
        });

        // 到达底部时回到顶部
        if (scrollContainer.scrollHeight - scrollContainer.scrollTop === scrollContainer.clientHeight) {
          scrollContainer.scrollTo({top: 0, behavior: 'smooth'});
        }
      }
    }
  }, 50); // 滚动速度(ms)
};
// 暂停滚动
const pauseScroll = () => {
  isPaused.value = true;
};

// 恢复滚动
const resumeScroll = () => {
  isPaused.value = false;
};

// 初始化
onMounted(async () => {
  await loadData();
  startAutoScroll();

  // 数据刷新定时器
  const dataTimer = setInterval(loadData, 5 * 60 * 1000);
  onUnmounted(() => {
    clearInterval(dataTimer);
    if (scrollInterval.value) clearInterval(scrollInterval.value);
  });
});
</script>

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

  &:hover {
    cursor: default;
  }
}

.message-scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.message-row {
  padding: 10px 0;
  border-bottom: 1px solid #444;
  color: white;
  transition: background 0.3s;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .message-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;

    span {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .content-box {
    color: #99f6cc;
    line-height: 1.5;
  }
}
</style>
