<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.recordName"-->
        <!--                       :name="item" v-for=" (item,index) in infoData"-->
        <!--          >-->
        <!--            <el-tooltip slot="label" effect="dark"-->
        <!--                        :content="item.recordName"-->
        <!--                        placement="bottom-start"-->
        <!--            >-->
        <!--            <span class="tmp"-->
        <!--            > {{ item.recordName }}</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 class="content-head-btn">-->
        <!--          <svg-icon icon-class="pdf"/>-->
        <!--          <div>查看报告</div>-->
        <!--        </div>-->
        <!--      </div>-->
      </div>
      <div class="surgical-title">
        <!--        <div class="hospital-name">{{ activeName.recordName }}</div>-->
        <!--        <div class="surgical-name">{{ '就诊时间：' + activeName.outpDate }}</div>-->
        <el-table
          :data="tableData"
          :header-cell-style="{background:'#edf4fb'}"
          style="width: 100%"
          highlight-current-row
          class="table-current"
          @row-click="clickRow"
          ref="monthlyPlanTable"
          :row-class-name="tableRowClassName"
          v-loading="loading"
        >
          <el-table-column prop="DOCU_NAME" label="文档名"   />
          <el-table-column prop="PATIENT_NAME" label="患者姓名"/>
          <el-table-column prop="PDF_DOC_CLASS_NAME" label="文档类型" />
          <el-table-column prop="CREATION_TIME" label="文档创建日期"/>
          <el-table-column prop="clinicalName" label="操作">
            <template slot-scope="scope">
              <div class="content-head-right">
                <div class="content-head-btn" >
                  <el-button type="primary" @click="ShowImage(scope.row)" size="mini">查看报告</el-button>
                  <!--              <div style="color: #0A69F3">查看报告</div>-->
                </div>
              </div>
            </template>
          </el-table-column>

        </el-table>
        <el-dialog
          title="查看报告"
          :visible.sync="open"
          width="1000px"
          class="dialogClass"
          append-to-body
        >
          <iframe :src="src" id="mobsf" scrolling="no" frameborder="0" style="height: 85vh;width: 100%;" v-if="flag"></iframe>
        </el-dialog>
      </div>
      <div>
        <!--        <el-input   type="textarea" rows="30"  v-model="activeName.content" readonly resize="none">  {{activeName.content}}</el-input>-->

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

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

export default {
  name: 'consultationRecords',
  props: {
    msg: {
      type: Object
    }
  },
  data() {
    return {
      loading: false,
      infoData: [],
      activeName: '',
      resultFlag:false,
      tableData:[],
      src:"",
      flag:true,
      open:false,


    }
  },
  methods: {
    async initMethod() {
      console.log('初始化诊断')
      // this.loading = true
      // let param = {
      //   patientId: this.msg.patientId
      //
      // }
      // param = JSON.stringify(param)
      // let data = {
      //   apiId: '155',
      //   charsetValue: '"clob"',
      //   param: param
      // }
      // const res = await handlerRequestNoAuth(data)
      let param = {
        orgCode:this.msg.orgCode,
        patient_id:this.msg.jzlsh,
        empiId:this.msg.empiId,
        typeCode:"18"
      }
      param = JSON.stringify(param)
      let data = {
        apiId : '429',
        param:param,
        charsetValue:"clob"
      }
      const  res =  await handlerRequestNoAuth(data)
      this.tableData = res.data
      var content = ''
      let infos = []
      console.log("截取结果",infos)

      this.infoData = res.data
      if (this.infoData.length ===null || this.infoData.length === 0 ){
        console.log(this.infoData)
        this.loading = false
        this.resultFlag = true
        return
      }
      this.activeName = this.infoData[0]
      console.log(this.infoData)
      this.loading = false
    },
    async ShowImage(row){
      let param = {
        key:"056cdb2251816934c09f1123b3c2dd65",
        readerId:"360",
        userCode:this.formatDate(new Date()),
        reportCode:row.CHECK_REPORT_SN
      }
      param = JSON.stringify(param)
      let data = {
        apiId : '430',
        param:param,
        charsetValue:"clob"
      }
      const  res =  await handlerRequestNoAuth(data)
      this.src =res.data[0].data.data.data['DE88.01.001.42']
      this.open = true
    },
    formatDate(time) {
      return moment(time).format('YYYY/MM/DD ')
    },
  },
  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;
    }
  }
}
.table-current {
  ::v-deep .current-row {
    background-color: black;
  }
  ::v-deep .el-table__body tr.current-row > td.el-table__cell{
    background-color: #fdf5e6 !important;
  }
}
</style>
