<template>
    <div>
        <van-nav-bar title='随访详情' left-text='' left-arrow @click-left='toBack'></van-nav-bar>
        <div class='p-4 detail-info'>
            <div class='title'>居民信息</div>
            <div class='detail-div mt-3'>
<!--                <div class='flex items-center justify-between'>
                    <div class='label'>证件类型</div>
                    <div>{{ residentInfo.certificateTypeName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>证件号码</div>
                    <div>{{ residentInfo.idCard || '-' }}</div>
                </div>-->
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>姓名</div>
                    <div>{{ residentInfo.residentName || '-' }}</div>
                </div>
<!--                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>性别</div>
                    <div>{{ residentInfo.genderName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>出生日期</div>
                    <div>{{ residentInfo.dataBirth || '-' }}</div>
                </div>-->
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>本人电话</div>
                    <div>{{ residentInfo.telephone || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>民族</div>
                    <div>{{ residentInfo.nationalName || '-' }}</div>
                </div>
<!--                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>年龄</div>
                    <div>{{ residentInfo.currentAge || '-' }} 岁</div>
                </div>-->


                <div class='flex flex-wrap justify-between mt-2'>
                    <div class='label'>现住址</div>
                    <div style='flex: 1'>{{ residentInfo.fullNowAddress || '-' }}</div>
                </div>
                <div class='flex flex-wrap justify-between mt-2'>
                    <div class='label'>户籍地址</div>
                    <div style='flex: 1'>{{ residentInfo.fullPermanentAddress || '-' }}</div>
                </div>
            </div>
            <div class='title mt-3'>联系人信息</div>
            <div class='detail-div mt-3'>
                <div class='flex items-center justify-between'>
                    <div class='label'>联系人姓名</div>
                    <div>{{ residentInfo.contactName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>与居民关系</div>
                    <div>{{ residentInfo.relationName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>联系电话</div>
                    <div>{{ residentInfo.contactPhone || '-' }}</div>
                </div>
            </div>

            <div class='title mt-3'>随访信息</div>
            <div class='detail-div mt-3'>
                <div class='flex items-center justify-between'>
                    <div>本次随访情况</div>
                    <div>{{ info.visitSituationName }}</div>
                </div>
                <div class='flex items-center justify-between mt-2' v-if='info.visitSituation == 2'>
                    <div>失访原因</div>
                    <div>
                        <span v-if='info.lossReason != 9'>{{ info.lossReasonName || '-' }}</span>
                        <span v-if='info.lossReason == 9'>{{ info.lossReasonOther || '-' }}</span>
                    </div>
                </div>
                <div class='flex items-center justify-between mt-2' v-if='info.lossReason == 3'>
                    <div>死亡原因</div>
                    <div>{{ info.deathReason }}</div>
                </div>
                <div class='flex items-center justify-between mt-2' v-if='info.visitSituation == 1'>
                    <div>随访方式</div>
                    <div>{{ info.visitWayName }}</div>
                </div>
                <div class='white-b mt-2' v-if='showOne && info.visitSituation == 1'>
                    <span>居民电话： </span><span>{{ residentInfo.telephone || '-' }}</span>
                </div>
                <div class='white-b mt-2' v-if='showThree && info.visitSituation == 1'>
                    <div>催检内容：</div>
                    <div>{{ info.urgentInsContent }}</div>
                </div>
                <div class='mt-2' v-if='showOne && info.visitSituation == 1'>
                    <div>随访内容</div>
                    <div class='white-b mt-2' style='min-height: 60px'>
                        <div>{{ info.visitContent }}</div>
                    </div>
                </div>
                <div class='mt-2' v-if='showOne && info.visitSituation == 1'>
                    <div>处置意见</div>
                    <div class='white-b mt-2' style='min-height: 60px'>
                        <div>{{ info.disposalOpinion }}</div>
                    </div>
                </div>
                <div class='mt-2' v-if='(showOne || showTwo) && info.visitSituation == 1 && info.isHealthGuide == 1'>
                    <div>健康指导</div>
                    <div class='white-b mt-2'>
                        <div class='flex flex-wrap mt-2'
                             v-for='(item, index) in healthInterventionsInfo.visitHealthGuideList'>
                            <div v-if="item.name != '无'" class='label'>{{ item.name }}：</div>
                            <div style='flex: 1'>{{ item.templateContent }}</div>
                        </div>
                    </div>
                </div>

                <div class='mt-2' v-if='imgList1.length'>
                    <div>随访记录</div>
                    <div class='flex items-center' style='flex-wrap: wrap'>
                        <div v-for='(item, index) in imgList1'>
                            <!--                     图片-->
                            <div v-if="item.imgFlag == 'img'" class='mt-2'>
                                <img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;'>
                            </div>
                        </div>
                    </div>
                    <!--                pdf-->
                    <div>
                        <div v-for='item in imgList1'>
                            <div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'">
                                <div class='flex items-center justify-between'>
                                    <div class='flex items-center' @click.stop='toPdf(item)'>
                                        <div>
                                            <doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon>
                                        </div>
                                        <div class='ml-1'>{{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class='mt-2' v-if='imgList2.length'>
                    <div>现场随访照片</div>
                    <div class='flex items-center' style='flex-wrap: wrap'>
                        <div v-for='(item, index) in imgList2'>
                            <!--                     图片-->
                            <div v-if="item.imgFlag == 'img'" class='mt-2'>
                                <img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;'>
                            </div>
                        </div>
                    </div>
                    <!--                pdf-->
                    <div>
                        <div v-for='item in imgList2'>
                            <div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'">
                                <div class='flex items-center justify-between'>
                                    <div class='flex items-center' @click.stop='toPdf(item)'>
                                        <div>
                                            <doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon>
                                        </div>
                                        <div class='ml-1'>{{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class='flex items-center justify-between mt-2' v-if='info.visitSituation == 1'>
                    <div>下次随访日期</div>
                    <div>{{ info.nextVisitDate || '-' }}</div>
                </div>

                <div class='flex items-center justify-between mt-2'>
                    <div>随访单位</div>
                    <div>{{ info.visitUnitName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div>随访科室</div>
                    <div>{{ info.visitOfficeName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div>随访医生</div>
                    <div>{{ info.visitDoctorName || '-' }}</div>
                </div>
            </div>
        </div>
        <div class='px-5  flex align-center justify-around pt-2 pb-2'>
            <van-button type='primary' round plain style='width: 70%;background: #F0F3FF;border: 0px'
                        @click='toBack'>返回
            </van-button>
        </div>
    </div>
</template>

<script>
import { fetchCurrencyById } from '@/api/doctor/generalFU'
import { showToast } from 'vant'
import { useStore } from '@/doctor/store'

export default {
    name: 'Detail',
    props: {
        id: [String, Number]
    },
    data() {
        return {
            store: useStore(),
            info: {},
            residentInfo: {}
        }
    },
    computed: {
        routerDetail() {
            return this.$route.query
        },
        //复检指导
        showOne() {
            const { visitWay } = this.info
            let res = false
            if (visitWay == 5 || visitWay == 6 || visitWay == 7 || visitWay == 8) {
                res = true
            }
            return res
        },
        //微信、短信指导
        showTwo() {
            const { visitWay } = this.info
            let res = false
            if (visitWay == 9 || visitWay == 11) {
                res = true
            }
            return res
        },
        //催检
        showThree() {
            const { visitWay } = this.info
            let res = false
            if (visitWay == 10 || visitWay == 12) {
                res = true
            }
            return res
        },
        //健康指导
        healthInterventionsInfo() {
            const modeArray = this.store.getDict('DC00084')
            let visitHealthGuideList = []
            if (this.info.healthGuideContent) {
                visitHealthGuideList = JSON.parse(this.info.healthGuideContent)
            }
            const res = {
                visitHealthGuideList: modeArray.map(e => {
                    const item = visitHealthGuideList.find(i => i.templateMode === e.value)
                    return {
                        templateMode: e.value,
                        name: e.name,
                        templateContent: item ? item.templateContent : '',
                        id: item ? item.visitId : ''
                    }
                })
            }
            return res
        },
        imgList1() {
            const { uploadVisitRecordImageList = [] } = this.info
            uploadVisitRecordImageList.forEach(item => {
                item['imgFlag'] = ''
                if (item.fileType == 'pdf') {
                    item['imgFlag'] = 'pdf'
                }
                if (item.fileType == 'img') {
                    item['imgFlag'] = 'img'
                }
            })
            return uploadVisitRecordImageList
        },
        imgList2() {
            const { sceneVisitImageList = [] } = this.info
            sceneVisitImageList.forEach(item => {
                item['imgFlag'] = ''
                if (item.fileType == 'pdf') {
                    item['imgFlag'] = 'pdf'
                }
                if (item.fileType == 'img') {
                    item['imgFlag'] = 'img'
                }
            })
            return sceneVisitImageList
        }
    },
    created() {
        this.load()
    },
    methods: {
        async load() {
            if (!this.routerDetail.relationId) {
                showToast('未获取到信息')
                return
            }
            let par = {
                id: this.routerDetail.relationId
            }
            fetchCurrencyById(par).then(res => {
                let result = res.data || {}
                this.info = result
                this.residentInfo = result.residentsRecord || {}
            }).finally(() => {
            })
        },
        toBack() {
            this.$router.back()
        }
    }
}
</script>

<style scoped lang='less'>
.title {
    font-weight: bold;
}

.mt-4 {
    margin-top: 24px;
}

.detail-info {
    height: calc(100vh - 110px);
    overflow-y: auto;
}

.detail-div {
    padding: 12px;
    border: 1px solid #EEEEEE;
    background: #F8FAFC;
    border-radius: 8px;
}

.white-b {
    background: #FFFFFF;
    padding: 12px;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
}

.label {
    width: 104px;
}

:deep(.van-nav-bar .van-icon) {
    color: #000000;
}
</style>