<template>
    <div class="flex flex-col visit-list" style="height: 100vh">
        <div class="p-3 text-black text-center shrink-0 doc-nav-bar" v-if='showNav()'>
            <span>随访记录</span>
        </div>
        <van-tabs v-model:active='activeTab' class='shrink-0 doc-tabs' 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' 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="p-2 flex flex-col gap-y-2.5 card-list">
                    <div v-for='item in list' :key='item.id' class='py-3 px-4 card' @click.stop='toDetail(item)'>
                        <div v-if='item.tabs == 3'>
                            <span class="label">慢病类型</span>
                            <span>{{ item.diseaseTypeName || '-' }}</span>
                        </div>
                        <div>
                            <span class="label">随访日期</span>
                            <span>{{ item.visitDate }}</span>
                        </div>
                        <div v-if='item.tabs == 3 || item.tabs == 4'>
                            <span class="label">下次随访日期</span>
                            <span> {{ item.nextVisitDate || '-' }}</span>
                        </div>
                        <div v-if='item.nextVisitDate && (item.tabs == 1 || item.tabs == 2)'>
                            <span class="label">下次随访日期</span>
                            <span> {{ item.nextVisitDate || '-' }}</span>
                        </div>
                        <div>
                            <span class="label">随访医生</span>
                            <span> {{ item.visitDoctorName }}</span>
                        </div>
                        <div>
                            <span class="label">随访机构</span>
                            <span>  {{ item.visitUnitName }}</span>
                        </div>
                        <span class="tag tag-green" v-show="item.tabs == 1">主要慢病高危随访</span>
                        <span class="tag tag-green" v-show="item.tabs == 2">专病高危随访</span>
                        <span class="tag tag-green" v-show="item.tabs == 3">专病随访</span>
                        <span class="tag tag-green" v-show="item.tabs == 4">通用随访</span>

                    </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 { showConfirmDialog, showToast } from 'vant'
import { useStore } from '@/residentWX/store'
import { queryVisitList } from '@/api/residentWX/visit'

export default {
    inject: ['showNav', 'isResidentInfo'],
    data() {
        return {
            store: useStore(),
            activeTab: undefined,
            list: [],
            pagination: {
                total: 0,
                pageIndex: 1,
                pageSize: 8
            },
            loading: false,
            finished: false,
            loadingRefresh: false,
            isRefreshDisable: false
        }
    },
    computed: {
        baseInfo() {
            return this.store.userInfo
        },
        groupsArrays() {
            let groupsArrays = this.baseInfo.groupsArrays || ''
            return groupsArrays.split(',')
        },
        tabList() {
            const list = [
                { title: '全部', name: undefined, code: undefined },
                { title: '高血压', name: 512, code: '512' },
                { title: '糖尿病', name: 1024, code: '1024' },
                { title: '冠心病', name: 2048, code: '2048' },
                { title: '脑卒中', name: 4096, code: '4096' },
                { title: '慢性阻塞性疾病', name: 8192, code: '8192' },
                { title: '慢性肾病', name: 16384, code: '16384' },
                { title: '血脂异常', name: 32768, code: '32768' }
            ]
            let res = list.filter(e => this.groupsArrays.includes(e.code)) || []
             res.unshift( { title: '全部', name: '', code: '' })
            return res
        }
    },
    mounted() {
        document.title = '随访记录'
        const list = this.$refs.list
        list.addEventListener('scroll', () => {
            if (list.scrollTop > 0) {
                this.isRefreshDisable = true
            } else {
                this.isRefreshDisable = false
            }
        })
    },
    methods: {
        load(loading = true) {
            if (!this.isResidentInfo()) return
            const query = {
                residentInfoId: this.baseInfo.residentInfoId,
                groupsArrays: this.activeTab,
                pageIndex: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize
            }
            queryVisitList(query, loading).then(res => {
                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()
        },
        init() {
            if (this.groupsArrays.length) {
                const item = this.tabList.find(e => e.code === this.groupsArrays[0]) || {}
                this.activeTab = item.name
            }
        },
        tabChange() {
            this.list = []
            this.pagination.pageIndex = 1
            this.load()
        },
        onRefresh() {
            this.list = []
            this.pagination.pageIndex = 1
            this.load(false)
        },
        toDetail(item) {
            let par = {}
            let path = ``
            //主要慢病高危随访
            if (item.tabs == 1) {
                path = `FirstFUDetail/${item.id}`
            }
            //专病高危随访
            if (item.tabs == 2) {
                path = `SecondFUDetail/${item.id}`
            }
            //专病随访
            if (item.tabs == 3) {
                path = `SeparateFUDetail/${item.id}/${item.diseaseType}`
            }
            //通用随访
            if (item.tabs == 4) {
                path = `GeneralFUDetail/${item.id}`
            }

            this.$router.push({
                path,
                query: par
            })
        },
    }
}
</script>

<style lang='less' scoped>
@import url('../utils/common.less');
.visit-list {
    background-color: #f9f9f9;
}
.card-list {
    padding-bottom: 76px;
}
.card {
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    >div {
        position: relative;
        display: flex;
        margin-bottom: 8px;
        &:last-of-type {
            margin-bottom: 0;
        }
    }
    .label {
        min-width: 7em;
        color: #8C8C8C;
    }
}
.tag {
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 12px;
}
.tag-yellow {
    border: 1px solid #FFD591;
    color: #FA8C16;
    background-color: #FFF7E6;
}
.tag-green {
    border: 1px solid #B7EB8F;
    color: #52C41A;
    background-color: #F6FFED;
}
</style>