<template>
  <view class="mine-container">
    <!-- 面包屑 -->
    <custom-breadcrumb separator=">">
      <custom-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to" :switch="route.switch">
        {{ route.name }}
      </custom-breadcrumb-item>
    </custom-breadcrumb>
    <!-- 面包屑 -->
    <!--解读报告-->
    <template v-if="cases">
      <view class="content"  v-for="(item,index) in cases.cases_of_data" :key="index">
        <view class="case-title">
          <view class="case-title-name">{{ cases.cases_of_source.title }}</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" v-if="laboratory.imaging_examination_name">{{ laboratory.imaging_examination_name }}</view>
                  <view class="imaging-desc" v-if="laboratory.result">{{ 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" 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.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" 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.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" v-if="process.sequence">{{process.sequence}}</view>
                  <view class="treatment-content">
                    <view class="treatment-title" v-if="process.therapeutic_options.therapeutic_options_name">{{process.therapeutic_options.therapeutic_options_name}}</view>
                    <view class="treatment-desc" v-if="process.therapeutic_options.therapeutic_details">{{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" v-if="effect.evaluation_node">{{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" v-if="pictures.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" v-if="item.expert_comments.case_review">
                  <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>
</template>

<script>
import {getCaseDetail} from "@/api/case/case";
import { example } from "@/static/example/example";

export default {
  data() {
    return {
      // 面包屑路由
      routes: [
        {
          to: "/pages/phone/index",
          name: "课件管理",
		  switch: true
        },
        {
          to: "/pages/phone/detail/index",
          name: "",
		  switch: false
        },
        {
          to: "/pages/phone/detail/report",
          name: "解读报告",
		  switch: false
        },
      ],
      id: '', // 课件ID
      // 页面所用数据
      cases: null,
      // 是否使用示例
      isExample:false
    };
  },
  onLoad(options) {
    if (options) {
      // 是否查看示例
      this.isExample = !!Number(options.isExample)
      // 获取url中的参数
      if(options.name && options.id){
        this.id = options.id   // 获取课件id
        this.getCasesData()     // 获取课件数据
        // 设置面包屑的路由
        if(this.isExample){
          // 面包屑路由
          this.routes = [
            {to: "/pages/phone/index",name: "课件管理",switch: true},
            {to: "/pages/phone/detail/report",name: "查看示例", switch: false},
          ]
        }else {
          this.routes[1].name = options.name
          this.routes[1].to = `/pages/phone/detail/index?id=${options.id}&name=${options.name}`
        }
      }
    }
  },
  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()
              })
            })
          }
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #FFFFFF;
}

.mine-container {
  width: 100%;
  height: 100%;

  .content {
    background: #F7F8FA;

    &+.content{
      margin-bottom: 12rpx;
    }

    .case-title {
      padding: 40rpx 32rpx 24rpx;
      background: #FFFFFF;
      margin-bottom: 12rpx;

      &-name {
        font-size: 40rpx;
        line-height: 56rpx;
        font-weight: 500;
      }

      &-desc {
        color: #165DFF;
        font-size: 28rpx;
        line-height: 44rpx;
        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: 44rpx;
            height: 44rpx;
            margin-right: 8rpx;
          }
        }

        .problems{

        }
      }
    }

    .case-content {
      background: #FFFFFF;
      padding: 40rpx 32rpx 28rpx;

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

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

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

      .collapse-wrap {
        color: #1D2129;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 52rpx;
        padding-top: 16rpx;

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

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

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

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

        //影像学检查、组织病理学检查
        .imaging-examination-wrap {
          .imaging-title {
            color: #1D2129;
            font-size: 30rpx;
            font-weight: 500;
            line-height: 48rpx;
            margin-bottom: 8rpx;
          }

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

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

              image {
                width: 340rpx;
                height: 248rpx;
              }
            }

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

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

          .treatment-sequence{
            width: 96rpx;
            color: #165DFF;
            font-size: 28rpx;
            font-weight: 380;
            line-height: normal;
            padding: 16rpx 16rpx 16rpx 0;
          }

          .treatment-content{
            flex:1;
            padding:16rpx 0 48rpx 24rpx;
            border-left:2rpx solid #86909C;
            position: relative;

            &::before{
              content:"";
              display: block;
              width:22rpx;
              height:22rpx;
              border:2rpx solid #86909C;
              border-radius: 24rpx;
              position: absolute;
              left:-14rpx;
              top:30rpx;
              background: #FFFFFF;
            }

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

            .treatment-desc{
              color: #1D2129;
              font-size: 28rpx;
              font-weight: 400;
              line-height: 44rpx;
              margin:20rpx 0;
            }

            .treatment-cycle{

              .cycle-box{
                padding:16rpx;
                background:#F2F3F5;
                border-radius:8rpx;

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

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

                .cycle-pictures-box{

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

                    image{
                      width:260rpx;
                      height:184rpx;
                      border-radius: 8rpx;
                      overflow: hidden;
                    }
                  }
                  .cycle-image-title{
                    color:  #86909C;
                    text-align: center;
                    font-size: 26rpx;
                    font-weight: 400;
                    line-height: 52rpx;
                  }
                }
              }
              .cycle-desc{
                margin-top:20rpx;

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

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

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

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

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

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

          .avatar{
            width:80rpx;
            height:80rpx;
            border-radius: 80rpx;
            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-weight: 500;
              }
              .doctor-job{
                font-size: 26rpx;
                font-weight: 400;
                line-height: normal;
                padding-left:16rpx;
                border-left:2rpx solid #C9CDD4;
                margin-left:16rpx;
              }
            }
            .introduction-content{
              color: #86909C;
              font-size: 26rpx;
              font-weight: 400;
              line-height: normal;

              view{
                &+view{
                  margin-top:10rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
