<template>
  <div class="notices-box">
    <div v-if="list.length > 0">
      <div v-for="(item, index) in list" :key="index" class="notices">
        <div class="notices-time">
          <h-img
            :src="
              !item.userLook ? 'perfil/email_.png' : 'perfil/email_icon_2.png'
            "
          />
          <span>{{ fomartDate(item.createdAt) }}</span>
        </div>
        <div
          style="padding: 0.2rem 0; overflow: hidden"
          :style="{ maxHeight: item.showAll ? 'none' : '3rem' }"
          v-html="otherImg(item.content)"
          @click="handleClick"
        ></div>
        <div class="notices-lookAll" @click.stop="changeLook(index)">
          <span>{{ !item.showAll ? "Mostrar Todos" : "Ocultar" }}</span>
          <h-img
            style="width: 0.2rem; height: 0.3rem"
            type="local"
            :class="item.showAll ? 'rote' : ''"
            src="base/jt.png"
          />
        </div>
      </div>
    </div>
    <div class="no-data" v-if="list.length == 0">
      <h-img type="local" src="base/bg_di1.png" />
      Opa! Ainda não há dados!
    </div>
    <h-table-paging
      :total="total"
      v-if="list.length > 0"
      :page-size="pageInfo.pageSize"
      @on-previous="previous"
      @on-nextPage="nextPage"
    />
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from "vue";
import socketApi from "@/socket/socketApi";
import { fomartDate, otherImg, handleDomClick } from "@/utils";
import { useUserStore } from "@/stores/modules/user";
import http from "@/https/index";
const userStore = useUserStore();
const list = ref<Array<any>>([]);
const total = ref<number>(0);
const emit = defineEmits(["update-parent-value"]);
const pageInfo = ref<any>({
  pageIndex: 1,
  pageSize: 10,
});

async function nextPage(pageNum: number) {
  pageInfo.value.pageIndex = pageNum;
  await getNotice();
}
async function previous(pageNum: number) {
  pageInfo.value.pageIndex = pageNum;
  await getNotice();
}

const handleClick = (event: any) => {
  handleDomClick(event);
};

const getNotice = async () => {
  const res = await http.getNotice(pageInfo.value);
  if (res.code == 0) {
    total.value = res.data.notices.total || 0;
    list.value = [...res.data.notices.rows] || [];
    for (let i = 0; i < list.value.length; i++) {
      list.value[i].showAll = false;
      if (list.value[i].users && list.value[i].users.length > 0) {
        let data = list.value[i].users.filter(
          (item: any) => item.uid === userStore.userInfo.uid
        );
        console.log(data, "filterData");
        if (data.length > 0) {
          list.value[i].userLook = true;
        } else {
          list.value[i].userLook = false;
        }
      } else {
        list.value[i].userLook = false;
      }
    }
    console.log(list.value, "list.value");
  }
};
const changeLook = async (index: number) => {
  list.value[index].showAll = !list.value[index].showAll;
  console.log(list.value[index], "list.value[index]");
  if (list.value[index].userLook) return;
  http.setNoticeRead({ _id: list.value[index]._id }).then((res: any) => {
    list.value[index].userLook = true;
    console.log(res, "已读取");
    emit("update-parent-value", 1);
  });
};
onMounted(async () => {
  await getNotice();
});
</script>
<style lang='scss' scoped>
.notices-box {
  .no-data {
    text-align: center;
    font-size: 0.4rem;
  }
  .notices {
    padding: 0.2rem;
    margin: 0.2rem;
    border-radius: 0.2rem;
    overflow: hidden;
    background-color: #092727;
    position: relative;
    &-lookAll {
      position: absolute;
      right: 0.2rem;
      bottom: 0.1rem;
      font-size: 0.3rem;
      display: flex;
      align-items: center;
      span {
        margin-right: 0.1rem;
      }
      .rote {
        transform: rotate(-90deg);
      }
    }
    &-time {
      display: flex;
      align-items: center;
      justify-content: left;
      font-size: 0.3rem;
      color: #f3e615;
    }
  }
}
</style>