<template>
  <div class="Info-detail">
    <div v-for="(item,index) in timeAxisNodeInfo" :key="index">
      <template v-if="item.type=='用药'">
        <!-- 用药 -->
        <div v-for="(medicItem,medicIndex) in item.data" :key="medicIndex">
          <!-- 一天的用药次数循环 -->
          <div class="medticTitle">{{ medicItem.createTime | dateFilterTwo }}</div>
          <el-table :data="medicItem.list" style="width: 100%" max-height="500">
            <el-table-column prop="medName" label="商品名" />
            <el-table-column prop="socName" label="通用名" />
            <!-- <el-table-column width="120px" prop="spec" label="规格" />
            <el-table-column width="120px" prop="frequency" label="给药频率" />
            <el-table-column width="120px" label="用药数量">
              <template slot-scope="scope">
                <span v-if="scope.row.numberUse">
                  {{ scope.row.numberUse }} {{ scope.row.unit }} / 次
                </span>
                <span v-else>空</span>
              </template>
            </el-table-column> -->
            <el-table-column prop="site" label="部位" />
            <el-table-column width="100px" prop="itemType" label="门诊/住院" />
            <!-- <div slot="empty" class="emptyBg">
              <p>没有记录哦~</p>
            </div> -->
          </el-table>
        </div>
      </template>
      <template v-if="item.type=='诊断'">
        <!-- 诊断 -->
        <div v-for="(diagnosisItem,diagnosisIndex) in item.data" :key="diagnosisIndex">
          <!-- 一天的用药次数循环 -->
          <div class="medticTitle">{{ diagnosisItem.createTime | dateFilterTwo }}</div>
          <el-table :data="diagnosisItem.list" style="width: 100%" max-height="300">
            <el-table-column prop="diagName" label="诊断内容" />
            <el-table-column label="主诊断" width="120px">
              <template slot-scope="scope">
                {{ scope.row.isMain=='1' ? '是':'否' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-if="item.type=='检查'">
        <!-- 检查 -->
        <div v-for="(inspectsItem,inspectIndex) in item.data" :key="inspectIndex">
          <!-- 一天的用药次数循环 -->
          <div class="medticTitle">{{ inspectsItem.createTime | dateFilterTwo }}</div>
          <!-- 临床数据 -->
          <div class="clin-info divider">
            <p class="title">临床数据</p>
            <div class="clinical-content">
              <div class="clinical-content-objective">
                <span class="tip blod">临床目的：</span>
                <span class="content">{{ inspectsItem.clinAim || '空' }}</span>
              </div>
              <div class="clinical-content-symptom">
                <span class="tip blod">临床症状：</span>
                <span class="content">{{ inspectsItem.clinSymp||'空' }}</span>
              </div>
              <div class="clinical-content-diagnosis">
                <span class="tip blod">临床诊断：</span>
                <span class="content">{{ inspectsItem.clinDiag||'空' }}</span>
              </div>
              <div class="clinical-content-zhusu">
                <span class="tip blod">临床主诉：</span>
                <span class="content">{{ inspectsItem.clinComplain||'空' }}</span>
              </div>
              <div class="clinical-content-beizhu">
                <span class="tip blod">临床备注：</span>
                <span class="content">{{ inspectsItem.clinOther||'空' }}</span>
              </div>
            </div>
          </div>
          <!-- 检查项目(部位) -->
          <div class="exam-list">
            <p class="title">检查项目(部位)</p>
            <el-table :data="inspectsItem.list" style="width: 100%" max-height="300">
              <el-table-column prop="examineItem" label="检查项目" />
              <el-table-column label="操作" width="120px">
                <template slot-scope="scope">
                  <el-link type="primary" :underline="false" @click="showReport(scope.row)">查看报告</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-dialog
          width="85%"
          top="5vh"
          class="dialog-iframe"
          :title="examItem.examineItem"
          :visible.sync="dialogVisible"
          append-to-body
        >
          <iframe
            :src="`http://c2.njhuimu.com:8094/file/default1.asp?pid=${examItem.patientId}&examdate=(''${examItem.examTime}${examItem.examItemCode}'')&itemcode=x&risNo=${examItem.risNo}&examNo=${examItem.examNo}`"
            width="100%"
            height="100%"
            frameborder="0"
            scrolling="yes"
          />
        </el-dialog>
      </template>
      <template v-if="item.type=='手术'">
        <!-- 手术 -->
        <div v-for="(operationItem,operationIndex) in item.data" :key="operationIndex">
          <!-- 一天的手术次数循环 -->
          <div class="medticTitle">{{ operationItem.createTime | dateFilterTwo }}</div>
          <el-table :data="operationItem.list" style="width: 100%" max-height="300">
            <el-table-column prop="bedNo" width="60px" label="床号" />
            <el-table-column prop="deptName" label="部门名" />
            <el-table-column prop="wardName" label="病区名" />
            <el-table-column prop="mainDrName" label="主刀医生姓名" />
            <el-table-column prop="opName" label="手术名称" width="200px" />
            <el-table-column prop="opPartName" label="手术部位" />
            <el-table-column label="手术时间">
              <template slot-scope="scope">
                {{ scope.row.opTime |dateFilterTwo }}
              </template>
            </el-table-column>
            <el-table-column label="主手术">
              <template slot-scope="scope">
                {{ scope.row.isMain=='1' ? '是':'否' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-if="item.type=='住院'">
        <!-- 手术 -->
        <div v-for="(hospitalizationItem,hospitalizationIndex) in item.data" :key="hospitalizationIndex">
          <!-- 一天的手术次数循环 -->
          <div class="medticTitle">{{ hospitalizationItem.createTime | dateFilterTwo }}</div>
          <el-table :data="hospitalizationItem.list" style="width: 100%" max-height="300">
            <el-table-column prop="deptName" label="部门名称" />
            <el-table-column prop="wardName" label="病区名称" />
            <el-table-column prop="diagName" label="诊断名称" />
            <el-table-column label="住院日期">
              <template slot-scope="scope">
                {{ scope.row.inDate |dateFilterTwo }}
              </template>
            </el-table-column>
            <el-table-column label="出院日期">
              <template slot-scope="scope">
                {{ scope.row.outDate |dateFilterTwo }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-if="item.type=='随访'">
        <el-tabs v-model="item.activeTabsValue" type="card">
          <el-tab-pane v-for="(item2,index2) in item.data" :key="index2" :label="item2.crfTemplateName" :name="item2.id" style="background:#fff;padding:0 10px">
            <crf :id="item2.id" ref="crf" />
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
  </div>
</template>

<script>
import crf from '@/components/hm-crf/load_crf'
export default {
  components: { crf },
  props: {
    timeAxisNodeInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      examItem: {},
      dialogVisible: false
    }
  },
  watch: {
    timeAxisNodeInfo: {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.timeAxisNodeInfo.forEach(item => {
          if (item.type === '随访') {
            if (this.timeAxisNodeInfo[0] && this.timeAxisNodeInfo[0].data) {
              item.activeTabsValue = this.timeAxisNodeInfo[0].data[0].id
              this.$nextTick(() => {
                this.$refs.crf.forEach(item => {
                  item.init()
                })
              })
            }
          }
        })
      },
      immediate: true
    }
  },
  // mounted() {
  //   console.log('0')
  // },
  // activated() {
  //   console.log('1')
  // },
  // updated() {
  //   console.log('2')
  // },
  methods: {
    showReport(scopeRow) {
      this.examItem = JSON.parse(JSON.stringify(scopeRow))
      this.examItem.examTime = this.$options.filters['dateFilterThree'](scopeRow.examTime)
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.Info-detail {
  .medticTitle {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 16px;
  }
  // 临床数据
  .clin-info,
  .exam-list {
    .title {
      color: #fff;
      font-size: 16px;
    }
    .clinical-content {
      background: rgba(213, 213, 215, 0.17);
      margin-top: 10px;
      padding: 10px;
      color: rgb(255, 255, 255, 0.6);
    }
    .content {
      color: rgb(255, 255, 255, 0.6);
    }
  }
  .exam-list {
    margin-top: 16px;
  }
}
</style>
<style lang="scss">
.Info-detail {
  .el-table th,
  .el-table tr {
    color: #fff;
    background: none;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid #5a5d61;
  }
  .el-table {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #5a5d61;
  }
  .el-table thead {
    background: rgba(255, 255, 255, 0.08);
  }
  .el-table::before {
    height: 0;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background: rgba(255, 255, 255, 0.2);
  }

  .el-tabs__header {
    margin: 0;
  }
}
</style>
