<!-- 工作提醒\审批提醒列表 -->
<script lang="ts" setup name="WorkList">
import dayjs from 'dayjs'
import { WORKPATHS } from '../work/workPaths'
import { useChangePage } from '../approve/useChangePage'
import { getUNREADApprovalListPage, getWorkList, updateWorkStatus } from '@/api/workBench/message'
import { useGroup } from '@/commonMethods/useGroup'
import useUserStore from '@/store/modules/user'
import { formIdUrl } from '@/utils/scheduleDict'
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})
const labCode = ref('') // 实验室代码
const groupCode = ref('') as any // 组别代码
const isAdministrator = ref('0') // 是不是超级管理员
const emptyDisc = ref('暂无数据') // 描述文字
const user = useUserStore() // 用户信息
const list = ref<any[]>([]) // 工作提醒列表做法
const loading = ref(false)
const showEmpty = ref(false)
const fetchData = () => {
  loading.value = true

  if (props.name === '工作提醒') {
    // 获取工作提醒列表
    const params = {
      labCode: labCode.value,
      groupCode: groupCode.value,
      startDate: '',
      endDate: '',
    }
    getWorkList(params).then((res) => {
      const tempList = res.data.map((item: { createTime: string }) => {
        return {
          ...item,
          createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm'),
        }
      })
      const tempGroupList = useGroup(tempList, 'messageTopic', false)

      list.value = tempGroupList.map((item: any) => {
        return {
          ...item[0],
          listLength: item.length,
        }
      })
      loading.value = false
    }).catch(() => {
      loading.value = false
    })
  }
  else if (props.name === '审批提醒') {
    const params = {
      endTime: '', //	结束时间
      messageContent: '', // 详细信息
      messageTitle: '0', // 主题
      sourceModule: '', // 来源模块（字典code）
      startTime: '', //	开始时间
      limit: 999999,
      offset: 1,
    }
    getUNREADApprovalListPage(params).then((res) => {
      const tempList = res.data.rows.map((item: { formId: string; createTime: string; messageTitle: string }) => {
        return {
          ...item,
          createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm'),
          // 由于以下两个模块的待审批通知后台没有给sourceModuleName参数，所以自己来对应
          sourceModuleName: item.formId === 'jljdywzsbcj' ? '对编号为XXX证书/报告的补充件' : item.formId === 'zyglhtzxbgdjb' ? '合同执行变更登记表' : item.sourceModuleName,
        }
      })
      const tempGroupList = tempList.reduce((grouped: any, item: any) => {
        // const key = `${item.messageTitle}-${item.messageContent}`
        const key = `${item.formId}`
        grouped[key] = grouped[key] || []
        grouped[key].push(item)
        return grouped
      }, {})

      list.value = Object.values(tempGroupList).map((item: any) => {
        return {
          ...item[0],
          listLength: item.length,
        }
      })
      loading.value = false
    }).catch(() => {
      loading.value = false
    })
  }
}
const $router = useRouter()
const handleClickTitle = (row: any) => {
  if (props.name === '工作提醒') {
    if (row.listLength > 1) { // 聚合的数据,跳转列表
      $router.push({
        path: '/workbench/workList',
        query: {
          messageTopic: row.messageTopic,
          messageContent: row.messageContent,
        },
      })
    }
    else { // 不聚合直接跳详情
      updateWorkStatus(row) // 标记：未读 -> 已读
      const name = row.messageTopic
      $router.push({
        path: `${WORKPATHS[name]}/detail/${row.businessId}`,
        query: {
          id: row.businessId,
          type: 'detail',
          approvalStatusName: '全部',
          standardNo: row.businessCode, // 标准库编号
          equipmentNo: row.businessCode, // 设备编号
          standardName: row.extraContent, // 标准库名称
          standardId: row.businessId, // id
          fromWorkBench: 'work',
        },
      })
    }
  }
  else if (props.name === '审批提醒') {
    if (row.listLength > 1) { // 聚合的数据,跳转列表
      $router.push({
        path: '/workbench/approvalList',
        query: {
          messageTitle: row.messageTitle,
          sourceModule: row.sourceModule,
          messageContent: row.messageContent,
        },
      })
    }
    else {
      const formId = row.formId
      useChangePage($router, formIdUrl[formId], row)
    }
  }
}

onMounted(() => {
  isAdministrator.value = user.roleTips.includes('administrator') ? '1' : '0' // 是否是超级管理员
  if (isAdministrator.value === '1') { // 超级管理员
    labCode.value = '' // 有实验室就默认本人实验室
    groupCode.value = '' // 超级管理员默认查看全部
    fetchData()
  }
  else { // 不是超级管理员
    if (!user.bizLabCode) { // 没有实验室
      emptyDisc.value = '此用户非超级管理员且无实验室，无权限查看'
      showEmpty.value = true
    }
    else if (!user.groupNo) { // 有实验室但没有组
      emptyDisc.value = '此用户非超级管理员且无组别，无权限查看'
      showEmpty.value = true
    }
    else { // 有实验室且有组
      showEmpty.value = false
      if (user.groupNo === 'GL') { // 综合管理组
        labCode.value = user.bizLabCode // 实验室
        // 综合管理组默认查实验室下面的所有数据，不筛选组别
        groupCode.value = ''
      }
      else { // 其他组
        labCode.value = user.bizLabCode // 实验室
        // 其他组默认筛选自己组
        groupCode.value = user.groupNo
      }
      fetchData()
    }
  }
})
</script>

<template>
  <div v-if="!showEmpty" v-loading="loading" :class="list.length ? 'work-table' : 'empty-table'">
    <div v-for="item in list" :key="item.content" class="item">
      <span class="red" />
      <el-tooltip class="item" effect="dark" :content="props.name === '工作提醒' ? item.messageContent : `${item.sourceModuleName}${item.messageContent}`" placement="top-start">
        <span class="title" @click="handleClickTitle(item)">
          <span v-if="props.name === '工作提醒'" style="color: #f59a23;font-weight: 600;">{{ item.messageTopic }} | </span>
          <span v-if="props.name === '审批提醒' && item.messageTitle === '待审批通知'" style="color: #00f;font-weight: 600;">{{ item.messageTitle }} | </span>
          <span v-if="props.name === '审批提醒' && item.messageTitle === '审批结果通知'" style="color: #70b603;font-weight: 600;">结果通知 | </span>
          <span v-if="props.name === '工作提醒'">{{ item.messageContent }}</span>
          <span v-if="props.name !== '工作提醒'">{{ item.sourceModuleName }}{{ item.messageContent }}</span>
        </span>
      </el-tooltip>
      <span v-if="item.listLength > 1" style="color: #d9001b;font-weight: 600;">({{ item.listLength }})</span>
      <span class="time"> {{ item.createTime }} </span>
    </div>
  </div>
  <el-empty v-if="!list.length || showEmpty" v-loading="loading" style="margin: 0 auto;" :description="emptyDisc" :image-size="50" />
</template>

<style lang="scss" scoped>
.empty-table {
  width: 100%;
  // padding: 0 10px;
  padding-left: 10px;
  font-size: 14px;
  overflow: auto;
}

.work-table {
  width: 100%;
  // padding: 0 10px;
  padding-left: 10px;
  font-size: 14px;
  height: 230px;
  overflow: auto;

  .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 28px;

    .title {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .time {
      text-align: right;
      color: #a8abb2;
      white-space: nowrap;
      margin-left: 20px;
      font-size: 13px;
    }
  }
}

.red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9001b;
  margin-right: 8px;
}
</style>