<template>
    <div class='h-full visit-list' 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'>
                    <div v-for='item in list' :key='item.id'
                         :class="['mb-3', {'first-card': item.serveType == 1},
                            {'second-card': item.serveType == 2},
                            {'general-card': item.serveType == 3}]">
                        <div class='title px-4 py-1'>{{ item.serveTypeName }}</div>
                        <div class='py-3 px-4 doc-list-card'>
                            <div class='flex flex-col' style='row-gap: .04rem;line-height: 1.5;'
                                 @click='toDetail(item)'>
                                <div>
                                    <span class='label'>随访日期</span>
                                    <span>{{ item.visitDate }}</span>
                                </div>
                                <div>
                                    <span class='label'>随访类型</span>
                                    <span>{{ item.visitTypeName || '-' }}</span>
                                </div>
                                <div>
                                    <span class='label'>随访方式</span>
                                    <span>{{ item.visitWayName || '-' }}</span>
                                </div>
                                <div class='text-ellipsis'>
                                    <span class='label'>随访医生</span>
                                    <span>{{ item.visitDoctorName || '-' }}</span>
                                </div>
                                <div class='text-ellipsis'>
                                    <span class='label'>随访机构</span>
                                    <span>{{ item.visitUnitName || '-' }}</span>
                                </div>
                            </div>
                            <div class='divider my-3'></div>
                            <div class='bt-group'>
                                <van-button round size='small' class='doc-btn-primary' @click='toDetail(item)'>详情
                                </van-button>
                                <van-button round size='small' class='doc-btn-primary' @click='editBtn(item)'
                                            v-if='!(item.allowUpdate !==1 || item.serveType == 3)'>修改
                                </van-button>
                                <van-button round size='small' class='doc-btn-red' @click='delBtn(item)'
                                            v-if='!(item.allowUpdate !==1 || item.serveType == 3)'>删除
                                </van-button>
                            </div>
                        </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>
</template>

<script>
import { getHighVisitList } from '@/api/doctor/visit.js'
import { useStore } from '@/doctor/store'
import { delHighVisit } from '@/api/doctor/highVisitApi'
import { showConfirmDialog } from 'vant'
import { deleteSecondScreening } from '@/api/doctor/screening'

export default {
    inject: ['residentInfo'],
    data() {
        return {
            store: useStore(),
            list: [],
            pagination: {
                total: 0,
                pageIndex: 1,
                pageSize: 8
            },
            loading: false,
            finished: false,
            loadingRefresh: false,
            isRefreshDisable: false
        }
    },
    computed: {
        residentInfoId() {
            return this.residentInfo().residentInfoId
        }
    },
    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,
                residentInfoId: this.residentInfoId
            }
            getHighVisitList(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(false)
        },
        toDetail(record) {
            if (!record) return
            if (record.id == null) {
                this.$message.info('暂时无法查看 详情信息')
                return
            }
            //主要慢病
            if (record.serveType == 1) {
                this.$router.push({
                    path: '/doctor/screening/highVisit/firstDetail',
                    query: {
                        id: record.relationId
                    }
                })
            }
            //专病高危
            if (record.serveType == 2) {
                this.$router.push({
                    path: '/doctor/screening/highVisit/secondDetail',
                    query: {
                        id: record.relationId
                    }
                })
            }
            if (record.serveType == 3) {
                this.$router.push({
                    path: '/doctor/screening/highVisit/GeneralFUDetail',
                    query: {
                        id: record.relationId
                    }
                })
            }
        },
        editBtn(record) {
            if (!record) return
            if (record.id == null) {
                this.$message.info('暂时无法修改')
                return
            }
            //主要慢病
            if (record.serveType == 1) {
                this.$router.push({
                    path: '/doctor/screening/highVisit/firstForm',
                    query: {
                        id: record.relationId
                    }
                })
            }
            //专病高危
            if (record.serveType == 2) {
                this.$router.push({
                    path: '/doctor/screening/highVisit/secondForm',
                    query: {
                        id: record.relationId
                    }
                })
            }
        },
        delBtn(record) {
            showConfirmDialog({
                message: '确定要删除吗？'
            }).then(() => {
                delHighVisit({ id: record.id }).then(res => {
                    setTimeout(() => {
                        this.$message.info('删除成功')
                    }, 600)
                    this.list = this.list.filter(e => e.id !== record.id)
                })
            }).catch((err) => { console.warn('delBtn', err) })
        },
    },
    watch: {
        'store.refreshMark'() {
            this.onRefresh()
        }
    }
}
</script>

<style lang='less' scoped>

</style>