<template>
  <div>
    <el-table :data="notices"
              ref="table"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" >
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column prop="title" label="内容">
        <template #default="{ row }">
          <div v-html=row.remark></div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="240" label="下发时间" prop="created_at"></el-table-column>
    </el-table>

<!--    <div style="padding: 10px;">-->
<!--      <el-pagination-->
<!--          @current-change="e => {-->
<!--            select.page = e;-->
<!--            getUsers();-->
<!--          }"-->
<!--          :current-page.sync="select.page"-->
<!--          :page-size="select.page_size"-->
<!--          layout="prev, pager, next, jumper"-->
<!--          :total="total">-->
<!--      </el-pagination>-->
<!--    </div>-->
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/user"
import { useNoticeStore } from "@/store/notice"
import { ref, reactive, computed, onMounted, nextTick, onUpdated } from 'vue';

const userStore = useUserStore()
const noticeStore = useNoticeStore()
const total = ref(0)
const notices = computed(() => noticeStore.notice['notice'])
const loading = ref(false)
const table = ref(null)

const toDataUrl = (el) => {
  window.open(`${el.getAttribute('data-url')}?auth_token=${userStore.authToken}`, '_blank');
};

onUpdated(async () => {
  await nextTick();
  table.value.$el.querySelectorAll("[data-url]").forEach(el => {
    // 移除之前可能添加的监听器
    if (el._clickHandler) {
      el.removeEventListener("click", el._clickHandler);
    }
    // 创建一个新的监听器并存储在元素上
    el._clickHandler = () => {
      toDataUrl(el);
    };
    // 添加新的监听器
    el.addEventListener('click', el._clickHandler);
  });
});
</script>

<style scoped lang="scss">
</style>
