<template>
    <div class="h-full flex flex-col px-2 py-3 work">
        <div class="shrink-0 flex pb-2 items-center">
            <van-tabs shrink type="card" class="grow doc-tab-round" line
                v-model:active="activeTab"
                @change="tabChange">
                <van-tab v-for="item in tabList" :key="item.value"
                    :title="item.name"></van-tab>
            </van-tabs>
            <div class="shrink-0 pl-3" style="border-left: 1px solid #A5AEBE;">
                <doc-icon type="doc-menu" style="font-size:.2rem;color:#03053D"/>
            </div>
        </div>
        <div class='grow pt-1 overflow-y-auto' ref='list'>
            <van-pull-refresh v-model='loadingRefresh' @refresh='onRefresh'
                :disabled='isRefreshDisable' style="min-height: 100%">
                <van-list
                    v-model:loading='loading'
                    :finished='finished'
                    :finished-text="list.length ? '没有更多了' : ''"
                    :immediate-check='false'
                    @load='onMore'
                >
                    <div class="flex flex-col gap-y-2.5">
                        <div class="py-3 px-4 doc-list-card" v-for='item in list' :key="item.id">
                            <div class="mb-4">
                                <span class="name mr-2">{{ item.residentName }}</span>
                                <span class="tag mr-2">{{ item.age }}岁</span>
                                <span class="tag mr-2">{{ item.genderName || '-' }}</span>
                            </div>
                            <div class="flex flex-col gap-y-2.5">
                                <div>
                                    <span class="label">身份证号</span>
                                    <span>{{ $idCardHide(item.idCard) }}</span>
                                </div>
                                <div>
                                    <span class="label">是否逾期</span>
                                    <span>{{ item.isOverdue == 1 ? '是' : '否' }}</span>
                                </div>
                                <div>
                                    <span class="label">逾期天数</span>
                                    <span>{{ item.overdueDay }}</span>
                                </div>
                                <div class="flex">
                                    <span class="label">慢病标签</span>
                                    <span>
                                        <ChronicTag :list='item.chronicTagsArray' />
                                    </span>
                                </div>
                                <div>
                                    <span class="label">数据来源</span>
                                    <span>{{ item.sourceName || '-' }}</span>
                                </div>
                            </div>
                            <div class="divider my-3"></div>
                            <div class="bt-group">
                                <van-button round size="small" class="doc-btn-primary">详情</van-button>
                                <span class="mr-3"></span>
                                <van-button round size="small" class="doc-btn-primary">通用随访</van-button>
                                <span class="mr-3"></span>
                                <van-button round size="small" class="doc-btn-primary" @click="onIgnore(item)">忽略</van-button>
                            </div>
                        </div>
                    </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>
import { getVisitByPage, delVisit } from '@/api/doctor/workbench.js'
import ChronicTag from '@/doctor/components/chronicTag/ChronicTag.vue'
import { showToast } from 'vant'

export default {
    name: 'TableVisit',
    components: {
        ChronicTag
    },
    data() {
        return {
            list: [],
            pagination: {
                total: 0,
                pageIndex: 1,
                pageSize: 8
            },
            loading: false,
            finished: false,
            loadingRefresh: false,
            isRefreshDisable: false,
            // 慢病tab列表
            tabList: [
                { name: '高血压', value: 1 },
                { name: '糖尿病', value: 2 },
                { name: '冠心病', value: 3 },
                { name: '脑卒中', value: 4 },
                { name: '慢阻肺', value: 5 },
                { name: '慢性肾病', value: 6 },
                { name: '血脂异常', value: 7 }
            ],
            activeTab: 0
        }
    },
    computed: {
        activeTabItem() {
            return this.tabList[this.activeTab] || {}
        }
    },
    created() {
        this.load()
    },
    mounted() {
        const list = this.$refs.list
        list.addEventListener('scroll', () => {
            if (list.scrollTop > 0) {
                this.isRefreshDisable = true
            } else {
                this.isRefreshDisable = false
            }
        })
    },
    methods: {
        load(loading = true) {
            const query = {
                pageIndex: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize,
                searchType: 1,
                diseaseType: this.activeTabItem.value
            }
            getVisitByPage(query, loading).then(res => {
                if (this.pagination.pageIndex === 1) {
                    this.list = []
                } 
                this.list = this.list.concat(res.data.dataList || [])
                this.pagination.total = res.data.total || 0
                this.finished = this.list.length >= this.pagination.total
            }).finally(() => {
                this.loading = false
                this.loadingRefresh = false
            })
        },
        onMore() {
            this.pagination.pageIndex++
            this.load(false)
        },
        onRefresh() {
            this.pagination.pageIndex = 1
            this.load()
        },
        tabChange() {
            this.pagination.pageIndex = 1
            this.load()
        },
        toDetail(record) {
            if (!record) return
            // let path = `/residentWX/screening/firstDetail/${record.id}`
            // if (this.activeTab == '2') {
            //     path = `/residentWX/screening/SecondDetail/${record.id}`
            // }
            // this.$router.push({ path })
        },
        onIgnore(record) {
            delVisit({ id: record.id }).then(() => {
                this.list = this.list.filter(e => e.id !== record.id)
                setTimeout(() => {
                    showToast('操作成功')
                }, 800);
            })
        }
    }
}
</script>

<style lang="less" scoped>

</style>