<template>
    <div class="flex flex-col nim-index" style="height: 100vh">
        <div class="py-2 px-3 text-black text-center shrink-0 doc-nav-bar" v-if='showNav()'>
            <span>专家在线咨询</span>
        </div>
        <img src="@/assets/image/residentWX/banner.png" alt="" class="shrink-0 w-full">
        <div style="color: #8C8C8C;" class="py-2 px-3">以下为您提供慢病筛查的专家，可向其进行慢病咨询</div>
        <div class="grow flex">
            <div class="h-full list-l">
                <div v-for="item in orgList" :key="item"
                    :class="['p-3', { 'active': item === activeOrg }]"
                    @click="onOrgChange(item)">
                    <span>{{ item || '-' }}</span>
                </div>
            </div>
            <div class="h-full p-3 list-r">
                <div class="mb-3 p-4 card" v-for="item in innerDoctorList" :key="item.serviceDoctorId">
                    <div class="mb-3">
                        <span class="text-16 mr-2 font-semibold">{{item.serviceDoctorName}}</span>
                        <span>{{item.serviceOfficeName || '-'}}</span>
                    </div>
                    <div class="mb-3">{{item.serviceUnitName || '-'}}</div>
                    <div>
                        <van-button plain round type="primary"
                            @click="toSession(item)">咨询医生</van-button>
                    </div>
                </div>
                <div class='text-center shrink-0 empty' v-if='!innerDoctorList.length'>
                    <img src='@/assets/image/doctor/empty.png' alt='' style='width: 1.2rem;'>
                    <p>暂无数据</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useStore } from '@/residentWX/store'
import { getServiceDoc } from '@/api/residentWX/nim.js'
import { showFailToast  } from 'vant'
import { getSessionInfo } from '@/api/residentWX/nim.js'
import { showNav } from '@/utils/common'

export default {
    inject:['showNav', 'isResidentInfo'],
    data() {
        return {
            store: useStore(),
            orgList: [],
            doctorList: [],
            // 沟通过的医生列表
            recordList: [],
            activeOrg: {}
        }
    },
    computed: {
        userInfo() {
            return this.store.userInfo
        },
        innerDoctorList() {
            if (this.activeOrg === '咨询过的专家') {
                return this.recordList
            }
            return this.doctorList.filter(e => e.serviceUnitName === this.activeOrg)
        }
    },
    created() {
        if (!this.showNav()) {
            document.title = '专家在线咨询'
        }
        if (this.isResidentInfo()) {
            this.init()
        }
    },
    methods: {
        init() {
            console.log(this.userInfo)
            this.load()
        },
        load() {
            getServiceDoc({ residentInfoId: this.userInfo.residentInfoId }).then(res => {
                const result = res.data || {}
                const orgList = []
                let doctorList = []
                Reflect.ownKeys(result).forEach(key => {
                    orgList.push(key)
                    doctorList = doctorList.concat(result[key])
                })
                this.doctorList = doctorList
                this.orgList = ['咨询过的专家'].concat(orgList)
                this.activeOrg = this.orgList[0]
                
                // 获取咨询过的医生列表
                this.loadRecord()
            })
        },
        loadRecord() {
            getSessionInfo(this.userInfo.idCard).then(res =>{
                console.log('getSessionInfo', res)
                const result = res.data || []
                const array = []
                result.forEach(e => {
                    const item = this.doctorList.find(i => e.idCard === i.identityCard)
                    item && array.push(item)
                })
                this.recordList = array
            })
        },
        onOrgChange(item) {
            this.activeOrg = item || ''
        },
        // 聊天页面
        toSession(item = {}) {
            if (!item.identityCard) {
                showFailToast('缺失医生信息')
                return
            }
            const path = `/residentWX/nim/${item.identityCard}`
            this.$router.push({
                path,
                query: {
                    name: item.serviceDoctorName,
                    gender: this.userInfo.gender || 0
                }
            })
        }
    },
}
</script>

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

.nim-index {
    background: #f8fafc;
}
.list-l {
    width: 35%;
    background: transparent;
    >div {
        line-height: 1.5;
    }
    .active {
        background-color: #fff;
    }
}
.list-r {
    width: 65%;
    background: #fff;
    .card {
        background-color: #E4E8EE;
        background: linear-gradient(to bottom, #E5F3FF 0%, #E9FAFC 100%);
        border-radius: 8px;
        border: 1px solid #E4E8EE;
        .van-button {
            height: 26px;
            line-height: 26px;
            font-size: 14px;
        }
    }
}
</style>