<template>
  <div :class="`${prefixCls} card`" ref="MySysPost">
    <header>
      <LjHeader class="flx-1" :title="$t('business.home.layout.sysPost')" />
      <div class="control flx-center">
        <el-button class="refresh-btn" text round @click="toRefresh">
          <template #icon>
            <i class="iconfont iconRefresh_light"></i>
          </template>
        </el-button>
        <el-button class="default-btn" text round @click="toSendSysPost">
          <template #icon>
            <i class="iconfont iconPlus_light"></i>
          </template>
        </el-button>
      </div>
    </header>
    <main class="flx-col">
      <div v-if="loading">
        <el-skeleton animated>
          <template #template>
            <el-skeleton-item variant="text" style="height: 64px" />
            <el-skeleton-item variant="text" class="mt-8" style="height: 64px" />
            <el-skeleton-item variant="text" class="mt-8" style="height: 64px" />
          </template>
        </el-skeleton>
      </div>
      <div v-else>
        <div v-if="!dataList.length" class="empty text-disable">暂没有公告</div>
        <div v-else :class="`${prefixCls}__grid`">
          <section :class="`${prefixCls}__post-item`" v-for="(item, index) in dataList" :key="index">
            <header class="flx-start">
              <div class="flx-col flx-grow-1">
                <div class="name flx-justify-between">
                  <div>
                    <span class="text-f-c text-secondary-text">
                      {{ item.opemp }}
                    </span>
                  </div>
                  <div class="tag-list mt-2">
                    <span class="text-f-c text-secondary-text">
                      {{ formatToDate(item.opdate, "YYYY-MM-DD HH:mm") }}
                    </span>
                  </div>
                </div>
                <div class="flx">
                  <span class="text-body-m text-primary-text break-word">
                    {{ item.dscrp }}
                  </span>
                </div>
                <div class="flx-end">
                  <span class="text-secondary-text">
                    <i class="iconfont iconSend_light" />
                  </span>
                  <span class="text-f-c text-secondary-text">
                    {{ item.departmentname }}
                  </span>
                </div>
              </div>
            </header>
          </section>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts" name="home_widget-mycust">
import { ref, onMounted, onUnmounted, nextTick, inject } from "vue";
import { RefreshRight, User } from "@element-plus/icons-vue";
import LjHeader from "@/components/LjHeader/index.vue";
import { useDesign } from "@/hooks/useDesign";
import { useI18n } from "vue-i18n";
import { numberFormat } from "@/utils/index";
import { formatToDate } from "@/utils/dateUtil";

const { prefixCls } = useDesign("home_widget-mySysPost");
const { t } = useI18n();
const MySysPost = ref();
const loading = ref();
const emit = defineEmits(["getSysPostList", "sendSysPost"]);
const dataList = inject("sysPostList", ref<any>([]));

// 刷新
const toRefresh = async () => {
  loading.value = true;
  await refresh(() => {
    nextTick(() => {
      setTimeout(() => {
        loading.value = false;
      }, 400);
    });
  });
};

const refresh = async (callback?: any) => {
  emit("getSysPostList", () => callback && callback());
};

const toSendSysPost = async () => {
  emit("sendSysPost");
};

/**
 * @description 根据容器宽邸,自适应布局
 */
const adaptiveFunc = () => {
  let _width = MySysPost.value.offsetWidth;
  console.log("_width :>> ", _width);
  let cls = "";

  switch (true) {
    case _width >= 1200:
      cls = " adaptive_4"; // 25
      break;
    case _width >= 992:
      cls = " adaptive_3"; // 33.33
      break;
    case _width >= 768:
      cls = " adaptive_2"; // 50
      break;
    default:
      cls = " adaptive_1"; // 100
      break;
  }
  let classArray = MySysPost.value.className.split(" ");
  let index = classArray.findIndex((item: any) => item.indexOf("adaptive") > -1);
  if (index > -1) {
    classArray.splice(index, 1);
  }
  MySysPost.value.className = classArray.join(" ");
  MySysPost.value.className += cls;
};

onMounted(() => {
  toRefresh();

  adaptiveFunc();
  window.addEventListener("resize", adaptiveFunc);
});

onUnmounted(() => {
  window.onresize = null;
  window.removeEventListener("resize", adaptiveFunc);
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
