<!-- 列表组件 -->
<script lang="ts" setup name="TableList">
import { ElMessage } from 'element-plus'
import { getBoardApprove, getBoardMessage, setRead } from '@/api/eqpt/dashboard/index'
const $props = defineProps({
  height: {
    type: Number,
    required: true,
  },
  limit: {
    type: Number,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
})
const $route = useRoute()
const $router = useRouter()
const notice = ref<any[]>([])
const fetchData = () => {
  if ($props.name === '审批提醒') {
    getBoardApprove({
      messageModule: $props.name,
      offset: 1,
      limit: 5,
      readStatus: '0',
    }).then((res) => {
      notice.value = res.data.rows.map((item: any, index: number) => {
        return {
          ...item,
          messageTopic: index % 3 === 0 ? '吸烟检测模型' : index % 3 === 0 ? '安全帽检测模型' : '工服检测模型',
          sourceModule: '智能模型',
        }
      })
    })
  }
  else {
    getBoardMessage({
      messageModule: $props.name,
      offset: 1,
      limit: 5,
    }).then((res) => {
      if ($props.name === '检定通知') {
        notice.value = [
          { sourceModule: '任务单rwd202410180001已检完', messageTopic: '计量计划', messageTime: '2024-11-28 16:03' },
          { sourceModule: '任务单rwd202410120002已检完', messageTopic: '计量计划', messageTime: '2024-11-28 10:25' },
          { sourceModule: '任务单rwd202411230007已检完', messageTopic: '计量计划', messageTime: '2024-11-27 15:47' },
          { sourceModule: '任务单rwd202411070005已检完', messageTopic: '计量计划', messageTime: '2024-11-21 10:34' },
          { sourceModule: '任务单rwd202411150001已检完', messageTopic: '计量计划', messageTime: '2024-11-20 17:16' },
        ]
      }
      else {
        notice.value = res.data.rows.map((item: any, index: number) => {
          return {
            ...item,
            sourceModule: index % 3 === 0 ? '吸烟检测模型' : index % 3 === 0 ? '安全帽检测模型' : '工服检测模型',
            messageTopic: '智能模型',
          }
        })
      }
    })
  }
}
onMounted(() => {
  fetchData()
})
const statusTypeDict: { [key: string]: string } = {
  sbyysq: '5',
  sbjysq: '3',
  sbbfsq: '4',
  sbfcsq: '1',
  sbqfsq: '2',
}
const dataDetail = (row: any) => {
  function nav(path: string) {
    $router.push({
      path,
      query: {
        row: JSON.stringify({ id: row.bizId, equipmentId: row.bizId }),
        id: row.bizId,
        statusName: '全部',
      },
    })
  }
  if (row.messageModule !== '审批提醒') {
    setRead(row)
    if (window.$pathDict[row.messageType]) {
      if (row.messageModule.includes('tzsb')) {
        nav('/speciallist/detail')
      }
      else {
        nav(window.$pathDict[row.messageType])
      }
    }
    if (window.$pathDict[row.messageModule]) {
      if (row.messageModule.includes('tzsb')) {
        nav('/speciallist/detail')
      }
      else {
        nav(window.$pathDict[row.messageModule])
      }
    }
  }
  else {
    if (row.formId === 'sbtzgl' && row.messageTopic.includes('tzsb')) {
      $router.push({
        path: '/speciallist/detail',
        query: {
          row: JSON.stringify({ id: row.bizId, equipmentId: row.bizId, taskId: row.taskId }),
          id: row.bizId,
          statusName: '待审批',
          equipmentType: '2',
        },
      })
    }
    else {
      $router.push({
        path: window.$pathDict[row.formId],
        query: {
          row: JSON.stringify({ id: row.bizId, equipmentId: row.bizId, taskId: row.taskId }),
          id: row.bizId,
          statusName: '待审批',
          // 智能模型状态
          statusType: statusTypeDict[row.formId],
          // 提前延迟送检申请
          approvalType: row.formId === 'tqsjsq' ? '0' : '1',
          // 智能模型台账
          equipmentType: '1',
        },
      })
    }
  }
}
</script>

<template>
  <div v-if="notice.length" class="container-table">
    <div v-for="item in notice" :key="item.content" class="item" :style="`height:${$props.height / $props.limit}px;display:flex;`" @click="dataDetail(item)">
      <span :class="`${item.readStatus === '1' ? 'green' : 'red'}`">
        123
      </span>
      <div class="content">
        <span v-if="item.sourceModule"> {{ item.sourceModule }}| </span>{{ item.messageTopic }}
      </div>
      <div class="time">
        {{ item.messageTime }}
      </div>
    </div>
  </div>
  <el-empty style="margin: 0 auto;" description="暂无数据" :image-size="50" />
</template>

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

  .item {
    // flex-direction: column;
    // align-items: center;
    align-items: center;

    &:hover {
      cursor: pointer;
    }

    .content {
      margin-left: 10px;
      width: 75%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .time {
      width: 40%;
      text-align: right;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.green {
  width: 14px !important;
  height: 14px;
  color: transparent;
  display: inline-block;
  border-radius: 50%;
  background-color: #0f0;
  margin: 0;
  padding: 0;
}

.red {
  width: 14px !important;
  height: 14px;
  color: transparent;
  display: inline-block;
  border-radius: 50%;
  background-color: #f00;
  margin: 0;
  padding: 0;
}
</style>