<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">{{ formatListTime(item.createTime) }}</span>
              </div>
            </template>
            <div>
              <DiseaseDetails :status="props.status" :detail="item" :key="item.id" @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";
import {formatListTime} from "@/utils/dateUtils.ts";

const props = defineProps({
  status: {
    type: Number,
    default: 0
  }
})
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>