<template>
  <el-tabs type="border-card" v-model="activeName" class="tabs" @tab-click="handleClick">
    <el-tab-pane v-for="item in noticesTypes" :key="item.id" :label="item.name" :name="item.id">
      <el-table :data="currentTableData" class="mt-3" v-loading="loading">
        <el-table-column prop="created_at" width="200" label="时间" />
        <el-table-column prop="title" label="标题">
          <template #default="scope">
            <el-tag type="success" class="title" size="default" effect="dark" @click="titleClick(scope.row)">{{
              scope.row.title }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </el-tab-pane>
  </el-tabs>
  <el-dialog draggable v-model="centerDialogVisible" :title="notice.title" width="30%" center>
    <div class="flex flex-wrap break-all" v-html="notice.content"></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="readNotice">我知道了</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {
  useGetList
} from '@/hook/curd/useGetList';
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { noticesTypesList, noticeDetail, noticeRead, noticePopup } from '@/api/notice/index';
const api = 'system/notices/notice/mine';
const { data, query, search, reset, loading } = useGetList(api, true);
const currentTableData = computed(() => data.value?.data);
const centerDialogVisible = ref(false)
const notice = ref({})
const noticesTypes = ref<object>([]);
const activeName = ref(0)

const readNotice = () => {
  noticeRead(notice.value.id).then(res => {
    console.log(res);
    search();
  })
  centerDialogVisible.value = false
}

const initNoticeOtion = (params: object) => {
  noticesTypesList(params).then(res => {
    noticesTypes.value = res.data
    noticesTypes.value.unshift({ id: 0, name: '全部' })
  })
}

const titleClick = (e) => {
  noticeDetail(e.id).then(res => {
    console.log(res);
    centerDialogVisible.value = true;
    notice.value.id = res.data.id
    notice.value.title = res.data.title
    notice.value.content = res.data.content
  })
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event, tab.props.name)
  activeName.value = Number(tab?.props?.name)
  query.value.notice_type_id = tab.props.name;
  search();
}

onMounted(() => {
  noticePopup().then(res => {
    if (res.data.id) {
      centerDialogVisible.value = true;
      notice.value.id = res.data.id
      notice.value.title = res.data.title
      notice.value.content = res.data.content
    }
  })
  query.value.notice_type_id = activeName;
  search();
  initNoticeOtion({})
});
</script>
<style>
.tabs>.el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.title {
  cursor: pointer;
}
</style>
