<template>
  <view class="content con">
    <!-- 头部 -->
    <self-header @changeTab="changeTab" :conType="myNavType" :tabIndex="tabIndex" @addPerson="addPerson" @openPop="openPop" :isDoctor="isDoctor" :show-btn="false"></self-header>
    <!-- 头部 -->
    <!-- 报告解读 -->
    <view class="report-wrap" v-if="tabIndex == 1">
      <template v-if="cases">
        <view class="report-content"  v-for="(item,index) in cases.cases_of_data" :key="index">
          <view class="case-title">
            <!-- 头部信息 -->
            <view class="myCon_top">
              <view class="myCon_top_title" @click="headerNavTo">所有课件</view>
              <image mode="heightFix" v-if="subTitle" src="@/static/images/right.png"></image>
              <view class="myCon_top_name" v-if="subTitle">{{subTitle}}</view>
            </view>
            <!-- 头部信息 -->
            <view class="case-title-desc">
              <view class="desc-left">
                <image src="@/static/images/diagnosis.png" mode="aspectFit"></image><text>诊断：</text>
              </view>
              <view class="problems">
                <view class="problems-item" v-for="(problems,problemsIdx) in item.patient_characteristics.diseases_and_related_health_problems" :key="problemsIdx">{{problems}}</view>
              </view>
            </view>
          </view>
          <view class="case-content">
            <!--获取数据后执行resize方法重新绘制尺寸-->
            <uni-collapse ref="collapseWrap">
              <!--患者资料-->
              <uni-collapse-item title="患者资料" :open="true" :show-animation="true" :border="false" title-border="none">
                <view class="collapse-wrap">
                  <view class="info-box" v-if="item.patient_characteristics.sex">
                    <view class="info-name">性别：</view>
                    <view class="info-desc">{{ item.patient_characteristics.sex }}</view>
                  </view>
                  <view class="info-box" v-if="item.patient_characteristics.age">
                    <view class="info-name">年龄：</view>
                    <view class="info-desc">{{ item.patient_characteristics.age }}</view>
                  </view>
                  <view class="info-box" v-if="item.patient_characteristics.comorbidity.length > 0">
                    <view class="info-name">合并症：</view>
                    <view class="info-desc">{{ item.patient_characteristics.comorbidity }}</view>
                  </view>
                  <view class="info-box" v-if="item.patient_characteristics.chief_complaint">
                    <view class="info-name">主诉：</view>
                    <view class="info-desc">{{ item.patient_characteristics.chief_complaint }}</view>
                  </view>
                  <view class="info-box" v-if="item.patient_characteristics.personal_history">
                    <view class="info-name">个人史：</view>
                    <view class="info-desc">
                      <view class="other-items">{{item.patient_characteristics.personal_history}}</view>
                    </view>
                  </view>
                  <view class="info-box" v-if="item.patient_characteristics.family_history">
                    <view class="info-name">家族史：</view>
                    <view class="info-desc">
                      <view class="other-items">{{item.patient_characteristics.family_history}}</view>
                    </view>
                  </view>
                  <view class="info-box" v-if="item.patient_characteristics.past_disease_history">
                    <view class="info-name">既往疾病史:：</view>
                    <view class="info-desc">
                      <view class="other-items">{{item.patient_characteristics.past_disease_history}}</view>
                    </view>
                  </view>
                  <view class="info-box" v-if="item.patient_characteristics.other">
                    <view class="info-name">其他:：</view>
                    <view class="info-desc">
                      <view class="other-items" v-for="(desc,idx) in item.patient_characteristics.other" :key="idx">{{desc}}</view>
                    </view>
                  </view>
                </view>
              </uni-collapse-item>
              <!--患者资料-->
              <!--疾病诊断-->
              <uni-collapse-item title="疾病诊断" :open="false" :show-animation="true" :border="false" title-border="none" v-if="item.patient_characteristics.diseases_and_related_health_problems">
                <view class="collapse-wrap">
                  <view class="diagnosis-items" v-for="(problems,problemsIdx) in item.patient_characteristics.diseases_and_related_health_problems" :key="problemsIdx">{{problems}}</view>
                </view>
              </uni-collapse-item>
              <!--疾病诊断-->
              <!--体格检查-->
              <uni-collapse-item title="体格检查" :open="false" :show-animation="true" :border="false" title-border="none" v-if="item.patient_characteristics.physical_examination">
                <view class="collapse-wrap">
                  <view class="imaging-examination-wrap" v-for="(physical,physicalIdx) in item.patient_characteristics.physical_examination" :key="physicalIdx">
                    <view class="imaging-title" v-if="physical.imaging_examination_name">{{ physical.imaging_examination_name }}</view>
                    <view class="imaging-desc" v-if="physical.result">{{ physical.result }}</view>
                    <view class="imaging-pictures" v-for="(picture,idx) in physical.picture" :key="idx">
                      <view class="picture-box">
                        <template v-if="picture.processed_picture && picture.processed_picture.length > 0">
                          <image v-for="(pic,idx) in picture.processed_picture" :key="idx" :src="pic" mode="aspectFit"></image>
                        </template>
                        <template v-else>
                          <image v-for="(pic,idx) in picture.picture" :key="idx" :src="pic" mode="aspectFit"></image>
                        </template>
                      </view>
                      <view class="imaging-picture-title" v-if="picture.title">{{ picture.title }}</view>
                    </view>
                  </view>
                </view>
              </uni-collapse-item>
              <!--体格检查-->
              <!--影像学检查-->
              <uni-collapse-item title="影像学检查" :open="false" :show-animation="true" :border="false" title-border="none" v-if="item.patient_characteristics.imaging_examination">
                <view class="collapse-wrap">
                  <view class="imaging-examination-wrap" v-for="(exam,examIdx) in item.patient_characteristics.imaging_examination" :key="examIdx">
                    <view class="imaging-title" v-if="exam.imaging_examination_name">{{ exam.imaging_examination_name }}</view>
                    <view class="imaging-desc" v-if="exam.result">{{ exam.result }}</view>
                    <view class="imaging-pictures" v-for="(picture,idx) in exam.picture" :key="idx">
                      <view class="picture-box">
                        <template v-if="picture.processed_picture && picture.processed_picture.length > 0">
                          <image v-for="(pic,idx) in picture.processed_picture" :key="idx" :src="pic" mode="aspectFit"></image>
                        </template>
                        <template v-else>
                          <image v-for="(pic,idx) in picture.picture" :key="idx" :src="pic" mode="aspectFit"></image>
                        </template>
                      </view>
                      <view class="imaging-picture-title" v-if="picture.title">{{ picture.title }}</view>
                    </view>
                  </view>
                </view>
              </uni-collapse-item>
              <!--影像学检查-->
              <!--实验室检查-->
              <uni-collapse-item title="实验室检查" :open="false" :show-animation="true" :border="false" title-border="none" v-if="item.patient_characteristics.laboratory_tests">
                <view class="collapse-wrap">
                  <view class="imaging-examination-wrap" v-for="(laboratory,laboratoryIdx) in item.patient_characteristics.laboratory_tests" :key="laboratoryIdx">
                    <view class="imaging-title">{{ laboratory.imaging_examination_name }}</view>
                    <view class="imaging-desc">{{ laboratory.result }}</view>
                    <view class="imaging-pictures" v-for="(picture,idx) in laboratory.picture" :key="idx">
                      <view class="picture-box">
                        <template v-if="picture.processed_picture && picture.processed_picture.length > 0">
                          <image v-for="(pic,idx) in picture.processed_picture" :key="idx" :src="pic" mode="aspectFit"></image>
                        </template>
                        <template v-else>
                          <image v-for="(pic,idx) in picture.picture" :key="idx" :src="pic" mode="aspectFit"></image>
                        </template>
                      </view>
                      <view class="imaging-picture-title">{{ picture.title }}</view>
                    </view>
                  </view>
                </view>
              </uni-collapse-item>
              <!--实验室检查-->
              <!--组织病理学检查-->
              <uni-collapse-item title="组织病理学检查" :open="false" :show-animation="true" :border="false" title-border="none" v-if="item.patient_characteristics.histopathological_examination">
                <view class="collapse-wrap">
                  <view class="imaging-examination-wrap" v-for="(exam,examIdx) in item.patient_characteristics.histopathological_examination" :key="examIdx">
                    <view class="imaging-title">{{ exam.imaging_examination_name}}</view>
                    <view class="imaging-desc">{{ exam.result }}</view>
                    <view class="imaging-pictures" v-for="(picture,idx) in exam.picture" :key="idx">
                      <view class="picture-box">
                        <template v-if="picture.processed_picture && picture.processed_picture.length > 0">
                          <image v-for="(pic,idx) in picture.processed_picture" :key="idx" :src="pic" mode="aspectFit"></image>
                        </template>
                        <template v-else>
                          <image v-for="(pic,idx) in picture.picture" :key="idx" :src="pic" mode="aspectFit"></image>
                        </template>
                      </view>
                      <view class="imaging-picture-title">{{ picture.title }}</view>
                    </view>
                  </view>
                </view>
              </uni-collapse-item>
              <!--组织病理学检查-->
              <!--治疗历程-->
              <uni-collapse-item title="治疗历程" :open="false" :show-animation="true" :border="false" title-border="none" v-if="item.treatment_process && item.treatment_process.length > 0">
                <view class="collapse-wrap">
                  <view class="treatment-course" v-for="(process,idx) in item.treatment_process" :key="idx">
                    <view class="treatment-sequence">{{process.sequence}}</view>
                    <view class="treatment-content">
                      <view class="treatment-title">{{process.therapeutic_options.therapeutic_options_name}}</view>
                      <view class="treatment-desc">{{process.therapeutic_options.therapeutic_details}}</view>
                      <view class="treatment-cycle">
                        <view class="cycle-box" v-for="(effect,effectIdx) in process.effectiveness_evaluation" :key="effectIdx">
                          <view class="cycle-title">{{effect.evaluation_node}}</view>
                          <view class="cycle-pictures-box" v-for="(pictures,picIdx) in effect.picture" :key="picIdx">
                            <view class="cycle-image">
                              <image v-for="(img,imgIdx) in pictures.picture" :src="img" :key="imgIdx" mode="aspectFit"></image>
                            </view>
                            <view class="cycle-image-title">{{pictures.title}}</view>
                          </view>
                          <view class="cycle-desc">
                            <view class="cycle-desc-item" v-for="(outcome,outcomeIdx) in effect.outcome" :key="outcomeIdx">{{outcome}}</view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </uni-collapse-item>
              <!--治疗历程-->
              <!--疗效总结-->
              <uni-collapse-item title="疗效总结" :open="false" :show-animation="true" :border="false" title-border="none" v-if="item.case_summary && item.case_summary.length > 0">
                <view class="collapse-wrap">
                  <view class="treatment-summary">
                    <view v-for="(summary,idx) in item.case_summary" :key="idx">{{summary}}</view>
                  </view>
                </view>
              </uni-collapse-item>
              <!--疗效总结-->
              <!--专家点评-->
              <uni-collapse-item title="专家点评" :open="false" :show-animation="true" :border="false" title-border="none" v-if="item.expert_comments">
                <view class="collapse-wrap">
                  <view class="expert-comments">
                    <view v-for="(comment,idx) in item.expert_comments.case_review" :key="idx">{{comment}}</view>
                  </view>
                  <view class="physician-introduction">
                    <view class="avatar">
                      <!--@/static/images/doctor-avatar.png-->
                      <image :src="$store.state.user.avatar" mode="aspectFit"></image>
                    </view>
                    <view class="introduction">
                      <view class="introduction-top">
                        <view class="doctor-name">{{item.expert_comments.information_of_experts.name}}</view>
                        <view class="doctor-job">{{item.expert_comments.information_of_experts.professional_title}}</view>
                      </view>
                      <view class="introduction-content">
                        <view v-for="(title,idx) in item.expert_comments.information_of_experts.title" :key="idx">{{title}}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </uni-collapse-item>
              <!--专家点评-->
            </uni-collapse>
          </view>
        </view>
      </template>
    </view>
    <!-- 报告解读 -->

    <!-- 我的 -->
    <view class="" v-if="tabIndex == 2">
      <self-my v-if="myNavType == 'main'" :status="msgStatus" :dataSource="messageList" @navTo="navTo"></self-my>
      <self-my-notice v-if="myNavType == 'notice'" @openDetail="openCaseDetail" :dataSource="messageList" :status="msgStatus" @navTo="navTo"></self-my-notice>
      <self-my-advice v-if="myNavType == 'advice'" :dataSource="userInfo" @navTo="navTo"></self-my-advice>
      <self-my-volunteer v-if="myNavType == 'volunteer'" :dataSource="bindPersonList" @navTo="navTo" :isDoctor="isDoctor" @refresh='refresh' @clickAll='clickAll' @clickItem='clickItem'></self-my-volunteer>
    </view>
    <!-- 我的 -->

    <!-- 新增志愿者、医生 -->
    <uni-popup ref="popupPerson" :mask-click="false" type="center" background-color="#fff">
      <view class="popCon">
        <view class="popCon_top">
          <view class="popCon_top_left"  v-if="isDoctor" @click="() => isShowQrcode = !isShowQrcode">
            <img v-if="isShowQrcode" src="@/static/images/hand.svg" class="icons-custom" />
            <img v-else  src="@/static/images/qrcode.svg" class="icons-custom" />
            <view class="popCon_top_left_text color-custom">{{isShowQrcode ? '手动绑定' : '扫码绑定'}}</view>
          </view>
          <view v-else class="popCon_top_left"></view>
          <view class="popCon_top_title">{{ isDoctor ? '添加志愿者':'添加医生' }}</view>
          <view class="popCon_top_cancel" @click="cancelVol">取消</view>
        </view>
        <view class="" v-if="!isShowQrcode">
          <view class="popCon_middle">
            <view class="popCon_middle_item">
              <view class="popCon_middle_item_title">{{ isDoctor ? '志愿者名称':'医生姓名'}}*</view>
              <view class="popCon_middle_item_con4">
                <uni-easyinput class="uni-mt-5" trim="all" v-model="addPersonForm.name" placeholder="填入姓名"></uni-easyinput>
              </view>
            </view>
            <view class="popCon_middle_item">
              <view class="popCon_middle_item_title">{{ isDoctor ? '志愿者手机号':'医生手机号'}}*</view>
              <view class="popCon_middle_item_con4">
                <uni-easyinput class="uni-mt-5" trim="all" v-model="addPersonForm.phone" placeholder="填入手机号"></uni-easyinput>
              </view>
            </view>
          </view>
          <view class="popCon_bottom volBtn bg-custom" @click="bindPerson">绑定</view>
        </view>
        <view class="popCon_hand" v-else>
          <!-- <image mode="heightFix" src="@/static/images/ewm.png"></image> -->
          <vue-qr ref="qrCode" :text="qrCodeData" class="popCon_hand_qrcode"></vue-qr>
          <view class="popCon_hand_text">您可邀请志愿者扫码登记信息，辅助您进行课件上传</view>
        </view>
      </view>
    </uni-popup>
    <!-- 新增志愿者、医生 -->

    <u-loading-page :loading="showPopupCase" loading-mode="spinner" style="z-index: 999999;" :bg-color="'rgba(0, 0, 0, 0.3)'" :loading-color="'#fff'" :color="'#fff'"></u-loading-page>
  </view>
</template>

<script>
import selfCase from '@/components/pc/case/case.vue'
import selfHeader from '@/components/pc/header.vue'
import addCase from '@/components/pc/case/addCase.vue'
import selfDetail from '@/components/pc/case/detail.vue'
import selfMy from '@/components/pc/my/my.vue'
import selfMyNotice from '@/components/pc/my/notice.vue'
import selfMyAdvice from '@/components/pc/my/advice.vue'
import selfMyVolunteer from '@/components/pc/my/volunteer.vue'
import VueQr from 'vue-qr'

import storage from '@/utils/storage'
import { getUserCaseList, volunteerSelectList, doctorSelectList, getCaseDetail } from "@/api/case/case"
import { getTypeName } from '@/utils/common'
import {example} from "@/static/example/example";
import {
  getMessageList,
  getVolunteerList,
  getDoctorList,
  bindVolunteer,
  bindDoctor,
  unbind
} from '@/api/my/my.js'
export default {
  components: {selfCase,selfHeader,selfDetail,selfMy,selfMyNotice,selfMyAdvice,selfMyVolunteer,addCase,VueQr},
  data() {
    return {
      showPopupCase: false,
      caseDetail:{},
      selectPersonList: [], // 人员列表
      selectUser:[],
      isDetail: uni.getStorageSync('isDetail'), // 是否为课件详情页
      statusArr: [{key: '2',text: '未通过',type: 'fail'},{key: '0',text: '审核中',type: 'in'},{key: '1',text: '审核通过',type: 'pass'}], // 状态类型
      msgStatus: [{key: '2',text: '已美化'},{key: '1',text: '未通过'},{key: '0',text: '审核通过'},{key: '3',text: '完成绑定'},{key: '4',text: '解除绑定'},{key: '5',text: '已点评'}],
      tabIndex: uni.getStorageSync('tab')||1,
      // 我的信息
      userInfo:{
        avatar: '',
        name: '',
        dept: '',
        noticeList: [],
      },
      isShowQrcode: false, //是否展示二维码
      addPersonForm:{
        name: '',
        phone: ''
      }, // 新增志愿者 form
      info:{}, // 课件列表+头部课件数据信息
      detailInfo: {}, // 详情数据
      steps: [], // 审核状态值
      myNavType: uni.getStorageSync('myNavType')||'main', // 我的路由 - 所在页面
      messageList: [],
      detailIndex:uni.getStorageSync('detailIndex')||{},
      isDoctor:true,	//是否医生
      bindPersonList:[],	//已绑定志愿者、医生列表
      id: '', // 课件ID
      // 页面所用数据
      cases: null,
      subTitle: '',
      // 是否使用示例
      isExample:false
    }
  },
  onLoad(options) {
    // 是否查看示例
    this.isExample = !!Number(options.isExample)
    if (options.id) {
      this.id = options.id
      this.getCasesData()
    }
    if (options.name) {
      this.subTitle = this.isExample?"查看示例":options.name
    }
    this.isDoctor = this.$store.state.user.loginIdentity == 0
    this.qrCodeData = JSON.stringify({
      name: this.$store.state.user.nickName,
      phone: this.$store.state.user.name
    })
  },
  onShow() {
    this.getSelectPerson()
    this.getList()
    this.getMessageList()
    this.getBindPersonData()
  },
  methods: {
    // 获取课件解读详情
    getCasesData(){
      this.cases = null
      if(this.isExample){   // 查看示例
        this.cases = example
        this.$nextTick(()=>{
          this.$refs.collapseWrap.map(item=>{
            item.resize()
          })
        })
      }else {   // 查看课件数据
        getCaseDetail(this.id).then(res=>{
          if(res.code === 200){
            this.cases = res.data.analysisJson
            this.$nextTick(()=>{
              this.$refs.collapseWrap.map(item=>{
                item.resize()
              })
            })
          }
        })
      }
    },
    getMessageList() {
      getMessageList().then(res => {
        if (res.code == 200) {
          this.messageList = res.data
        }else {
          uni.$u.toast(res.msg)
        }
      })
    },
    // 获取用户课件信息
    getList(otherId){
      let that = this
      let userId = that.$store.state.user.userId
      let param = {
        doctorUserId:'',
        volunteerUserId:''
      }
      if(that.isDoctor){
        param.doctorUserId = userId
        param.volunteerUserId = otherId || ''
      }else{
        param.volunteerUserId = userId
        param.doctorUserId = otherId || ''
      }

      getUserCaseList(param).then(res => {
        let data = res.data
        data.caseList.forEach(item => {
          item.caseFileList.forEach(item2 => {
            item2.type = getTypeName(item2.name)
          })
        })
        this.info = data
        if(this.isDetail){
          let info = this.info.caseList.filter(item => item.id == this.detailIndex.id)[0]
          this.detailInfo = {
            id: info.id,
            name: info.caseName
          }

        }
      })
    },
    //获取已绑定的志愿者、医生列表数据
    getSelectPerson(){
      if(this.isDoctor){
        volunteerSelectList().then(res => {
          if(res.code == 200){
            this.selectPersonList = res.data
          }
        })
      }else{
        doctorSelectList().then(res => {
          if(res.code == 200){
            this.selectPersonList = res.data
          }
        })
      }
    },
    getBindPersonData() {
      if (this.isDoctor) {
        getVolunteerList().then(res => {
          if (res.code == 200) {
            this.bindPersonList = res.data
          }
        })
      } else {
        getDoctorList().then(res => {
          if (res.code == 200) {
            this.bindPersonList = res.data
          }
        })
      }
    },
    // 我的-路由跳转
    headerNavTo() {
      this.$emit('goHome', true)
      uni.setStorageSync('isDetail', false)
      uni.redirectTo({
        url:"/pages/pc/index/index"
      })
    },
    // 路由跳转
    navTo(e){
      this.myNavType = e
      uni.setStorageSync('myNavType',e)
      this.getMessageList()
    },
    // 新增志愿者、医生-弹窗打开
    addPerson(){
      this.isShowQrcode = false
      this.$refs.popupPerson.open()
    },
    // 新增志愿者、医生-弹窗关闭
    cancelVol(){
      this.$refs.popupPerson.close()
    },
    // 切换tab
    changeTab(e){
      uni.setStorageSync('tab',e)
      uni.setStorageSync('isDetail',false)
      uni.setStorageSync('myNavType','main')
      this.myNavType = 'main'
      this.tabIndex = e
      this.isDetail = false
      this.getList()
      this.getMessageList()
    },
    // 前往课件详情
    openDetail(e){
      let info = this.info.caseList[e]
      let params = {
        name: info.caseName,
        id: info.id
      }
      this.detailInfo = params
      uni.setStorageSync('isDetail',true)
      uni.setStorageSync('detailIndex',params)
      this.isDetail = true
    },
    // 通知-跳转课件详情
    openCaseDetail(info){
      if(info.businessStatus == '3' || info.businessStatus == '4'){
        this.myNavType = 'volunteer'
        uni.setStorageSync('myNavType','volunteer')
        this.getMessageList()
      }else{
        let params = {
          name: info.messageContent,
          id: info.businessId
        }
        this.tabIndex = 1
        this.detailInfo = params
        uni.setStorageSync('isDetail',true)
        uni.setStorageSync('detailIndex',params)
        uni.setStorageSync('tab',1)
        this.isDetail = true
      }
    },
    //编辑课件弹窗
    editCase(value){
      this.caseDetail = value
      this.$refs.popupCase.open()
    },
    // 打开新增课件弹窗
    openPop() {
      this.caseDetail = {}
      this.$refs.popupCase.open()
    },
    // 关闭新增弹窗
    closePopupCase(){
      this.$refs.popupCase.close()
      if(this.isDetail){
        this.isDetail = false
      }
      this.getList()
    },
    //绑定志愿者或者医生
    bindPerson() {
      if (this.isDoctor) {
        bindVolunteer(this.addPersonForm).then(res => {
          uni.$u.toast(res.msg)
          if (res.code == 200) {
            this.$refs.popupPerson.close()
            this.getBindPersonData()
          }
        }).catch(err => {
          console.log('err==', err);
        })
      } else {
        bindDoctor(this.addPersonForm).then(res => {
          uni.$u.toast(res.msg)
          if (res.code == 200) {
            this.$refs.popupPerson.close()
            this.getBindPersonData()
          }
        }).catch(err => {
          console.log('err==', err);
        })
      }
    },
    refresh(){
      this.getBindPersonData()
    },
    //刷新课件列表
    refreshList(value){
      this.getList(value)
    },
    //从已绑定志愿者、医生列表跳转到课件列表
    clickAll(data){
      this.selectUser = []
      this.selectUser.push(data)
      this.getList(data.doctorUserId || data.volunteerUserId)
      this.tabIndex = 1
    },
    //从已绑定志愿者、医生列表跳转到课件详情
    clickItem(data){
      console.log('11111');
      let params = {
        name: data.caseName,
        id: data.id
      }
      this.detailInfo = params
      uni.setStorageSync('isDetail',true)
      uni.setStorageSync('detailIndex',params)
      this.isDetail = true
      this.tabIndex = 1
    },

  }
}
</script>

<style lang="scss" scoped>
.con{
  position: relative;
  //background-color: #F2F3F5;
  width: 100%;

  .report-wrap{
    margin:0 193px;

    .report-content {
      color: #1D2129;
      font-size: 8.3rpx;
      font-weight: 400;
      line-height: 13.54px;
      background: #F7F8FA;

      .case-title {
        padding: 11.45rpx 0 6.25rpx;
        background: #FFFFFF;
        margin-bottom: 6.25rpx;

        .myCon_top{
          display: flex;
          align-items: center;

          &_title{
            color: #86909C;
            font-size: 12.5rpx;
            font-weight: 500;
            line-height: 16.67rpx; /* 133.333% */
            cursor: pointer;
          }

          uni-image{
            width: 7.29rpx;
            height: 7.29rpx;
          }
          &_name{
            color: #1D2129;
            font-size: 12.5rpx;
            font-weight: 500;
            line-height: 16.67rpx; /* 133.333% */
          }
        }

        &-desc {
          color: #165DFF;
          font-size: 11.45rpx;
          line-height: 12.5rpx;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;

          .desc-left{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            image {
              width: 11.45rpx;
              height: 11.45rpx;
              margin-right: 4.2rpx;
            }
          }
        }
      }

      .case-content {
        background: #FFFFFF;
        padding: 9.4rpx 8.3rpx 0;

        /deep/ .uni-collapse-item {
          margin-bottom: 22.4rpx;

          .uni-collapse-item__title-box {
            padding-left: 0;

            .uni-collapse-item__title-text {
              color: #1D2129;
              font-size: 11.45rpx;
              font-weight: 500;
              line-height: 14.6rpx;
            }
          }

          .uni-collapse-item__title-arrow{
            .uni-icons{
              color:#333333 !important;
              font-size:9.4rpx !important;
            }
          }
        }

        .collapse-wrap {
          color: #1D2129;
          font-size: 8.3rpx;
          font-weight: 400;
          line-height: 13.54rpx;
          padding-top: 4.2rpx;

          //患者资料
          .info-box {
            font-size: 8.3rpx;
            font-weight: 400;
            line-height: 13.5rpx;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            margin-bottom: 2.1rpx;

            .info-name {
              width: 52.1rpx;
              color: #86909C;
            }

            .info-desc {
              flex: 1;
              color: #1D2129;

              .other-items{
                &+.other-items{
                  margin-top:2.6rpx;
                }
              }
            }
          }

          //体格检查、影像学检查、实验室检查、组织病理学检查
          .imaging-examination-wrap {
            .imaging-title {
              color: #1D2129;
              font-size: 7.8rpx;
              font-weight: 500;
              line-height: 12.5rpx;
              margin-bottom: 2.1rpx;
            }

            &+.imaging-examination-wrap{
              margin-top:5.21rpx;
            }

            .imaging-pictures {
              display: inline-block;

              .picture-box {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                column-gap: 2.1rpx;
                row-gap: 2.1rpx;

                image {
                  width: 132rpx;
                  height: 88.5rpx;
                  border-radius: 2.1rpx;
                  overflow: hidden;
                }
              }

              .imaging-picture-title {
                color: #86909C;
                text-align: center;
                font-size: 7.3rpx;
                line-height: 13.5rpx;
              }
            }
          }

          // 治疗历程
          .treatment-course{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;

            .treatment-sequence{
              width: 20.1rpx;
              color: #165DFF;
              font-size: 7.3rpx;
              font-weight: 380;
              line-height: normal;
              padding: 4.2rpx 4.2rpx 4.2rpx 0;
            }

            .treatment-content{
              flex:1;
              padding:4.2rpx 0 12.5rpx 6.25rpx;
              border-left:0.5rpx solid #86909C;
              position: relative;

              &::before{
                content:"";
                display: block;
                width:5.7rpx;
                height:5.7rpx;
                border:0.5rpx solid #86909C;
                border-radius: 6.25rpx;
                position: absolute;
                left:-3.6rpx;
                top:7.8rpx;
                background: #FFFFFF;
              }

              .treatment-title{
                font-weight: 600;
              }

              .treatment-desc{
                color: #1D2129;
                font-size: 7.3rpx;
                font-weight: 400;
                line-height: 11.45rpx;
                margin:5.2rpx 0;
              }

              .treatment-cycle{
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;

                .cycle-box{
                  padding:4.16rpx;
                  background:#F2F3F5;
                  border-radius:2.08rpx;
                  display: inline-block;
                  min-width: 255.7rpx;

                  &+.cycle-box{
                    margin-top:5.21rpx;
                  }

                  .cycle-title{
                    color: #165DFF;
                    font-size: 7.29rpx;
                    font-weight: 500;
                    line-height: 11.456rpx;
                  }

                  .cycle-pictures-box{

                    .cycle-image{
                      margin:5.208rpx 0;
                      display: flex;
                      flex-direction: row;
                      flex-wrap: wrap;
                      justify-content: flex-start;
                      align-items: flex-start;
                      column-gap: 2.08rpx;
                      row-gap: 2.08rpx;

                      image{
                        width:122.9rpx;
                        height:82.29rpx;
                        border-radius: 2.08rpx;
                        overflow: hidden;
                      }
                    }

                    .cycle-image-title{
                      color:  #86909C;
                      text-align: center;
                      font-size: 7.29rpx;
                      font-weight: 400;
                      line-height: 13.5rpx;
                    }
                  }
                }
                .cycle-desc{
                  margin-top:5.208rpx;

                  &-item{
                    color: #1D2129;
                    font-size: 7.29rpx;
                    font-weight: 400;
                    line-height: 11.458rpx;
                  }
                }
              }
            }
          }

          //疗效总结
          .treatment-summary{
            view{
              &+view{
                margin-top:2.6rpx;
              }
            }
          }

          //专家点评
          .expert-comments{
            padding:6.25rpx;
            border-radius: 4.16rpx;
            background: #F2F3F5;
            position: relative;

            &::after{
              content:"";
              width:0;
              height:0;
              display: block;
              border-width: 4.16rpx;
              border-style: solid;
              border-color: transparent;
              border-top-width: 8.3rpx;
              border-bottom-width: 8.3rpx;
              border-top-color: #F2F3F5;
              position: absolute;
              left:8.3rpx;
              bottom:-15rpx;
            }

            view{
              &+view{
                margin-top:2.6rpx;
              }
            }
          }

          .physician-introduction{
            margin-top:10.4rpx;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: flex-start;
            column-gap: 4.16rpx;

            .avatar{
              width:20.83rpx;
              height:20.83rpx;
              border-radius: 20.83rpx;
              overflow: hidden;

              image{
                width:100%;
                height:100%;
              }
            }

            .introduction{
              flex:1;

              .introduction-top{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;

                .doctor-name{
                  font-size:7.8125rpx;
                  font-weight: 500;
                }
                .doctor-job{
                  font-size: 6.77rpx;
                  font-weight: 400;
                  line-height: normal;
                  padding-left:4.16rpx;
                  border-left:0.5rpx solid #C9CDD4;
                  margin-left:4.16rpx;
                }
              }
              .introduction-content{
                color: #86909C;
                font-size: 6.77rpx;
                font-weight: 400;
                line-height: normal;

                view{
                  &+view{
                    margin-top:2.6rpx;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .popCon{
    width: 183.31rpx;
    height: 223.96rpx;
    // max-height: 228.33rpx;
    border-radius: 6.25rpx;
    background: #FFF;
    padding: 0 8.33rpx 0;
    position: relative;
    &_top{
      height: 22.92rpx;
      line-height: 22.92rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &_left{
        display: flex;
        align-items: center;
        cursor: pointer;
        width: 33%;
        overflow: hidden;


        &_text{
          margin-left: 1.04rpx;
          font-size: 6.77rpx;
          font-weight: 400;
          line-height: 11.46rpx; /* 169.231% */
        }
      }
      &_title{
        color: #1D2129;
        text-align: center;
        font-size: 8.33rpx;
        font-weight: 500;
        line-height: 22.92rpx;
        width: 33%;
      }
      &_cancel{
        color: #86909C;
        text-align: right;
        font-size: 6.77rpx;
        font-weight: 400;
        line-height: 22.92rpx;
        cursor: pointer;
        width: 33%;
      }
    }
    &_middle{
      height: calc(100% - 78.13rpx);
      overflow: auto;
      &_item{
        padding: 4.17rpx 0 2.6rpx;
        &_title{
          margin-bottom: 2.08rpx;
          color: #86909C;
          font-size: 6.77rpx;
          font-weight: 400;
          line-height: 11.46rpx; /* 169.231% */
        }
        // &_con{
        // 	display: flex;
        // 	height: 22.92rpx;
        // 	padding: 0 4.17rpx;
        // 	justify-content: center;
        // 	align-items: center;
        // 	border-radius: 2.08rpx;
        // 	background: #E8F3FF;
        // 	cursor: pointer;
        // 	&_text{
        // 		color: #165DFF;
        // 		text-align: center;
        // 		font-size: 7.29rpx;
        // 		font-weight: 400;
        // 		line-height: 11.46rpx; /* 157.143% */
        // 		margin-left: 2.08rpx;
        // 	}
        // 	uni-image{
        // 		width: 7.29rpx;
        // 		height: 7.29rpx;
        // 	}
        // }
        &_file{
          display: flex;
          flex-direction: column;
          &_item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 2.08rpx 0;
            &_left{
              width: calc(100% - 8rpx);
              display: flex;
              align-items: center;
              uni-image{
                width: 12.5rpx;
                height: 12.5rpx;
              }
              &_name{
                color: #4E5969;
                font-size: 6.77rpx;
                font-weight: 400;
                line-height: 11.46rpx; /* 169.231% */
                margin-left: 2.08rpx;
              }
            }
            &_right{
              width: 7.29rpx;
              height: 7.29rpx;

              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              uni-image{
                width: 7.29rpx;
                height: 7.29rpx;
              }
            }
          }
        }
        // &_con2{
        // 	display: flex;
        // 	align-items: center;
        // 	justify-content: space-between;
        // 	height: 22.92rpx;
        // 	padding: 0 6.25rpx;
        // 	border-radius: 2.08rpx;
        // 	background: #F7F8FA;
        // 	cursor: pointer;
        // 	&_text{
        // 		color:  #165DFF;
        // 		font-size: 14px;
        // 		font-weight: 400;
        // 		line-height: 22px; /* 157.143% */
        // 	}
        // 	uni-image{
        // 		width: 7.29rpx;
        // 		height: 7.29rpx;
        // 	}
        // }
        &_con3{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 6.25rpx;
          height: 22.92rpx;
          border-radius: 2.08rpx;
          background: #F7F8FA;
          cursor: pointer;
          &_left{
            width: calc(100% - 8rpx);
            display: flex;
            align-items: center;
            uni-image{
              width: 16.67rpx;
              height: 16.67rpx;
              border-radius: 50%;
              overflow: hidden;
            }
            &_text{
              margin-left: 4.17rpx;
              color: #000;
              font-size: 7.29rpx;
              font-weight: 400;
            }
          }
          &_right{
            width: 7.29rpx;
            height: 7.29rpx;

            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            uni-image{
              width: 7.29rpx;
              height: 7.29rpx;
            }
          }
        }
        &_con4{
          height: 22.92rpx;
          padding: 0 6.25rpx;
          border-radius: 2.08rpx;
          background: #F7F8FA;

          input{
            height: 22.92rpx;
            height: 22.92rpx;
          }
        }
      }
    }
    &_hand{
      display: flex;
      flex-direction: column;
      align-items: center;
      &_qrcode{
        width: 104.17rpx;
        height: 104.17rpx;
        margin: 27.6rpx auto 10.42rpx;
      }
      &_text{
        color: #C9CDD4;
        text-align: center;
        font-size: 6.77rpx;
        font-weight: 400;
        line-height: 11.46rpx; /* 169.231% */
        margin: 0 auto;
      }
    }
    &_bottom{
      width: 100%;
      height: 22.92rpx;
      line-height: 22.92rpx;
      text-align: center;
      border-radius: 2.08rpx;
      color: #fff;
      font-size: 7.29rpx;
      font-weight: 400;
      margin-top: 10.42rpx;
      cursor: pointer;

      // position: absolute;
      margin: 9.75rpx auto 18.75rpx;
      width: calc(100% - 17.71rpx);
    }
    // .volBtn{
    // 	position: absolute;
    // 	bottom: 18.75rpx;
    // 	width: calc(100% - 17.71rpx);
    // }
    &_down{
      display: flex;
      width: 125rpx;
      flex-direction: column;
      align-items: center;
      padding: 6.25rpx 8.33rpx;
      border-radius: 6.25rpx;
      background: #FFF;
      box-shadow: 0 2.08rpx 5.21rpx 0 rgba(0, 0, 0, 0.10);
      position: absolute;
      right: -146.9rpx;
      top: 0;
    }
  }
}
/deep/ .uni-select__selector-empty{
  white-space: nowrap;
}
/deep/ .is-input-border{
  border: none;
  height: 22.92rpx;
  line-height: 22.92rpx;
  background-color: #F7F8FA!important;
}
/deep/ .uni-easyinput__content-input{
  padding: 0!important;
  height: 22.92rpx;
  line-height: 22.92rpx;

  color: #C9CDD4;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7.29rpx;
  font-weight: 400;
  line-height: 22.92rpx; /* 157.143% */
}
/deep/ .uni-popup__wrapper{
  border-radius: 6.25rpx;
  // overflow: hidden;
}
.overScroll{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.overScroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}
.colorF{
  background-color: #fff;
  box-shadow: 0 -0.52rpx 0 0 #E5E6EB;
}
/deep/ .uni-input-input{
  color: #000;
}
</style>
