<template>
  <div class="page-container">
    <div class="pane-content">
      <el-select
        size="small"
        class="mb-2 patient patient-select"
        v-model="value1"
        placeholder="请选择患者"
        clearable
        filterable
        @change="handleInput"
        style="width: 180px"
      >
        <el-option
          v-for="(item, index) in options.data"
          :key="index"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <el-button size="small" class="patient">患者管理</el-button>
      <span class="patient patient-info-content">
        <span>
          <span class="ms-2" v-if="selectedPatient">
            姓名：{{ selectedPatient.name ?? "" }}
          </span>
          <span class="ms-2" v-if="selectedPatient">
            年龄：{{ selectedPatient.age ?? "" }}
          </span>
          <span class="ms-2" v-if="selectedPatient">
            性别：{{ selectedPatient.gender ?? "" }}
          </span>
          <span class="ms-2" v-if="selectedPatient">
            住院号：{{ selectedPatient.no ?? "" }}
          </span>
          <span class="ms-2" v-if="selectedPatient">
            费用总额：{{ selectedPatient.fee.total ?? "" }}
          </span>
          <span class="ms-2" v-if="selectedPatient">
            费别：{{ selectedPatient.fee.type ?? "" }}
          </span>
          <span class="ms-2" v-if="selectedPatient">
            预付：{{ selectedPatient.fee.prepaid ?? "" }}
          </span>
          <span class="ms-2" v-if="selectedPatient">
            余额：{{ selectedPatient.fee.remain ?? "" }}
          </span>
          <span class="ms-2" v-if="selectedPatient">
            过敏史：{{ selectedPatient.fee.allergies ?? "" }}
          </span>
        </span>
      </span>
    </div>
    <el-main style="overflow: hidden">
      <div class="router-view-container">
        <router-view />
      </div>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
const value1 = ref("510123456789012345");
const patient_id = ref("510123456789012345");

const items = [
  { value: "510123456789012345", name: "张三" },
  { value: "510123456789012342", name: "李四" },
];

const patient_info = [
  {
    value: "510123456789012345",
    name: "张三",
    age: 43,
    gender: "男",
    no: "152322",
    fee: {
      total: 4000,
      type: "全保",
      warn: -1000,
      prepaid: 4000,
      remain: 124,
      allergies: "无",
    },
  },
  {
    value: "510123456789012342",
    name: "李四",
    age: 34,
    gender: "女",
    no: "152323",
    fee: {
      total: 5000,
      type: "全保",
      warn: -2000,
      prepaid: 5000,
      remain: 124,
      allergies: "无",
    },
  },
];

const getItemByValue = (value) => {
  const item = patient_info.find((item) => item.value === value);
  if (item) {
    return item;
  } else {
    return {
      value: "510123456789012345",
      name: "张三",
      age: 43,
      gender: "男",
      no: "152322",
      fee: {
        total: 4000,
        type: "全保",
        warn: -1000,
        prepaid: 4000,
        remain: 124,
        allergies: "无",
      },
    };
  }
};

const options = reactive({
  data: items,
});

// 分割器
const collapsed = ref(false);
const disableBarSize = "2px";

const handleInput = (value) => {
  console.log(value1["value"]);
  patient_id.value = value1["value"];
  console.log(getItemByValue(patient_id.value));
  console.log(getItemByValue(patient_id.value).name);
};

const selectedPatient = computed(() => {
  return getItemByValue(patient_id.value);
});
</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>
