<template>
  <div class="surgical" v-loading="loading">
    <el-empty description="未查到信息" v-if="resultFlag"></el-empty>
    <div v-else>
      <div class="content-head">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="width: 90%" >
          <el-tab-pane :label="item.D02874OPS_NAME+'(手术日期'+formatDate(item.D02874OPERATION_DATE)+')'"
                       :name="item" v-for=" (item,index) in infoData"
          >
            <el-tooltip slot="label" effect="dark"
                        :content="item.D02874OPS_NAME+'(手术日期'+formatDate(item.D02874OPERATION_DATE)+')'"
                        placement="bottom-start"
            >
            <span class="tmp"
            > {{item.D02874OPS_NAME+'(手术日期'+formatDate(item.D02874OPERATION_DATE)+')'}}</span>
            </el-tooltip>

          </el-tab-pane>
        </el-tabs>
        <!--     <div class="content-head-title">血常规</div>-->
        <div class="content-head-right">
          <!--        <div class="content-head-btn">-->
          <!--          <i class="el-icon-download"/>-->
          <!--          <div>下载</div>-->
          <!--        </div>-->

        </div>
      </div>
      <div class="surgical-title" >
        <div class="hospital-name">{{operInfo.opsName}}</div>
        <div class="surgical-name">{{"手术时间："+formatDate(operInfo.opStartDate)}}</div>
      </div>
      <div class="surgical-top">
        <div>姓名︰{{msg.patientName}}</div>
        <div>性别:女</div>
        <div>年龄:{{msg.age}}岁</div>
        <!--      <div>科室:肝胆科</div>-->
        <div>{{msg.clinicClass ==="1"?"就诊号:"+msg.jzlsh :"住院号:"+msg.jzlsh }}</div>
      </div>
      <div class="surgical-des">
        <div class="surgical-item">
          <span class="des-label">手术时间段∶</span>
          <span class="des-val" style="margin-right: 20px">{{formatDate(operInfo.opStartDate)+'--'+formatDate(operInfo.opEndDate)}}</span>
          <span class="des-label">手术医生∶</span>
          <span class="des-val">{{operInfo.operatorDoctor}}</span>
        </div>
          <div class="surgical-item">
          <span class="des-label" v-if="operInfo.operatorDoctor">主刀∶</span>
          <span class="des-val"  style="margin-right: 20px" >{{operInfo.operatorDoctor}}</span>
          <span class="des-label" v-if="operInfo.assistan1Name">一助∶</span>
          <span class="des-val"  style="margin-right: 20px">{{operInfo.assistan1Name}}</span>
          <span class="des-label"  v-if="operInfo.assistan2Name">二助∶</span>
          <span class="des-val">{{operInfo.assistan2Name}}</span>
        </div>
        <div class="surgical-item">
          <span class="des-label">麻醉方式∶</span>
          <span class="des-val">{{operInfo.aneMethodName}}</span>
        </div>
        <div class="surgical-item">
          <span class="des-label">手术经过:</span>
          <span class="des-val">{{operInfo.operatorProcedureDesc}}</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { handlerRequestNoAuth } from '@/api/patient360'
import moment from 'moment'

export default {
  name: "operationInfo",
  props:{
    msg:{
      type:Object
    }
  },
  data() {
    return{
      loading:false,
      infoData:[],
      activeName:"",
      resultFlag:false,
      operInfo:{}

    }
  },
  methods:{
    async initMethod(){
      console.log("初始化诊断")
      this.loading = true
      let param = {
        orgCode:this.msg.orgCode,
        patientId:this.msg.jzlsh
      }
      param = JSON.stringify(param)
        let data = {
          apiId : '432',
          param:param
        }
      const  res =  await handlerRequestNoAuth(data)
      console.log("length", res.data )
      if (res.code != 200 || res.data.length === 0 ){

        this.loading = false
        this.resultFlag = true
        return
      }
      this.infoData =  res.data
      this.activeName = this.infoData[0]
      await this.showInfo()
      console.log(this.infoData)
      this.loading = false
    },
    ShowImage(index) {
      // debugger
      var applySn = this.activeName.applySn;
      // let href = 'http://172.16.9.178:8060//HisReportList.aspx?RepGuid=cfda5324-832b-48a4-9a63-30c36937d436';
      // shell.openExternal(href);
      //window.open("http://172.16.9.178:8060//HisReportList.aspx?RepGuid=cfda5324-832b-48a4-9a63-30c36937d436","_blank",'height=350,left=200,width=1200')
      if(this.msg.clinicClass === "2"){
        window.open(this.activeName.reportAddress,"_blank",'')
      }else{
        window.open("http://172.16.9.162:8090/WebPacs-app/webpacs/dicomview?applyid="+this.activeName.applySn+"&view=report","_blank",'')
      }

    },
    formatDate(time) {
      return moment(time).format('YYYY/MM/DD hh:mm')
    },

    async showInfo(){
       let param = {
         orgCode:this.msg.orgCode,
         clinicSn:this.activeName.D02021MAIN_KEY
       }
       param = JSON.stringify(param)
       let data = {
         apiId : '441',
         charsetValue:"clob",
         param:param
       }
       const  res =  await handlerRequestNoAuth(data)
      if (res.code != 200 || res.data.length === 0 ){

        this.loading = false
        this.resultFlag = true
        return
      }
      this.operInfo =  res.data[0]
      console.log("operInfo",this.operInfo)
     }
  },
  mounted() {
    this.initMethod()
  }
}
</script>

<style scoped lang="scss">
.item-title{
  text-align: center;
  margin: 10px 0;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.item-flex{
  display: flex;
  font-size: 14px;
  color: #666666;
  margin-bottom: 8px;
  span{
    margin-right: 15px;
  }
}
.item-table{
  margin: 10px 0;
  font-size: 14px;
  color: #666666;
  .item-table-head,.item-table-row{
    margin-bottom: 8px;
    display: flex;
    div{
      width: 100px;
    }
  }
}
</style>
