<template>
  <div class="upage">
    <dNav></dNav>
    <view class="con">
      <view class="infobox">
      <up--image
        :src="userInfo.avatar?userInfo.avatar:headImg"
        width="154rpx"
        height="154rpx"
        radius="50%"
      ></up--image>
      <view class="info">
        <view class="name">
            {{userInfo.user_name}}（{{userInfo.title}}）
        </view>
        <view class="hospital">{{ userInfo.hospital_name }}</view>

      </view>
    </view>
    <view class="databox">
      <view class="cell">
        <view class="num">{{ numInfo.article_num }}</view>
        <view class="name">文章</view>
      </view>
      <view class="cell">
        <view class="num">{{ numInfo.video_num }}</view>
        <view class="name">视频</view>
      </view>
      <view class="cell">
        <view class="num">{{numInfo.video_read_num + numInfo.article_read_num }}</view>
        <view class="name">阅读量</view>
      </view>
    </view>
    <view class="listbox">
        <view class="titlename">我的临床病例库</view>
        <view class="cell" @click="goDoctor(userInfo.doctor_id,userInfo.user_name)" v-if="numInfo.article_num>0">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">我的病例库</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
         <view class="cell" @click="goCert">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">临床病例库收录证书下载</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
         <view class="cell" @click="goHospital(userInfo.hospital_id,userInfo.hospital_name)" v-if="hospitalInfo.video_read_num>0 || hospitalInfo.article_read_num>0">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">{{userInfo.hospital_name}}临床病例库</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
         <view class="cell" @click="mySpecial">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">我的病例交流</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
         <view class="cell" @click="goJoin">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">我的参与互动</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
        <view class="cell" @click="goCollect">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">浏览与收藏</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>


    </view>
    </view>
    <view class="publish" @click="goPublish">
      <u-icon name="plus" color="#fff" size="18"></u-icon>
    </view>
  </div>
</template>

<script setup>
import dNav from "@/components/backNav/backNav.vue";
import headImg from "@/static/headImg.png";
import { onLoad } from "@dcloudio/uni-app";
import navTo  from "@/utils/navTo.js";
import api from "@/api/api";
import { ref,reactive} from "vue";
const userInfo=reactive({})
const numInfo=reactive({})
const hospitalInfo=reactive({})
const getInfo=()=>{
  api.getUserInfo().then(res=>{
    const result=res.data.data;
    Object.assign(userInfo,result);
    console.log(result)
    if(userInfo.doctor_id){
      getNum(userInfo.doctor_id)
    }
    if(userInfo.hospital_id){
      getHospitalNum(userInfo.hospital_id)
    };
 })
}
const getNum=(id)=>{
  api.getStaticDoctor(id).then(res=>{
    const result=res.data.data;
    Object.assign(numInfo,result);
 })
}

const getHospitalNum=(id)=>{
  api.getStaticHospital(id).then(res=>{
    const result=res.data.data;
    Object.assign(hospitalInfo,result);
 })
}
onLoad(()=>{
  getInfo()
})
const goCert = () => {
  navTo({
    url: "/pages/certList/certList?doctor_id="+userInfo.doctor_id,
  });
};
const goDoctor=(id,name)=>{
	navTo({
		url:'/pages/searchList/searchList?type=doctor&id='+id+'&name='+name
	})
}
const goHospital=(id,name)=>{
	navTo({
		url:'/pages/searchList/searchList?type=hospital&id='+id+'&name='+name
	})
}
const mySpecial=()=>{ 
  navTo({
    url:'/pages/specialList/specialList?userId='+userInfo.user_id
  })
}
const goJoin=()=>{
	navTo({
		url:'/pages/myJoin/myJoin'
	})
}
const goCollect=()=>{
	navTo({
		url:'/pages/myCollect/myCollect'
	})
}
const goPublish=()=>{
	navTo({
		url:'/pages/publish/publish'
	})
}
</script>
<style lang='scss' scoped>
.upage{
  height:100vh;
  display: flex;
  flex-direction: column;
}
.con{
  height:calc(100vh - 100rpx);
  overflow-y: scroll;
}
.publish{
	width: 92rpx;
	height: 92rpx;
	background: #3CC7C0;
	border-radius: 50%;
	position: fixed;
  right:30rpx;
  bottom:100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.listbox{
    margin:34rpx 30rpx 0;
    .titlename{
      margin-bottom: 30rpx;
    }
    .cell{
      height: 108rpx;
        padding:0 30rpx;
         margin-bottom: 30rpx;
      background: #F9FAFB;
     border-radius: 15rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
        .left{
             display: flex;
          justify-content: space-between;
        font-size: 32rpx;
         color: #000000;
         .title{
          margin-top: 4rpx;
          margin-left: 8rpx;
         }
        }
        
    }
}
.databox {
  height: 162rpx;
  background: #ffffff;
  display: flex;
  padding: 10rpx 0rpx;
  justify-content: space-between;
  border-bottom:2rpx solid rgba($color: #000000, $alpha: 0.1);
  .cell {
    flex: 1;
    padding: 35rpx 0;

    text-align: center;

    .num {
      font-size: 38rpx;
      color: #000000;
    }
    .name {
      margin-top: 18rpx;
      font-size: 28rpx;
      color: #4B5563;
    }
  }
}
.infobox{
    margin:0 30rpx;
  display: flex;
  .info{
    margin-left: 20rpx;
    .name{
        font-size: 32rpx;
        color: #000000;
        line-height: 46rpx;
    }
    .hospital{
        font-size: 28rpx;
        color: #4B5563;
        line-height: 38rpx;}
  }
}
</style>
