<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>
        <van-pull-refresh v-model="loading" @refresh="onRefresh"
            :disabled='isRefreshDisable'>
            <div class='top-title'>
                我的待随访（{{ total }}）
            </div>
            <van-tabs v-model:active='active'>
                <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>
            <div class='list-data' ref='list'>
                <div class='mt-10 white-back p-16' v-for='item in activeData' :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>
                <div class="text-center empty" v-if="!activeData.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 } 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
        }
    },
    computed: {
        activeData() {
            return this.detailInfo.filter(e => e.diseaseType === this.active)
        }
    },
    created() {
        this.init()
    },
    mounted() {
        const list = this.$refs.list
        list.addEventListener('scroll', () => {
            if (list.scrollTop > 0) {
                this.isRefreshDisable = true
            } else {
                this.isRefreshDisable = false
            }
        })
    },
    methods: {
        getInfoByIdCard,
        init() {
            this.load()
        },
        load(loading = true) {
            // const nextVisitDateStart = dayjs().format('YYYY-MM-DD')
            // const nextVisitDateEnd = dayjs().add(6, 'day').format('YYYY-MM-DD')
            const query = {
                // nextVisitDateStart,
                // nextVisitDateEnd
            }
            getVisitAll(query, loading).then(res => {
                console.log('getVisitAll', res)
                this.detailInfo = res.data || []
                this.total = this.detailInfo.length
                this.tabList.forEach(e => {
                    e.num = this.detailInfo.filter(i => i.diseaseType === e.name).length
                })
            }).finally(() => {
                this.loading = false
            })
        },
        scrollHandle(dom) {
            if (!dom) return
            if (dom.scrollTop > 0) {
                this.isRefreshDisable = true
            } else {
                this.isRefreshDisable = false
            }
        },
        onRefresh() {
            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>