<template>
    <div class='all-back'>
        <van-nav-bar title='慢病管理' left-text='' left-arrow
                     @click-right='toSearch' @click-left='toBack'>
            <template #right>
                <doc-icon type='doc-search' style='color: #262626' />
            </template>
        </van-nav-bar>
        <div class='top-title'>
            我的待随访（{{ total }}）

        </div>
        <van-tabs v-model:active='active' @change='changeTab'>
            <van-tab :name='item.name' v-for='item in tabList' :key='item.name'>
                <template #title>
                    <span>{{ item.title }}({{ item.num }})</span>
                </template>
            </van-tab>
        </van-tabs>
        <van-pull-refresh v-model='loading' @refresh='onRefresh'
                          :disabled='isRefreshDisable'>
            <div class='list-data' ref='list'>
                <van-list
                    v-model:loading='loadingTable'
                    :finished='finished'
                    :finished-text="detailInfo.length ? '没有更多了' : ''"
                    @load='onMore'
                >
                    <div class='mt-10 white-back p-16' v-for='item in detailInfo' :key='item.id'>
                        <div class='flex items-center'>
                            <div class='base-title'>{{ item.residentName }}</div>
                            <div class='second-title plr-8'>{{ getInfoByIdCard(item.idCard).age }}岁</div>
                            <div class='second-title plr-6'>{{ item.genderName }}</div>
                        </div>
                        <div class='mt-3 flex items-center'>
                            <div class='detail-left'>
                                身份证号
                            </div>
                            <div class='detail-right'>
                                {{ $idCardHide(item.idCard) }}
                            </div>
                        </div>
                        <div class='mt-3 flex items-center'>
                            <div class='detail-left'>
                                是否逾期
                            </div>
                            <div class='detail-right'>
                                {{ item.isOverdueName }}
                            </div>
                        </div>
                        <div class='mt-3 flex items-center'>
                            <div class='detail-left'>
                                逾期天数
                            </div>
                            <div class='detail-right'>
                                {{ item.overdueDay }} 天
                            </div>
                        </div>
                        <div class='flex mt-3' style='align-items: baseline'>
                            <div class='detail-left'>
                                慢病标签
                            </div>
                            <div class='detail-right' style='flex: 1'>
                                <ChronicTag :list='item.chronicTagsArray' />
                            </div>
                        </div>
                        <van-divider class='mt-3' />
                        <div class='mt-3 flex word-right'>
                            <div></div>
                            <div>
                                <van-button round size='small' class='btn' @click='toGeneralDetail(item)'>详情
                                </van-button>
                                <van-button round size='small' class='btn' style='margin-left: 16px'
                                            @click='toAddGeneral(item)'>通用随访
                                </van-button>
                            </div>
                        </div>
                    </div>
                </van-list>
                <div class='text-center empty' v-if='!detailInfo.length'>
                    <img src='@/assets/image/doctor/empty.png' alt='' style='width: 1.2rem;'>
                    <p>暂无数据</p>
                </div>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { getVisitAll, queryVisitByPage } from '@/api/doctor/generalFU.js'
import ChronicTag from '@/doctor/components/chronicTag/ChronicTag.vue'
import { backHome, getInfoByIdCard } from '@/utils/common'

export default {
    name: 'List',
    components: {
        ChronicTag
    },
    data() {
        return {
            active: 1,
            tabList: [
                { title: '高血压', name: 1, num: 0 },
                { title: '糖尿病', name: 2, num: 0 },
                { title: '冠心病', name: 3, num: 0 },
                { title: '脑卒中', name: 4, num: 0 },
                { title: '慢阻肺', name: 5, num: 0 },
                { title: '慢性肾病', name: 6, num: 0 },
                { title: '血脂异常', name: 7, num: 0 }
            ],
            detailInfo: [],
            total: 0,
            // 下拉刷新
            loading: false,
            isRefreshDisable: false,
            //列表刷新
            loadingTable: false,
            pagination: {
                total: 0,
                pageIndex: 1,
                pageSize: 5
            },
            finished: false
        }
    },
    mounted() {
        const list = this.$refs.list
        list.addEventListener('scroll', () => {
            if (list.scrollTop > 0) {
                this.isRefreshDisable = true
            } else {
                this.isRefreshDisable = false
            }
        })
    },
    methods: {
        getInfoByIdCard,
        changeTab() {
            this.detailInfo = []
            this.pagination.pageIndex = 1
            this.load()
        },
        onMore() {
            this.pagination.pageIndex++
            this.load()
        },
        load(loading = true) {
            const query = {
                diseaseType: this.active,
                pageIndex: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize
            }
            getVisitAll(query, loading).then(res => {
                console.log('getVisitAll', res)
                this.detailInfo = this.detailInfo.concat(res.data || [])
                this.total = this.detailInfo.length
                this.finished = this.detailInfo.length >= this.pagination.total
            }).finally(() => {
                this.loading = false
                this.loadingTable = false
            })
        },
        scrollHandle(dom) {
            if (!dom) return
            if (dom.scrollTop > 0) {
                this.isRefreshDisable = true
            } else {
                this.isRefreshDisable = false
            }
        },
        onRefresh() {
            this.detailInfo = []
            this.pagination.pageIndex = 1
            this.load(false)
        },
        toGeneralDetail(item) {
            this.$router.push({
                path: `/doctor/resident/base`,
                query: {
                    residentId: item.residentInfoId
                }
            })
        },
        toAddGeneral(val) {
            const { id, ...others } = val
            this.$router.push({
                path: `/doctor/followUp/generalFU/add`,
                query: { ...others }
            })
        },
        toSearch() {
            this.$router.push({
                path: `/doctor/followUp/search`
            })
        },
        toBack() {
            backHome()
        }
    }
}
</script>

<style scoped lang='less'>
.all-back {
    background: #F5F5F5;

    .top-title {
        padding: 10px 12px;
    }

    .white-back {
        background: #FFFFFF;
    }

    .mt-10 {
        margin-top: 10px;
    }

    .p-16 {
        padding: 16px;
    }

    .plr-8 {
        padding: 0px 8px;
    }

    .plr-6 {
        padding: 0px 6px;
    }

    .base-title {
        font-weight: bold;
        font-size: 16px;
    }

    .second-title {
        background: #F0F3FF;
        line-height: 24px;
        margin-left: 10px;
    }

    .detail-left {
        width: 104px;
        font-size: 14px;
        color: #8C8C8C;
    }

    .detail-right {
        font-size: 14px;
    }

    .word-right {
        justify-content: space-between;
        align-items: center;
    }

    .btn {
        background: #F0F3FF;
        color: #607FF0;
        border: 0px;
        line-height: 26px;
        height: 26px;
        //padding: 4px 8px 4px 8px;
        padding: 0px 8px;
    }

    .list-data {
        height: calc(100vh - 140px);
        overflow-y: auto;
    }
}
</style>