<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.salePersonName }}</span>
                <span class="time">{{ formatListTime(item.createDatetime) }}</span>
              </div>
            </template>
            <div>
              <Detail :detail="item" :key="item.id"></Detail>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </div>
  </Panel>
</template>
<script setup lang="ts">
import Panel from '@/components/common/Panel.vue';
import Detail from './RecordsLog/Detail.vue';
import {post} from "@/utils/request.ts";
import {ref} from "vue";
import {formatListTime} from "@/utils/dateUtils.ts";

const list = ref<any>([])
const init = (patientId: any) => {
  const query = {
    patientId: patientId,
    pageSize: 20
  }
  post('charge/listDetail', {query}).then((res: any) => {
    list.value = res.list
  })
}
const clearList = () => {
  list.value = []
}
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>