<template>
  <div class="page-container">
    <div class="pane-content">
      <el-radio-group
        class="mb-2 patient"
        direction="row"
        v-model="groupFilterChoose1"
      >
        <el-radio v-for="item in groupFilterList1" :key="item" :value="item">
          {{ item }}
        </el-radio>
      </el-radio-group>
      <el-select
        size="small"
        class="mt-1 patient patient-select"
        v-model="value1"
        overview="underlined"
        placeholder="请选择患者"
        :allow-clear="true"
        filter
        @value-change="handleInput"
      >
        <el-option-group label="待诊病人" key="待诊病人">
          <el-option
            v-for="(item, index) in options.data"
            :key="index"
            :value="item.value"
            :label="item.name"
          />
        </el-option-group>
        <el-option-group label="已诊病人" key="已诊病人">
          <el-option
            v-for="(item, index) in options2.data"
            :key="index"
            :value="item.value"
            :label="item.name"
          />
        </el-option-group>
      </el-select>
      <el-button size="small" class="mt-1 patient">患者管理</el-button>
    </div>
    <el-divider />
    <div class="router-view-container">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
const value1 = ref("张三");
const items = [
  { value: "510123456789012345", name: "张三" },
  { value: "510123456789012342", name: "李四" },
  { value: "510123456789012346", name: "王五" },
  { value: "510123456789012347", name: "赵六" },
  { value: "510123456789012348", name: "田七" },
  { value: "510123456789012349", name: "周八" },
  { value: "510123456789012350", name: "吴九" },
  { value: "510123456789012351", name: "郑十" },
  { value: "510123456789012352", name: "冯十一" },
  { value: "510123456789012353", name: "陈十二" },
  { value: "510123456789012354", name: "褚十三" },
  { value: "510123456789012355", name: "卫十四" },
  { value: "510123456789012356", name: "蒋十五" },
  { value: "510123456789012357", name: "沈十六" },
  { value: "510123456789012358", name: "韩十七" },
  { value: "510123456789012359", name: "杨十八" },
  { value: "510123456789012360", name: "朱十九" },
  { value: "510123456789012361", name: "秦二十" },
  { value: "510123456789012362", name: "尤二十一" },
  { value: "510123456789012363", name: "许二十二" },
  { value: "510123456789012364", name: "何二十三" },
  { value: "510123456789012365", name: "吕二十四" },
];
const items2 = [
  { value: "510123456789012366", name: "施二十五" },
  { value: "510123456789012367", name: "张二十六" },
  { value: "510123456789012368", name: "孙二十七" },
  { value: "510123456789012369", name: "曹二十八" },
  { value: "510123456789012370", name: "严二十九" },
  { value: "510123456789012371", name: "华三十" },
  { value: "510123456789012372", name: "邱三十一" },
  { value: "510123456789012373", name: "高三十二" },
  { value: "510123456789012374", name: "林三十三" },
];

const options = reactive({
  data: items,
});
const options2 = reactive({
  data: items2,
});
//单选框分组
const groupFilterList1 = ref(["全天", "上午", "下午"]);
const groupFilterChoose1 = ref("全天");
</script>

<style scoped lang="scss">
.patient-select {
  width: auto;
}
.patient {
  position: relative;
  bottom: 0;
  margin-right: 16px;
  float: left;
}

.pane-content {
  padding: 0 12px;
  margin-top: 4px;
}
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 使容器占满视口高度 */
}

.pane-content {
  padding: 0 10px;
  flex: 0 0 auto; /* 固定高度 */
}

.router-view-container {
  flex: 1 1 auto; /* 占据剩余空间 */
  overflow: auto; /* 如果内容超出，允许滚动 */
}
.el-divider {
  margin: -5px;
}
</style>
