<template>
  <div class="risk-table">
    <table>
      <thead>
        <tr>
          <th class="col-type">
            <div>项目</div>
            <div>类型</div>
          </th>
          <th class="col-red">红色预警</th>
          <th class="col-orange">橙色预警</th>
          <th class="col-yellow">黄色预警</th>
          <th class="col-blue">蓝色预警</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td class="col-type">{{ item.type }}</td>
          <td class="col-red">{{ item.red }}</td>
          <td class="col-orange">{{ item.orange }}</td>
          <td class="col-yellow">{{ item.yellow }}</td>
          <td class="col-blue">{{ item.blue }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
defineProps({
  tableData: {
    type: Array,
    default: () => [
      { type: '桥梁', red: 0, orange: 1, yellow: 8, blue: 11 },
      { type: '隧道', red: 0, orange: 0, yellow: 6, blue: 12 },
      { type: '边坡', red: 0, orange: 1, yellow: 9, blue: 9 },
      { type: '路段', red: 0, orange: 2, yellow: 11, blue: 7 },
      { type: '项目', red: 0, orange: 2, yellow: 11, blue: 7 }
    ]
  }
})
</script>

<style lang="scss" scoped>
.risk-table {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #fff;

    th,
    td {
      padding: 4px 4px;
      text-align: center;
      border: none;
    }

    thead {
      th {
        font-weight: normal;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);

        &.col-type {
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }

    tbody {
      tr {
        &:nth-child(odd) {
          background-color: rgba(255, 255, 255, 0.05);
        }

        td {
          font-size: 14px;

          &.col-type {
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }
    }

    .col-red {
      color: #ff4d4f;
    }

    .col-orange {
      color: #ff7a45;
    }

    .col-yellow {
      color: #ffc53d;
    }

    .col-blue {
      color: #40a9ff;
    }

    .col-type {
      width: 20%;
    }
  }
}
</style>
