<template>
    <el-card class="card-body">
        <!-- expand-row-keys -->
        <template #header>
            <div class="card-header">
                <span>就诊记录</span>
                <div class="header-btn">
                    <el-button type="primary" link>加载更多</el-button>
                </div>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
                <template #default="props">
                    <div class="table-detail">
                        <el-row>
                            <el-col :span="8">就诊医生: {{ props.row.jzys }}</el-col>
                            <el-col :span="8">就诊原因或主述: {{ props.row.jzyy }}</el-col>
                        </el-row>
                        <el-row>初步诊断: {{ props.row.cbzd }}</el-row>
                        <el-row>治疗方案或建议: {{ props.row.zlfa }}</el-row>
                        <el-row>检查和检验结果: {{ props.row.jcjg }}</el-row>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="就诊日期" prop="date" />
            <el-table-column label="就诊科室" prop="name" />
            <el-table-column label="诊断信息" prop="info" />
        </el-table>
    </el-card>
</template>

<script setup>
    import { ref } from 'vue'

    const tableData = [
        {
            date: '2016-05-03',
            name: '呼吸科',
            info: '呼吸急促，不正常',
            jzys: '曲丽丽',
            jzyy: '呼吸不通畅',
            cbzd: '',
            zlfa: '',
            jcjg: '',

        },
        {
            date: '2016-05-02',
            name: '消化内科',
            info: '呼吸急促，不正常',
            jzys: '曲丽丽',
            jzyy: '呼吸不通畅',
            cbzd: '',
            zlfa: '',
            jcjg: '',

        },
        {
            date: '2016-05-04',
            name: '心血管',
            info: '呼吸急促，不正常',
            jzys: '曲丽丽',
            jzyy: '呼吸不通畅',
            cbzd: '',
            zlfa: '',
            jcjg: '',
        },
    ]
</script>
<style lang="scss" scoped>
    .card-body{
        margin-bottom: 30px;
        .card-header{
            display: flex;
            width: 100%;
            position: relative;
            .header-btn{
                position: absolute;
                right: 15px;
                top: -5px;
            }
        }
        .table-detail{
            margin-left: 30px;
            p{
                span{
                    margin-right: 30px;
                }
            }
        }
    }
</style>