<script setup lang="ts">
defineOptions({
  name: "AssessmentRank"
});

import { ref } from "vue";
</script>

<template>
  <div class="assessment-rank">
    <div class="fixed-columns">
      <table>
        <tbody>
          <tr>
            <td colspan="2" class="td-back">科室</td>
          </tr>
          <tr>
            <td colspan="2" class="td-back">医生</td>
          </tr>
          <tr>
            <td colspan="2" class="td-back">排名</td>
          </tr>
          <tr>
            <td rowspan="2" class="td-back">运营效率</td>
            <td class="td-back">医疗服务收入占比</td>
          </tr>
          <tr>
            <td class="td-back">医保各种检查反馈及时性</td>
          </tr>
          <tr>
            <td rowspan="2" class="td-back">医疗质量与安全</td>
            <td class="td-back">耗材点评</td>
          </tr>
          <tr>
            <td class="td-back">VTE管理</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="scrollable-columns">
      <table>
        <tbody>
          <tr>
            <td>神经外科</td>
            <td>神经内科</td>
            <td>内分泌</td>
            <td>泌尿外科</td>
            <td>消化内科</td>
            <td>心血管内科1</td>
            <td>心血管内科1</td>
            <td>心血管内科1</td>
          </tr>
          <tr>
            <td>李医生1</td>
            <td>李医生2</td>
            <td>李医生3</td>
            <td>李医生4</td>
            <td>李医生5</td>
            <td>李医生6</td>
            <td>李医生7</td>
            <td>李医生8</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.assessment-rank {
  box-sizing: border-box;
  display: flex;
  width: calc(100% - 40px);
  margin-top: 20px;
  overflow: hidden;
  border-right: 1px solid #ccc;
  box-shadow: 5px 0 10px -5px #ccc;

  table {
    width: 100%;
    table-layout: fixed;
  }

  td {
    padding: 10px;
    border: 1px solid #ccc;
  }

  .fixed-columns {
    flex-shrink: 0;
    width: 30%;
    background-color: #f9f9f9;
    box-shadow: 5px 0 10px -5px #ccc;

    td {
      position: sticky;
      left: 0;
      z-index: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background-color: #f9f9f9;
    }
  }

  .scrollable-columns {
    overflow-x: auto;

    td {
      width: 200px;
    }
  }
}
</style>
