<template>
    <div class="h-full flex flex-col diagnose-dtail">
        <DocNavBar title="诊断详情" class="shrink-0"></DocNavBar>
        <div class="px-4 py-3 shrink-0 base-info">
            <div class="name">{{ baseInfo.residentName }}</div>
            <div class="flex flex-wrap mt-1 w-full base-info-inner" style="line-height: .22rem;" >
                <div>
                    <span>证件类型：</span>
                    <span>{{ baseInfo.certificateTypeName }}</span>
                </div>
                <div>
                    <span>证件号码：</span>
                    <span>{{ baseInfo.idCard }}</span>
                </div>
                <div>
                    <span>出生日期：</span>
                    <span>{{ baseInfo.dataBirth }}</span>
                </div>
                <div>
                    <span>民族：</span>
                    <span>{{ baseInfo.nationalName }}</span>
                </div>
                <div>
                    <span>其他联系人：</span>
                    <span>{{ baseInfo.contactName }}</span>
                </div>
                <div>
                    <span>联系人关系：</span>
                    <span>
                        {{ baseInfo.relationName }}
                        <span v-if="baseInfo.relationOther"> {{ baseInfo.relationOther }}</span>
                    </span>
                </div>
                <div class="w-full">
                    <span>现住址：</span>
                    <span>{{ baseInfo.fullNowAddress }}</span>
                </div>
                <div class="w-full">
                    <span>户籍地址：</span>
                    <span>{{ baseInfo.fullPermanentAddress }}</span>
                </div>
            </div>
        </div>
        <div class="p-3 grow cont-box">
            <div class="p-3 h-full cont-inner">
                <div class="flex justify-between collapse-head mt-2">
                    <span class="text-16 font-semibold">全部内容</span>
                    <span @click="toggleAll">
                        <span v-if="!collapseAll">展开全部</span>
                        <span v-else>展开收起</span>
                        <span :class="['ml-2 icon-down', { 'icon-down-expanded': collapseAll }]">
                            <doc-icon type="doc-down" />
                        </span>
                    </span>
                </div>

                <van-collapse :model-value="activeCollapse" ref="collapse" class="doc-collapse"
                    @change="collapseChange">
                    <van-collapse-item v-for="collapse in collapseList" :key="collapse.name"
                        :title="collapse.title" :name="collapse.name">
                        <template #right-icon>
                            <doc-icon type="doc-down" />
                        </template>
                        <div v-if="collapse.name === '1'">
                            <div v-for="item in collapse.columns" :key="item.key" >
                                <div class="flex justify-between py-1 border-bottom item">
                                    <span class="shrink-0 mr-2 label">{{ item.title }}</span>
                                    <span class="text-end">{{ info[item.key] || '-' }}</span>
                                </div>
                            </div>
                            <div class="py-1">诊断评估</div>
                            <div class="py-1 px-3 block">
                                {{ info.diagnoseResultValue }}
                            </div>
                        </div>
                        <div v-else-if="collapse.name === '2'">
                            <div v-for="inspect in inspectInfo" :key="inspect.id" >
                                <div>{{ inspect.diagnoseName }}</div>
                                <div v-for="item in inspect.inspectDetailedObj" :key="item.itemCode"
                                    class="flex justify-between py-1 border-bottom item">
                                    <span class="shrink-0 mr-2 label">{{ item.itemName }}</span>
                                    <span class="text-end">
                                        {{ item.itemValue }}
                                        <span v-if="item.unit" class="ml-1">{{ item.unit }}</span>
                                    </span>
                                </div>
                            </div>
                            <imagePreview :imgList="inspectFileList" class="mt-1"
                                v-if="inspectFileList.length"/>
                            <span class="py-1" v-if="!inspectFileList.length && !inspectInfo.length">-</span>
                        </div>
                        <div v-else-if="collapse.name === '3'">
                            <div v-for="check in checkInfo" :key="check.id" >
                                <div class="py-1" >{{ check.diagnoseName }}</div>
                                <div class="py-1 px-3 block" >
                                    <div v-if="check.inspectDetailedObj.length">
                                        <span>{{ check.inspectDetailedObj[0].itemValue }}</span>
                                    </div>
                                    <imagePreview :imgList="check.inspectFileList" class="mt-1"
                                        v-if="check.inspectFileList?.length"/>
                                </div>
                            </div>
                            <span class="py-1" v-if="!checkInfo.length">-</span>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
    </div>
</template>

<script>
import { showNotify } from 'vant'
import { getDiagnoseDetail } from '@/api/doctor/disease.js'
import { useStore } from '@/doctor/store'
import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
import imagePreview from '@/doctor/components/imagePreview/imagePreview.vue'

export default {
    components: {
        DocNavBar,
        imagePreview
    },
    data() {
        return {
            store: useStore(),
            activeCollapse: [],
            collapseList: [
                { title: '诊断评估', name: '1', columns: [
                    { title: '诊断名称', key: 'diseaseName' },
                    { title: '诊断日期', key: 'diseaseDate' },
                    { title: '诊断单位', key: 'diseaseUnitName' },
                    { title: '诊断科室', key: 'diseaseOfficeName' },
                    { title: '诊断医生', key: 'diseaseDoctorName' },
                ]},
                { title: '检验信息', name: '2'},
                { title: '检查信息', name: '3'}
            ],
            // 全部展开、收起
            collapseAll: false,
            info: {}
        }
    },
    computed: {
        id() {
            return this.$route.query.id
        },
        baseInfo() {
            return this.info.residentsRecord || {}
        },
        inspectInfo() {
            const temp = this.info.diagnoseInspectList || []
            return temp.filter(e => e.projectType == 0)
        },
        checkInfo() {
            const temp = this.info.diagnoseInspectList || []
            return temp.filter(e => e.projectType == 1)
        },
        inspectFileList() {
            return this.info.inspectFileList || []
        }
    },
    created() {
        document.title = '诊断详情'
        if (!this.id) {
            showNotify({ type: 'warning', message: '未获取到查询信息'})
            return
        }
        this.init()
    },
    methods: {
        init() {
            getDiagnoseDetail(this.id).then(res => {
                this.info = res.data || {}
                for(let item of this.info.diagnoseInspectList) {
                    if (item.inspectDetailed !== void 0 && item.inspectDetailed !== ''){
                        item.inspectDetailedObj = JSON.parse(item.inspectDetailed)
                    } else {
                        item.inspectDetailedObj = []
                    }
                }
                // this.collapseList[0].info = this.info?.residentsRecord
                // this.collapseList[1].info = this.info
                // this.collapseList[2].info = this.info
            })
        },
        // 折叠面板切换
        collapseChange(val) {
            // console.log(val, this.activeCollapse)
            if (val && val.length <= 2) {
                this.activeCollapse = val.slice(val.length - 1)
            } else {
                if (this.activeCollapse.length > val.length) {
                    this.activeCollapse = val
                }
                if (this.activeCollapse.length < val.length) {
                    this.activeCollapse = val.slice(val.length - 1)
                }
            }
            if (val && val.length === this.collapseList.length) {
                this.collapseAll = true
            } else {
                this.collapseAll = false
            }
        },
        // 全部展开、收起
        toggleAll() {
            if (this.collapseAll) {
                this.activeCollapse = []
            } else {
                this.activeCollapse = this.collapseList.map(e => e.name)
            }
            this.collapseAll = !this.collapseAll
        }
    }
}
</script>

<style lang="less" scoped>
.base-info {
    background: linear-gradient(to bottom, #D2E4FF , #fff 50%);
    color: #8c8c8c;
    .name {
        font-weight: 600;
        color: #000;
        font-size: 18px;
    }
    .base-info-inner {
        column-gap: 18px;
        >div {
            >span:last-child {
                color: #262626;
            }
        }
    }
}

.cont-box {
    background-color: #f9f9f9;
    .cont-inner {
        background: linear-gradient(to bottom, #D2E4FF , #fff .6rem);
        border-top-left-radius: .08rem;
        border-top-right-radius: .08rem;
    }
    .block {
        background-color: #F8FAFC;
        color: #4D5665;
        border-radius: 4px;
    }
}

.collapse-head {
    .icon-down {
        vertical-align: middle;
        font-size: .12rem;
        .svg-icon {
            transition: all .2s;
        }
    }
    .icon-down-expanded {
        .svg-icon {
            transform: rotate(-180deg);
        }
    }
}

</style>