<template>
    <div class='h-full flex flex-col patient-detail'>
        <DocNavBar title='居民详情' class='shrink-0'>
            <template #right>
                <span class='text-primary' @click='() => addVisible = true' v-if='deathStatus == 1'>新增</span>
                <span class='text-primary' @click='toCancelDeath' v-if='showDeath'>撤销死亡</span>
            </template>
        </DocNavBar>
        <div class='grow flex flex-col' style='background: #f5f5f5;min-height: 0px;'>
            <div :class="['px-4 pt-4 doc-list-card resident-info shrink-0',
                {'resident-info-collapsed': collapsed}]">
                <div class='mb-4'>
                    <span class='name mr-2'>{{ residentInfo.residentName || '-' }}</span>
                    <span class='tag mr-2'>{{ residentInfo.currentAge || '-' }}岁</span>
                    <span class='tag mr-2'>{{ residentInfo.genderName || '-' }}</span>
                    <span :class="[deathStatus == 9 ? 'tag-red' : 'tag' ,'mr-2']"
                          @click='toDeath'>{{ deathStatus == 9 ? '死亡' : '存活' }}</span>
                    <doc-icon type='doc-edit' class='text-primary' @click='toArchivesEdit' />
                    <!--                    <van-icon class="text-red" name="share" v-if='deathStatus ==9' @click='toCancelDeath'/>-->
                </div>
                <div class='flex flex-col' style='row-gap: .04rem;line-height: 1.5;'>
                    <div>
                        <span class='label'>身份证号</span>
                        <span>{{ $idCardHide(residentInfo.idCard) || '-' }}</span>
                    </div>
                    <div class='flex'>
                        <span class='label shrink-0'>人群标签</span>
                        <span class='grow text-wrap'>{{ residentInfo.groupsArraysName || '-' }}</span>
                    </div>
                    <div>
                        <span class='label'>联系电话</span>
                        <span>{{ $phoneHide(residentInfo.telephone) || '-' }}</span>
                    </div>
                    <!-- <div>
                        <span class="label">人群分类</span>
                        <span>{{ residentInfo.chronicCrowdName || '-' }}</span>
                    </div>
                    <div class="flex">
                        <span class="label">慢病标签</span>
                        <span>
                            <ChronicTag :list='residentInfo.chronicTagsArray' />
                        </span>
                    </div> -->
                    <div>
                        <span class='label'>建档状态</span>
                        <span v-if='residentInfo.id'>
                            <span v-if='!!residentInfo.residentsBaseDTO'>已建档</span>
                            <span v-else style='color: #8C8C8C'>未建档</span>
                        </span>
                    </div>
                    <div>
                        <span class='label'>签约状态</span>
                        <span v-if='residentInfo.id'>
                            <span v-if='!!residentInfo.signedInfoDTO'>已签约</span>
                            <span v-else style='color: #8C8C8C'>未签约</span>
                        </span>
                    </div>
                </div>
                <div :class="['text-center py-1 fold-btn', { 'fold-btn-collapsed': collapsed }]"
                     @click='() => collapsed = !collapsed'>
                    <doc-icon type='doc-left-1' />
                </div>
            </div>
            <van-tabs shrink v-model:active='activeTab' class='shrink-0 patient-detail-tabs'>
                <van-tab v-for='item in tabList' :key='item.id'
                         :title='item.name'></van-tab>
            </van-tabs>
            <div class='grow py-3 px-2' style='min-height: 0px;' v-if='residentInfo.id'>
                <ScreeningList v-if="activeTabItem.id === 'SCREENING'" />
                <GeneralList v-else-if="activeTabItem.id === 'CURRENCY'" />
                <ReferralList v-else-if="activeTabItem.id === 'REFERRAL'" />
                <ConsultationList v-else-if="activeTabItem.id === 'CONSULTATION'" />
                <DiseaseList v-else :key='activeTabItem.value' :diseaseName='activeTabItem.name'
                             :diseaseType='activeTabItem.value' />
            </div>
            <van-popup
                v-model:show='addVisible'
                position='bottom'
            >
                <div class='popup-bottom-panel'>
                    <div class='p-4 text-16 flex items-center justify-between'
                         style='border-bottom: 1px solid #00000019;'>
                        <span class='left' @click='addVisible = false'>取消</span>
                        <span class='font-semibold'>请选择</span>
                        <span class='right' style='width: .32rem;'></span>
                    </div>
                    <div class='p-4'>
                        <CheckBtn :options='addOptions' activeStyleNone :clearable='false'
                                  @change='onAddChange' column-1 />
                        <div class='pb-5'></div>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
import { useStore } from '@/doctor/store'
import { getResidentsDeath, queryResidentInfo } from '@/api/doctor/resident.js'
import { showConfirmDialog, showNotify } from 'vant'
import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
import ChronicTag from '@/doctor/components/chronicTag/ChronicTag.vue'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
import ScreeningList from './components/screening/Index.vue'
import GeneralList from './components/generalFU/List.vue'
import ReferralList from './components/referral/List.vue'
import ConsultationList from './components/consultation/List.vue'
import DiseaseList from './components/disease/Index.vue'
import { deleteFirstScreening } from '@/api/doctor/screening'
import { saveResidentsDeath } from '@/api/doctor/death'


export default {
    name: 'PatientDetail',
    components: {
        DocNavBar,
        ChronicTag,
        ScreeningList,
        GeneralList,
        ReferralList,
        ConsultationList,
        DiseaseList,
        CheckBtn
    },
    data() {
        return {
            store: useStore(),
            residentInfoId: null,
            residentInfo: {},
            showDeath:false,
            // 折叠
            collapsed: true,
            // 标签页index
            activeTab: 0,
            // 新增弹窗
            addVisible: false,
            addOptions: [
                { name: '新增主要慢病高危筛查', value: 1, path: '/doctor/screening/firstForm' },
                { name: '新增专病高危筛查', value: 2, path: '/doctor/screening/secondForm' },
                { name: '新增主要慢病高危随访', value: 8, path: '/doctor/screening/highVisit/firstForm' },
                { name: '新增专病高危随访', value: 9, path: '/doctor/screening/highVisit/secondForm' },
                { name: '新增慢病诊断', value: 3, path: '/doctor/diagnose/form' },
                { name: '新增通用随访', value: 4, path: '/doctor/followUp/generalFU/add' },
                { name: '新增死亡记录', value: 5, path: '/doctor/deathRecord/add' },
                // { name: '新增死亡记录详情', value: 6, path: '/doctor/deathRecord/detail' },
                { name: '新增专病随访', value: 7, path: '/doctor/followUp/separateFU/add' }
            ]
        }
    },
    provide() {
        return {
            residentInfo: () => this.residentInfo
        }
    },
    computed: {
        chronicTagsArray() {
            const chronicTagsArray = this.residentInfo.chronicTagsArray || ''
            return chronicTagsArray.split(',')
        },
        groupsArrays() {
            const groupsArrays = this.residentInfo.groupsArrays || ''
            return groupsArrays.split(',')
        },
        // 死亡状态
        deathStatus() {
            return this.residentInfo.chronicStatus
        },
        authInfo() {
            return this.store.authInfo
        },
        tabList() {
            const result = [
                { name: '筛查管理', id: 'SCREENING' },
                ...this.diagnoseList,
                { name: '通用随访', id: 'CURRENCY' }
                // { name: '转诊记录', id: 'REFERRAL' },
                // { name: '会诊记录', id: 'CONSULTATION' }
            ]
            return result
        },
        activeTabItem() {
            return this.tabList[this.activeTab] || {}
        },
        diagnoseList() {
            const diseaseList = [
                { name: '高血压', value: 1, code: '512', id: 'HYPERTENSION' },
                { name: '糖尿病', value: 2, code: '1024', id: 'DIABETE' },
                { name: '冠心病', value: 3, code: '2048', id: 'COPD' },
                { name: '脑卒中', value: 4, code: '4096', id: 'STROKE' },
                { name: '慢性阻塞性疾病', value: 5, code: '8192', id: 'NEPHROPATHY' },
                { name: '慢性肾脏病', value: 6, code: '16384', id: 'KIDNEY' },
                { name: '血脂异常', value: 7, code: '32768', id: 'DYSLIPEMIA' }
            ]
            return diseaseList.filter(e => this.groupsArrays.includes(e.code))
        }
    },
    activated() {
        this.residentInfoId = this.$route.query.residentInfoId
    },
    methods: {
        load() {
            if (!this.residentInfoId) {
                showNotify({ type: 'warning', message: '未获取到患者信息' })
                return
            }
            queryResidentInfo({ residentInfoId: this.residentInfoId }).then(res => {
                this.residentInfo = res.data || {}
                if (!this.activeTabItem.value) {
                    this.activeTab = 0
                }
                if (this.deathStatus == 9) {
                  this.queryResidentsDeath()
                } else {
                    this.showDeath = false
                }
            })
        },
        //获取死亡信息
        queryResidentsDeath() {
            let par = {
                residentInfoId: this.residentInfoId
            }
            getResidentsDeath(par).then(res => {
                let CdofficeId = res.data.createOfficeId
                if (this.authInfo.officeId == CdofficeId) {
                    this.showDeath = true
                } else {
                    this.showDeath = false
                }
            })
        },
        onAddChange(val, option) {
            console.log(val, option)
            if (this.deathStatus === 9) {
                this.$message.info('该患者已死亡')
                return
            }
            this.addVisible = false
            const query = { residentInfoId: this.residentInfoId }
            if (val == 3 && this.diagnoseList.length) {
                // 诊断
                query.excludeType = this.diagnoseList.map(e => e.value).join(',')
            }
            if (val === 7) {
                query.diseaseType = this.tabList[this.activeTab].value
            }
            this.$router.push({
                path: option.path,
                query
            })
        },
        toArchivesEdit() {
            this.$router.push({
                path: '/doctor/archives-form',
                query: { residentInfoId: this.residentInfoId }
            })
        },
        //死亡详情
        toDeath() {
            if (this.deathStatus != 9) return
            this.$router.push({
                path: '/doctor/deathRecord/detail',
                query: { residentInfoId: this.residentInfoId }
            })
        },
        //撤销死亡
        toCancelDeath() {
            showConfirmDialog({
                message: '确定要撤销死亡吗？'
            }).then(() => {
                const query = {
                    residentInfoId: this.residentInfoId,
                    // operateType=1 新增死亡   3-撤销删除
                    operateType: 3,
                    source: 2
                }
                saveResidentsDeath(query).then(res => {
                    if (res.code == 'SUCCESS') {
                        showNotify({ type: 'success', message: '撤销成功' });
                        this.store.onRefreshMark()
                    }
                })
            }).catch((err) => {
                console.warn('death', err)
            })
        }
    },
    watch: {
        residentInfoId(val) {
            if (!val) return
            this.residentInfo = {}
            this.load()
        },
        'store.refreshMark'() {
            this.load()
        }
    }
}
</script>

<style lang='less' scoped>
.resident-info {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    height: auto;
    // transition: height .2s;
    padding-bottom: 28px;
}

.resident-info-collapsed {
    height: 100px;
}

.fold-btn {
    color: #BFBFBF;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    border-bottom: 1px solid #00000019;

    .svg-icon {
        transform: rotate(90deg);
    }
}

.fold-btn-collapsed {
    .svg-icon {
        transform: rotate(-90deg);
    }
}

.tag-red {
    background: #FFF3F0;
    color: #FF4D4F;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
}

.tag-blue {
    background: #F0F3FF;
    color: var(--van-primary-color);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
}

:deep(.patient-detail-tabs) {
    .van-tab {
        color: #262626;
    }

    .van-tab--active {
        color: var(--van-tab-active-text-color);
        font-weight: 500;
    }

    .van-tabs__line {
        width: 28px;
        height: 2px;
        bottom: 22px;
    }
}
</style>