<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.unitId"
                    :class="['p-3', { 'active': item.unitId === activeOrg.unitId }]"
                    @click="onOrgChange(item)">
                    <span>{{ item.unitName || '-' }}</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.identityCard">
                    <div class="mb-3">
                        <span class="text-16 mr-2 font-semibold">{{item.staffName}}</span>
                        <span>{{item.officeName || '-'}}</span>
                    </div>
                    <div class="mb-3">{{item.unitName || '-'}}</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'

export default {
    inject:['showNav'],
    data() {
        return {
            store: useStore(),
            orgList: [],
            doctorList: [],
            // 沟通过的医生列表
            recordList: [],
            activeOrg: {}
        }
    },
    computed: {
        userInfo() {
            return this.store.userInfo
        },
        innerDoctorList() {
            if (this.activeOrg.unitId === 'record') {
                return this.recordList
            }
            return this.doctorList.filter(e => e.unitId === this.activeOrg.unitId)
        }
    },
    created() {
        this.init()  
    },
    methods: {
        init() {
            console.log(this.userInfo)
            this.load()
        },
        load() {
            getServiceDoc({ residentInfoId: this.userInfo.residentInfoId }).then(res => {
                const list = res.data || []
                const orgList = []
                this.doctorList = list
                list.forEach(e => {
                    if (orgList.some(e => e.unitId === e.unitId)) return
                    orgList.push({
                        unitId: e.unitId,
                        unitName: e.unitName
                    })
                })
                this.orgList = [{
                    unitId: 'record',
                    unitName: '咨询过的专家'
                }].concat(orgList)
                this.activeOrg = this.orgList[0]
            })
        },
        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.staffName
                }
            })
        }
    },
}
</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>