<template>
  <Panel :title="'就诊历史'">
    <div class="list">
      <el-scrollbar>
        <el-collapse accordion>
          <el-collapse-item :name="index" v-for="(item, index) in list" :key="index">
            <template #title>
              <div class="list-item-content">
                  <span class="disease-name">{{ item.diagnosisMedicalRecord.diagnosisSummary }}</span>
                <span class="doctor">{{ item.registrationInfoVo.doctorName }}</span>
                <span class="time">{{ item.createTime }}</span>
              </div>
            </template>
            <div>
              <DiseaseDetails :detail="item" @copy="copy" @copyItem="copyItem" @copyGoods="copyGoods"></DiseaseDetails>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </div>
  </Panel>
</template>
<script setup lang="ts">
import Panel from '@/components/common/Panel.vue';
import DiseaseDetails from './DiseaseDetails.vue';
import {post} from "@/utils/request.ts";
import {ref} from "vue";
const list = ref<any>([])
const init = (patientId: any) => {
  post("medical/record/listByPatient",{patientId:patientId}).then((res: any) => {
    list.value = res
  })
}
const clearList = () => {
  list.value = []
}
const emit = defineEmits(['copy','copyItem','copyGoods'])
const copy = (item: any) => {
  emit('copy', item)
}
const copyItem = (item: any) => {
  emit('copyItem', item)
}
const copyGoods = (item: any) => {
  emit('copyGoods', item)
}
defineExpose({init,clearList})
</script>
<style scoped lang="scss">
.list {
  display: flex;
  flex-direction: column;
  height: 100%;

  .list-item-content {
    padding: 0 21px 0 24px;
    display: flex;
    justify-content: space-between;

    .disease-name {
      width: 90px;
      overflow: hidden; /* 隐藏溢出的内容 */
      white-space: nowrap; /* 防止文本换行 */
      text-overflow: ellipsis; /* 显示省略号 */
      text-align: left;
    }

    .doctor {
      width: 80px;
    }
    .time{
      display: inline-block;
      overflow: hidden;
    }
  }
}
:deep .el-collapse-item__content {
  padding: 0;
}
</style>