<!--通用随访详情-->
<template>
    <div class='flex flex-col' style='height: 100vh'>
        <div class='p-3 text-black text-center shrink-0 doc-nav-bar'>
            <span @click='onBack' class='text-12 back-bt'>
                <doc-icon type='doc-left2' />
            </span>
            <span>随访详情</span>
        </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 key='1' title='居民信息' name='1'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div v-for='item in columnsBase' :key='item.key'>
                                <div class='flex justify-between py-1 border-bottom item'>
                                    <span class='shrink-0 mr-2 label'>{{ item.title }}</span>
                                    <span v-if="item.key === 'idCard'">{{ $idCardHide(residentInfo.idCard) || '-'
                                        }}</span>
                                    <span class='text-end' v-else>
                                        <span>{{ residentInfo[item.key] || '-' }}</span>
                                        <span v-if='item.unit' class='ml-1'>{{ item.unit }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='2' title='随访信息' name='2'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>医保目录代码</span>
                                <span class='text-end'>
                                                            <span>{{ info.medicalDirectoryCode || '-' }}</span>
                                                        </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>随访方式</span>
                                <span class='text-end'>
                                                            <span>{{ info.visitWayName || '-' }}</span>
                                                        </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>情绪是否稳定</span>
                                <span class='text-end'>
                                                            <span>{{ info.isConditionStableName || '-' }}</span>
                                                        </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>当前是否用药</span>
                                <span class='text-end'>
                                                            <span>{{ info.isMedicationName || '-' }}</span>
                                                        </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item' v-if='info.isMedication == 1'>
                                <span class='shrink-0 mr-2 label'>是否有县域外购药情况</span>
                                <span class='text-end'>
                                                            <span>{{ info.isPurchaseMedicineAbroadName || '-' }}</span>
                                                        </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'
                                 v-if=' info.isMedication == 1 && info.isPurchaseMedicineAbroad == 1'>
                                <span class='shrink-0 mr-2 label'>购药途径</span>
                                <span class='text-end'>
                                                            <span>{{ info.waysPurchasingMedicineName || '-' }}</span>
                                                        </span>
                            </div>
                            <div class=' py-1 border-bottom item'
                                 v-if=' info.isMedication == 1 && info.isPurchaseMedicineAbroad == 1'>
                                <div class='shrink-0 mr-2 label'>药物名称</div>
                                <div class='flex flex-wrap items-center gap-x-2.5 gap-y-2.5 mt-2'>
                                    <div style='background: #FAFAFA;padding: 5px' v-for='item in info.drugList'>
                                        {{ item.diseaseName || '-' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='3' title='随访机构' name='3'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div v-for='item in columnsOrg' :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'>
                                        <span>{{ info[item.key] || '-' }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchCurrencyById, messageResend } from '@/api/doctor/generalFU'
import { fetchSlowSpecialById } from '@/api/doctor/slowSpecial'

export default {
    name: 'SlowSpecialFUDetail',
    data() {
        return {
            activeCollapse: [],
            detailInfo: {
                publicizeType: [],
                visitWayRules: []
            },
            collapseList: [
                { title: '居民信息', name: '1' },
                { title: '随访信息', name: '2' },
                { title: '随访机构', name: '3' }
            ],
            // 全部展开、收起
            collapseAll: false,
            info: {},
            columnsBase: [
                { title: '姓名', key: 'residentName' },
                { title: '证件号码', key: 'idCard' },
                { title: '性别', key: 'genderName' },
                { title: '出生日期', key: 'dataBirth' },
                { title: '年龄', key: 'currentAge' },
                { title: '民族', key: 'nationalName' },
                { title: '本人电话', key: 'telephone' },
                { title: '现住址', key: 'presentCodeName' },
                { title: '详细地址', key: 'nowAddress' },
                { title: '户籍地址', key: 'registeredCodeName' },
                { title: '详细地址', key: 'permanentAddress' },
                { title: '联系人姓名', key: 'contactName' },
                { title: '与居民关系', key: 'relationName' },
                { title: '联系电话', key: 'contactPhone' },
            ],
            columnsOrg: [
                { title: '随访单位', key: 'visitUnitName' },
                { title: '随访科室', key: 'visitOfficeName' },
                { title: '随访医生', key: 'visitDoctorName' }
            ],
            // 控制音频同一时间只播放一个
            activeMediaUrl: '',
            hideActiveMediaUrl: ''
        }
    },
    computed: {
        id() {
            return this.$route.query.id
        },
        residentInfo() {
            return this.info.residentsRecord || {}
        }
    },
    created() {
        document.title = '慢特病随访详情'
        this.load()
    },
    methods: {
        async load() {
            if (!this.id) {
                this.$message.info('未获取到信息')
                return
            }
            let par = {
                id: this.id
            }
            fetchSlowSpecialById(par).then(res => {
                let result = res.data || {}
                this.info = result
                if (result.drugName) {
                    let list = []
                    result.drugName.split(',').forEach(item => {
                        let obj = { diseaseName: item }
                        list.push(obj)
                    })
                    this.info.drugList = list
                }
            }).finally(() => {
            })
        },

        //重新发送
        toReSend() {
            let par = {
                id: this.id
            }
            messageResend(par).then(() => {
                this.load()
            })
        },
        // 折叠面板切换
        collapseChange(val) {
            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
        },
        onBack() {
            this.$router.back()
        }
    }
}
</script>

<style lang='less' scoped>
@import url('../../../utils/common.less');

.base-info {
    background: linear-gradient(to bottom, #F0F6FF, #fff 50%);
    color: #8c8c8c;

    .name {
        font-weight: 600;
        color: #000;
        font-size: 18px;
    }

    .top-label {
        font-size: 13px;
        line-height: 22px;
    }

    .color-b {
        color: #262626;
    }
}

.cont-box {
    background-color: #f9f9f9;

    .cont-inner {
        background: linear-gradient(to bottom, #F0F6FF, #fff .6rem);
        border-top-left-radius: .08rem;
        border-top-right-radius: .08rem;
    }
}

.collapse-head {
    .icon-down {
        vertical-align: middle;
        font-size: .12rem;

        .svg-icon {
            transition: all .2s;
        }
    }

    .icon-down-expanded {
        .svg-icon {
            transform: rotate(-180deg);
        }
    }
}


table {
    text-align: left;
    border-bottom: 1px solid var(--van-cell-border-color);

    > tr {
        > td {
            padding-left: 14px;
            padding-bottom: 12px;

            &:first-child {
                text-align: right;
                padding-left: 0;
            }
        }
    }
}

.list {
    .label {
        min-width: 5em;
    }
}

.card {
    background-color: #F8FAFC;
    padding: 4px 10px;
    border-radius: 4px;
    color: #4D5665;
}
</style>
