<template>
    <div class="flex flex-col guide-list" style="height: 100vh">
        <div class="p-3 text-16 text-black text-center shrink-0 doc-nav-bar">
            <span>健康指导</span>
        </div>
        <van-tabs v-model:active='activeTab' class='shrink-0' v-if='tabList.length'
                @change='tabChange'
                shrink>
            <van-tab v-for='item in tabList' :key='item.name'
                :title='item.title' :name='item.name'></van-tab>
        </van-tabs>
        <div class='grow overflow-y-auto card-list' ref='list'>
            <van-pull-refresh v-model='loadingRefresh' @refresh='onRefresh'
                              :disabled='isRefreshDisable'>
                <van-list
                    v-model:loading='loading'
                    :finished='finished'
                    :finished-text="list.length ? '没有更多了' : ''"
                    :immediate-check='false'
                    @load='onMore'
                >
                    <div v-for='item in list' :key='item.id' class='p-4 mt-3 card' @click.stop='toDetail(item)'>
                        <div class='flex items-center'>
                            <div class='detail-left'>日期</div>
                            <div class='detail-right'></div>
                        </div>
                        <div class='flex items-center'>
                            <div class='detail-left'>指导单位</div>
                            <div class='detail-right'></div>
                        </div>
                        <div class='flex items-center'>
                            <div class='detail-left'>指导科室</div>
                            <div class='detail-right'></div>
                        </div>

                        <span class='px-3 float-bt'>健康指导</span>
                        <span class='px-3 float-bt'>健康宣教</span>
                    </div>
                </van-list>
                <div class='text-center shrink-0 empty' v-if='!list.length'>
                    <img src='@/assets/image/doctor/empty.png' alt='' style='width: 1.2rem;'>
                    <p>暂无数据</p>
                </div>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeTab: undefined,
            list: [],
            pagination: {
                total: 0,
                pageIndex: 1,
                pageSize: 4
            },
            loading: false,
            finished: false,
            loadingRefresh: false,
            isRefreshDisable: false
        }
    },
    computed: {
        tabList() {
            const list = [
                { title: '全部', name: '' },
                { title: '健康指导', name: '' },
                { title: '健康宣教', name: '' },
            ]
            return list
        }
    },
    methods: {
        load() {
            
        },
        onMore() {
            debugger
            this.pagination.pageIndex++
            this.load()
        },
        onRefresh() {
            this.list = []
            this.pagination.pageIndex = 1
            this.load(false)
        },
        tabChange() {
            this.list = []
            this.pagination.pageIndex = 1
            this.load()
        },
        toDetail(record) {
            
        }
    }
}
</script>

<style lang="less" scoped>
.card-list {
    padding-bottom: 76px;
}

.card {
    position: relative;
    background-color: #fff;
    .detail-left {
        width: 8em;
        color: #8C8C8C;
        flex-shrink: 0;
    }
    .float-bt {
        position: absolute;
        top: 10px;
        right: 0;
        background-color: var(--van-primary-color);
        color: #fff;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        height: 26px;
        line-height: 26px;
    }
}
</style>
