<template>
    <div class="h-full flex flex-col visit">
        <van-tabs v-model:active='activeTab' class="shrink-0" v-if="tabList.length"
            @change="tabChange">
            <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 card-list" v-if="baseInfo.id && list.length">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onMore"
            >
                <div v-for='item in list' :key="item.id" class="p-4 mt-3 card" @click.stop='toDetail(item)'>
                    <div class='flex items-center'>
                        <div class='detail-left'>
                            随访情况
                        </div>
                        <div class='detail-right'>
                            {{ item.visitSituationName }}
                        </div>
                    </div>
                    <div class='mt-3 flex items-center'>
                        <div class='detail-left'>
                            随访日期
                        </div>
                        <div class='detail-right'>
                            {{ item.serveDate }}
                        </div>
                    </div>
                    <div class='mt-3 flex items-center'>
                        <div class='detail-left'>
                            随访医生
                        </div>
                        <div class='detail-right'>
                            {{ item.serveDoctorName }}
                        </div>
                    </div>
                    <div class='mt-3 flex items-center'>
                        <div class='detail-left'>
                            随访方式
                        </div>
                        <div class='detail-right'>
                            {{ item.serveTypeName }}
                        </div>
                    </div>
                    <div class='mt-3 flex items-center'>
                        <div class='detail-left'>
                            随访机构
                        </div>
                        <div class='detail-right'>
                            {{ item.serveUnitName }}
                        </div>
                    </div>
                    <div class='mt-3 flex items-center'>
                        <div class='detail-left'>
                            下次随访日期
                        </div>
                        <div class='detail-right'>
                            {{ item.nextVisitDate || '-' }}
                        </div>
                    </div>

                    <van-divider class='mt-3' />

                    <div class="flex justify-end">
                        <van-button round type="primary" class="card-bt" style="margin-right: .12rem"
                            @click.stop="editBtn(item)">修改</van-button>
                        <van-button round type="primary" class="card-bt" @click.stop="delBtn(item)">删除</van-button>
                    </div>

                    <span class="px-3 float-bt">
                        通用随访
                    </span>
                </div>
            </van-list>
        </div>
        <div class="text-center shrink-0 empty" v-else>
            <img src="@/assets/image/doctor/empty.png" alt="" style="width: 1.2rem;">
            <p>暂无数据</p>
        </div>

        <div class="p-3 floor">
            <van-button round block type="primary" class="card-bt" @click="addBtn">新增通用随访</van-button>
        </div>
    </div>
</template>

<script>
import { queryVisitByPage, deleteVisit } from '@/api/doctor/generalFU.js'
import { showConfirmDialog, showToast } from 'vant'

export default {
    data() {
        return {
            activeTab: undefined,
            list: [],
            pagination: {
                total: 0,
                pageIndex: 1,
                pageSize: 10
            },
            loading: false,
            finished: false
        }
    },
    inject: ['getBaseInfo'],
    computed: {
        baseInfo() {
            return this.getBaseInfo() || {}
        },
        chronicTagsArray() {
            let chronicTagsArray = this.baseInfo.chronicTagsArray || ''
            return chronicTagsArray.split(',')
        },
        tabList() {
            const list = [
                { title: '高血压', name: 1, code: '1' },
                { title: '糖尿病', name: 2, code: '2' },
                { title: '冠心病', name: 3, code: '4' },
                { title: '脑卒中', name: 4, code: '8' },
                { title: '慢性阻塞性疾病', name: 5, code: '16' },
                { title: '慢性肾病', name: 6, code: '32' },
                { title: '血脂异常', name: 7, code: '64' },
            ]
            return list.filter(e => this.chronicTagsArray.includes(e.code))
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        load() {
            const query = {
                residentInfoId: this.baseInfo.residentInfoId,
                serveTypeList: [5, 6, 7, 8, 9, 10, 11, 12, 14],
                diseaseType: this.activeTab,
                pageIndex: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize,
            }
            queryVisitByPage(query, true).then(res => {
                this.list = res.data.dataList || []
                this.pagination.total = res.data.total || 0
                this.finished = this.list.length >= this.pagination.total
            })
        },
        onMore() {
            this.pagination.pageIndex++
            const query = {
                residentInfoId: this.baseInfo.residentInfoId,
                serveTypeList: [5, 6, 7, 8, 9, 10, 11, 12, 14],
                diseaseType: this.activeTab,
                pageIndex: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize,
            }
            queryVisitByPage(query, false).then(res => {
                this.pagination.total = res.data.total || 0
                this.list = this.list.concat(res.data.dataList || [])
                this.finished = this.list.length >= this.pagination.total
            })
        },
        init() {
            if (this.chronicTagsArray.length) {
                const item = this.tabList.find(e => e.code === this.chronicTagsArray[0]) || {}
                this.activeTab = item.name
                // this.load()
            }
        },
        tabChange() {
            this.load()
        },
        addBtn() {
            if (this.baseInfo.chronicStatus === 9) {
                showToast('该居民已标记为死亡，无法新增随访')
                return
            }
            let par = {
                residentInfoId: this.baseInfo.residentInfoId
            }
            this.$router.push({
                path: `/doctor/followUp/generalFU/add`,
                query: par
            })
        },
        toDetail(item) {
            let par = {
                relationId: item. relationId
            }
            this.$router.push({
                path: `/doctor/followUp/generalFU/detail`,
                query: par
            })
        },
        editBtn(item) {
            let par = {
                id: item.relationId,
                residentInfoId: this.baseInfo.residentInfoId
            }
            this.$router.push({
                path: `/doctor/followUp/generalFU/add`,
                query: par
            })
        },
        delBtn(item) {
            showConfirmDialog({
                title: '提示',
                message: '确认删除该随访记录吗？确认后将无法查看该随访信息'
            }).then(() => {
                // on confirm
                // console.log(item.id)
                deleteVisit(item.id).then(res => {
                    this.load()
                })
            })
            .catch(() => {
                // on cancel
            })
        }
    }
}
</script>

<style lang="less" scoped>
.card-list {
    padding-bottom: 76px;
}
.card {
    position: relative;
    background-color: #fff;
    .detail-left {
        width: 8em;
        color: #8C8C8C;
    }
    .card-bt {
        font-size: 14px;
        color: #607FF0;
        background-color: #F0F3FF;
        border: 0;
        height: 26px;
    }
    .float-bt {
        position: absolute;
        top: 10px;
        right: 0;
        background-color: var(--van-primary-color);
        color: #fff;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        height: 26px;
        line-height: 26px;
    }
}
.floor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>