<template>
  <el-tabs v-model="active">
    <el-tab-pane label="平台公告" name="first" lazy>
      <seamless-scroll
        :list="platformAnnouncementList"
        hover
        class="scroll"
        :step="0.5"
        :single-wait-time="1000"
        :single-height="24"
        :model-value="!data.viewDialog.visible && active === 'first'"
      >
        <div
          v-for="(item, index) in platformAnnouncementList"
          :key="index"
          class="line-1 item"
          @click="fnPlatformAnnouncementView(item.NOTICE_ID)"
        >
          {{ item.SYNOPSIS }}
        </div>
      </seamless-scroll>
    </el-tab-pane>
    <el-tab-pane label="企业公告" name="second" lazy>
      <seamless-scroll
        :list="corporateAnnouncementList"
        hover
        class="scroll"
        :step="0.5"
        :single-wait-time="1000"
        :single-height="24"
        :model-value="!data.viewDialog.visible && active === 'second'"
      >
        <div
          v-for="(item, index) in corporateAnnouncementList"
          :key="index"
          class="line-1 item"
          @click="fnCorporateAnnouncementView(item.NOTICECORP_ID)"
        >
          {{ item.SYNOPSIS }}
        </div>
      </seamless-scroll>
    </el-tab-pane>
  </el-tabs>
  <announcement-view
    v-model:visible="data.viewDialog.visible"
    :info="data.viewDialog.info"
  />
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  getCorporateAnnouncement,
  getCorporateAnnouncementView,
  getPlatformAnnouncement,
  getPlatformAnnouncementView,
} from "@/request/index.js";
import useListData from "@/assets/js/useListData.js";
import AnnouncementView from "./announcement_view.vue";
import { Vue3SeamlessScroll as SeamlessScroll } from "vue3-seamless-scroll";

const active = ref("first");
const { list: platformAnnouncementList } = useListData(
  getPlatformAnnouncement,
  { otherParams: { STATUS: 1 } }
);
const { list: corporateAnnouncementList } = useListData(
  getCorporateAnnouncement,
  { otherParams: { STATUS: 1 } }
);
const data = reactive({
  viewDialog: {
    visible: false,
    info: {},
  },
});
const fnPlatformAnnouncementView = async (NOTICE_ID) => {
  const resData = await getPlatformAnnouncementView({ NOTICE_ID });
  data.viewDialog.visible = true;
  data.viewDialog.info = resData.pd;
};
const fnCorporateAnnouncementView = async (NOTICECORP_ID) => {
  const resData = await getCorporateAnnouncementView({ NOTICECORP_ID });
  data.viewDialog.visible = true;
  data.viewDialog.info = resData.pd;
};
</script>

<style scoped lang="scss">
.scroll {
  height: 120px;
  overflow: hidden;

  .item {
    padding: 4px 0;
    font-size: 14px;
    cursor: pointer;

    &:hover {
      color: #409eff;
    }
  }
}
</style>
