<!-- 列表组件 -->
<script lang="ts" setup name="TableList">
import { ElMessage } from 'element-plus'
import { getBoardApprove, getBoardMessage } 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
    })
  }
  else {
    getBoardMessage({
      messageModule: $props.name,
      offset: 1,
      limit: 5,
    }).then((res) => {
      notice.value = res.data.rows
    })
  }
}
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: '审批',
      },
    })
  }
  // console.log(row, '111')
  if (row.messageType || row.messageModule) {
    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) {
    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',
        },
      })
    }
  }
  else {
    ElMessage.warning('暂无详情')
  }
}
</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'}`" />
      <div class="content">
        <span v-if="item.sourceModule"> {{ item.sourceModule }}| </span>{{ item.messageTopic }}
      </div>
      <div class="time">
        {{ item.messageTime }}
      </div>
    </div>
  </div>
  <el-empty v-else 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: 12px;
  height: 12px;
  border-radius: 50%;
  background: green;
}

.red {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(228 85 29);
}
</style>