<script setup lang="ts">
import { ArrowDown, Minus, RefreshRight, Setting } from '@element-plus/icons-vue'

const rows = [
  ['1', '0101', '0101', '2024-05-21', '622', '462', '108', '42', '10', '572', '92.0'],
  ['2', '0102', '0102', '2024-05-21', '518', '385', '93', '30', '10', '471', '90.9'],
  ['3', '0103', '0103', '2024-05-21', '345', '262', '58', '18', '7', '310', '89.9'],
  ['4', '0104', '0104', '2024-05-21', '287', '210', '45', '22', '10', '243', '84.7'],
  ['5', '0105', '0105', '2024-05-21', '254', '192', '37', '17', '8', '210', '82.7'],
  ['6', '0106', '0105', '2024-05-21', '198', '150', '28', '15', '5', '163', '82.3'],
  ['7', '0107', '0103', '2024-05-21', '156', '118', '22', '12', '4', '125', '80.1'],
]
</script>

<template>
  <article class="board table-board">
    <div class="board-head">
      <h2><span></span>全行头寸预警信息累计清结表</h2>
      <div class="actions">
        <button class="active">本月数据<el-icon><ArrowDown /></el-icon></button>
        <el-icon><RefreshRight /></el-icon>
        <el-icon><Setting /></el-icon>
        <el-icon><Minus /></el-icon>
      </div>
    </div>
    <table class="warning-table">
      <thead>
        <tr>
          <th rowspan="2">序号</th>
          <th rowspan="2">机构编码</th>
          <th rowspan="2">机构名称</th>
          <th rowspan="2">预警日期</th>
          <th colspan="5">全行预警信息累计总数</th>
          <th rowspan="2">清结笔数</th>
          <th rowspan="2">清结率(%)</th>
        </tr>
        <tr>
          <th>总数</th>
          <th>正常</th>
          <th>关注</th>
          <th>预警</th>
          <th>严重预警</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row[0]">
          <td v-for="cell in row" :key="cell">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pager">
      <span>共 35 条</span>
      <button>‹</button>
      <button class="selected">1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <span>...</span>
      <button>→</button>
      <span>前往</span>
      <input value="1" readonly>
      <span>页</span>
    </div>
  </article>
</template>

<style scoped>
.table-board {
  --blue: #1267f2;
  --line: #dce4ef;
  min-width: 0;
  height: clamp(520px, 58vh, 640px);
  min-height: 520px;
  padding: 14px 14px 17px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(255, 255, 255, .96);
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(34, 67, 123, .16);
}

.board-head {
  height: 38px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.board-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 900;
}

.board-head h2 span {
  width: 13px;
  height: 14px;
  border-radius: 4px;
  background: var(--blue);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, .35);
}

.actions {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #6c7480;
  font-size: 15px;
}

.actions button {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: #6c7480;
  font-size: 13px;
  font-weight: 600;
}

.actions button.active {
  padding: 0 13px;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
}

.warning-table {
  width: 100%;
  height: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  font-size: 12px;
  text-align: center;
}

.warning-table th {
  height: 32px;
  border-right: 1px solid rgba(255, 255, 255, .36);
  border-bottom: 1px solid rgba(255, 255, 255, .36);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

.warning-table td {
  height: 40px;
  border-right: 1px solid #e1e7ef;
  border-bottom: 1px solid #e1e7ef;
  background: #fff;
}

.warning-table tr:last-child td {
  border-bottom: 0;
}

.pager {
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  color: #1e2735;
  font-size: 14px;
}

.pager button {
  min-width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: #0d1625;
  font-weight: 700;
}

.pager button.selected {
  background: var(--blue);
  color: #fff;
}

.pager input {
  width: 48px;
  height: 30px;
  border: 1px solid #dbe3ef;
  border-radius: 5px;
  text-align: center;
}

@media (max-width: 1200px) {
  .table-board {
    height: auto;
    min-height: 520px;
  }
}

@media (max-width: 720px) {
  .actions {
    gap: 10px;
  }

  .board-head {
    height: auto;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }

  .warning-table {
    min-width: 720px;
  }

  .table-board {
    overflow-x: auto;
  }
}
</style>
