<script setup name='infoCenter'>
import { ref, reactive, onMounted } from 'vue'
import { getInfoList, infoReceived } from '@/http/apis/home'
import { useRouter } from 'vue-router'
import store from '@/store'
import { storeToRefs } from 'pinia'
const { projectCount } = storeToRefs(store.countStore) || 0
const activeName = ref('first')
const router = useRouter()
const handleClick = (tab, event) => {
    if (tab.paneName === 'second') {
      getTableData2()
    } else if (tab.paneName === 'third') {
      getTableData3()
    }
  },
  tableListRef = ref(),
  tableListRef2 = ref(),
  tableListRef3 = ref(),
  total = ref(0),
  total2 = ref(0),
  total3 = ref(0),
  data = ref([]),
  data2 = ref([]),
  data3 = ref([]),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '消息内容',
      key: 'content',
      prop: 'content',
      width: '500'
    },
    {
      label: '消息类型',
      key: 'typeName',
      prop: 'typeName',
      width: '250'
    },
    {
      label: '接收时间',
      key: 'createTime',
      prop: 'createTime',
      minWidth: '180',
      showOverflowTooltip: true
    },
    {
      label: '操作',
      slot: 'action',
      width: '120',
      fixed: 'right'
    }
  ]),
  noticeDetail = ref(),
  releaseTiming = ref(),
  infoTitle = ref(),
  dialogVisible = ref(false),
  checkNoticeDetail = async ({ id, type, instanceId, projectId, meetingId }) => {
    await infoReceived({ id })
    await store.countStore.setCountStore()
    if (type === 'PROJECT_REVIEW') {
      router.push({ name: 'handleDuringExamine', query: { instanceId, projectId }})
    } else if (type === 'PROJECT_REVIEW_PASS' || type === 'PROJECT_REVIEW_REJECT') {
      router.push({ name: 'projectStore' })
    } else if (type === 'PROJECT_REVIEW_BACK') {
      router.push({ name: 'handleAfterGiveBack', query: { instanceId, id: projectId }})
    } else if (type === 'EXPERT_REVIEW') {
      router.push({ name: 'expertReview' })
    } else if (type === 'REVIEW_MEETING') {
      router.push({ name: 'meetingDetail', query: { id: meetingId }})
    }
  },
  getTableData = async (pageParams = tableListRef.value?.pageParams) => {
    const res = await getInfoList({
      ...pageParams
    })
    total.value = res.data.total
    data.value = res.data.records
  },
  getTableData2 = async (pageParams = tableListRef2.value?.pageParams) => {
    const res = await getInfoList({
      ...pageParams,
      readed: false
    })
    total2.value = res.data.total
    data2.value = res.data.records
  },
  getTableData3 = async (pageParams = tableListRef3.value?.pageParams) => {
    const res = await getInfoList({
      ...pageParams,
      readed: true
    })
    total3.value = res.data.total
    data3.value = res.data.records
  }
onMounted(async () => {
  getTableData()
  getTableData2()
  getTableData3()
})
</script>

<template>
  <el-card class="box-card h-full" style="overflow: auto">
    <template #header>
      <div class="card-header flex items-center justify-between	">
        <span class="font-bold">消息中心</span>
        <el-button @click="router.go(-1)">返回</el-button>
      </div>
    </template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <table-list
          ref="tableListRef"
          :column="column"
          :data="data"
          :total="total"
          @get-table-data="getTableData()"
        >
          <template #action="{ scope }">
            <a class="text-primary" @click="checkNoticeDetail(scope.row)">详情</a>
          </template>
        </table-list>
      </el-tab-pane>
      <el-tab-pane :label="`未读（${projectCount||0}）`" name="second"><table-list
        ref="tableListRef2"
        :column="column"
        :data="data2"
        :total="total2"
        @get-table-data="getTableData2()"
      >
        <template #action="{ scope }">
          <a class="text-primary" @click="checkNoticeDetail(scope.row)">详情</a>
        </template>
      </table-list></el-tab-pane>
      <el-tab-pane label="已读" name="third"><table-list
        ref="tableListRef3"
        :column="column"
        :data="data3"
        :total="total3"
        @get-table-data="getTableData3()"
      >
        <template #action="{ scope }">
          <a class="text-primary" @click="checkNoticeDetail(scope.row)">详情</a>
        </template>
      </table-list></el-tab-pane>
    </el-tabs>
  </el-card>
  <el-dialog
    v-model="dialogVisible"
    title="消息详情"
    width="70%"
  >
    <div class="noticeTitile text-center mb-15">{{ infoTitle }}</div>
    <div class="text-right mb-15">发布时间:{{ releaseTiming }}</div>
    <p class="noticeContent">{{ noticeDetail }}</p>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang='less' scoped> </style>
