<template>
  <el-dialog title="" class="detail-view" :fullscreen="true" :visible.sync="visible" append-to-body @close="closedDialog">
    <span slot="title" style="display:inline-block;height: 100%">
      <div class="picTool">
        <span class="dataBtn" @click="handleSelete(1)">数据与表单</span>
        <span class="imgBtn" @click="handleSelete(2)">图像与报告</span>
        <img
          v-if="isActive === 1"
          class="pic_img"
          :src="require('@/assets/img/selecetPic.png')"
          alt=""
          @click="handleSelete(1)"
        >
        <img v-else class="pic_img" :src="require('@/assets/img/picTool.png')" alt="" @click="handleSelete(1)">
        <img
          v-if="isActive === 1"
          class="pic_img"
          :src="require('@/assets/img/picTool.png')"
          alt=""
          @click="handleSelete(2)"
        >
        <img v-else class="pic_img" :src="require('@/assets/img/selecetPic.png')" alt="" @click="handleSelete(2)">
      </div>
    </span>
    <div class="template-container-360">
      <!-- 概况 -->
      <div class="patient-wrapper">
        <!-- 时间轴 -->
        <time-line
          v-if="isActive === 1"
          ref="timeline"
          :time-axis-data="timeAxisData"
          class="time-line"
          @getTimeAxisData="getTimeAxisData"
          v-on="$listeners"
          @getTimeAxisNodeInfo="getTimeAxisNodeInfo"
          @getVisitRecordInfo="getVisitRecordInfo"
        />
        <!--      数据与表单-->
        <div v-if="isActive === 1" class="info-content">
          <el-scrollbar class="scrollbar-wrapper" style="height:100%;">
            <div class="dataForm">
              <div class="data-header">
                <div class="personMsg">
                  <img class="mr16" style="vertical-align: middle" :src="require('@/assets/img/icon-idcard.png')" alt="">
                  <span class="mr16">{{ patientBaseData.patientName }}</span>
                  <span class="mr16">{{ patientBaseData.patientSex }}</span>
                  <span v-if="patientBaseData.patientAge">{{ patientBaseData.patientAge }}岁</span>
                </div>
                <div class="personInfo">
                  <span>身份证号：{{ patientBaseData.patientIdNumber }}</span>
                  <span>病历号：{{ patientBaseData.patientId }}</span>
                  <span>出生日期：{{ patientBaseData.patientBirthday ? patientBaseData.patientBirthday.substring(0, 11) : '' }}</span>
                  <span>电话：{{ patientBaseData.patientPhone }}</span>
                </div>
              </div>

              <div style="width: 100%;height: 100%;flex: 1">
                <div v-if="type === '检查'">
                  <p class="clinical">临床数据</p>
                  <div v-for="(item,index) in timeAxisNodeInfo" :key="index1" class="dataRecord">
                    <div
                      style="display:flex;justify-content:space-between;padding:15px;box-sizing: border-box;color: #FFFFFF;"
                    >
                      <div>
                        <p v-show="item.createTime" style="margin-bottom: 10px">日期:
                          {{ item.createTime ? item.createTime.substring(0, 11) : '' }}</p>
                        <p v-show="item.clinComplain">主诉: {{ item.clinComplain }}</p>
                      </div>
                      <div>
                        <p v-show="item.clinSymp" style="margin-bottom: 10px">症状: {{ item.clinSymp }}</p>
                        <p v-show="item.clinDiag">诊断: {{ item.clinDiag }}</p>
                      </div>
                    </div>
                    <div style="background-color: #0C1016;height: 10px;" />
                    <el-table
                      v-if="item.list.length"
                      :data="item.list"
                      style="width: 100%;"
                    >
                      <el-table-column
                        prop="examineItem"
                        label="检查项目"
                        align="center"
                      />
                      <el-table-column
                        prop="examTime"
                        label="检查时间"
                        align="center"
                      />
                    </el-table>
                  </div>
                </div>
                <div v-if="type === '诊断'">
                  <div v-for="item in timeAxisNodeInfo" :key="item.id">
                    <p class="clinical">{{ item.createTime ? item.createTime.substring(0,10) : '' }}</p>
                    <div class="dataRecord">
                      <el-table
                        :data="item.list"
                        style="width: 100%"
                      >
                        <el-table-column
                          prop="diagName"
                          label="诊断内容"
                          align="center"
                        />
                        <el-table-column
                          label="主诊断"
                          align="center"
                        >
                          <template slot-scope="scope">
                            {{ scope.row.isMain === '1' ? '是' : '否' }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
                <div v-if="type === '用药'">
                  <div v-for="item in timeAxisNodeInfo" :key="item.id">
                    <p class="clinical">{{ item.createTime ? item.createTime.substring(0,10) : '' }}</p>
                    <div class="dataRecord">
                      <el-table
                        :data="item.list"
                        style="width: 100%"
                      >
                        <el-table-column
                          prop="medName"
                          label="商品名"
                          align="center"
                        />
                        <el-table-column
                          prop="socName"
                          label="通用名"
                          align="center"
                        />
                        <el-table-column
                          prop="site"
                          label="部位"
                          align="center"
                        />
                        <el-table-column
                          prop="itemType"
                          label="门诊/住院"
                          align="center"
                        />
                      </el-table>
                    </div>
                  </div>
                </div>
                <div v-if="type === '手术'">
                  <div v-for="item in timeAxisNodeInfo" :key="item.id">
                    <p class="clinical">{{ item.createTime ? item.createTime.substring(0,10) : '' }}</p>
                    <div class="dataRecord">
                      <el-table
                        :data="item.list"
                        style="width: 100%"
                      >
                        <el-table-column
                          prop="bedNo"
                          label="床号"
                          align="center"
                        />
                        <el-table-column
                          prop="deptName"
                          label="部门名"
                          align="center"
                        />
                        <el-table-column
                          prop="wardName"
                          label="病区名"
                          align="center"
                        />
                        <el-table-column
                          prop="mainDrName"
                          label="主刀医生姓名"
                          align="center"
                        />
                        <el-table-column
                          prop="opName"
                          label="手术名称"
                          align="center"
                        />
                        <el-table-column
                          prop="opPartName"
                          label="手术部位"
                          align="center"
                        />
                        <el-table-column
                          prop="opTime"
                          label="手术时间"
                          align="center"
                        >
                          <template slot-scope="scope">
                            {{ scope.row.opTime.substring(0,10) }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="主手术"
                          align="center"
                        >
                          <template slot-scope="scope">
                            {{ scope.row.isMain === '1' ? '是' : '否' }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
                <div v-if="type === '住院'">
                  <div class="dataRecord">
                    <el-table
                      :data="timeAxisNodeInfo"
                      style="width: 100%"
                    >
                      <el-table-column
                        prop="deptName"
                        label="部门名称"
                        align="center"
                      />
                      <el-table-column
                        prop="wardName"
                        label="病区名称"
                        align="center"
                      />
                      <el-table-column
                        prop="diagName"
                        label="诊断名称"
                        align="center"
                      />
                      <el-table-column
                        label="住院日期"
                        align="center"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.inDate ? scope.row.inDate.substring(0, 10) : '' }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="出院日期"
                        align="center"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.outDate ? scope.row.outDate.substring(0, 10) : '' }}
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
                <div v-if="type === '出院'">
                  <div class="dataRecord">
                    <el-table
                      :data="timeAxisNodeInfo"
                      style="width: 100%"
                    >
                      <el-table-column
                        prop="deptName"
                        label="部门名称"
                        align="center"
                      />
                      <el-table-column
                        prop="wardName"
                        label="病区名称"
                        align="center"
                      />
                      <el-table-column
                        prop="diagName"
                        label="诊断名称"
                        align="center"
                      />
                      <el-table-column
                        label="住院日期"
                        align="center"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.inDate ? scope.row.inDate.substring(0, 10) : '' }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="出院日期"
                        align="center"
                      >
                        <template slot-scope="scope">
                          {{ scope.row.outDate ? scope.row.outDate.substring(0, 10) : '' }}
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
                <div v-if="isVisit === '1'" style="height: 100%">
                  <p class="clinical">{{ type }}</p>
                  <div class="VisitContent">

                    <crf
                      v-if="crfVisible"
                      ref="crfComponent"
                      :value="VisitContent"
                      :height="'100%'"
                      :js-arr="jsArr"
                      :body-style-show="true"
                      style="margin: 0;padding: 40px 0;width: 95%;border: 1px solid #000;background:#fff;"
                    />
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <!-- 图像与报告 -->
        <keep-alive>
          <imgRecord v-if="isActive === 2" :patient-info="patientBaseData" />
        </keep-alive>
        <!-- 关键指标 -->
        <!-- 收缩框 -->
        <div v-if="isActive === 1" v-move class="key-indicators-shrink">
          <div class="icon-circle" @click="shrinkClick">
            <i :class="drawer==true ? 'el-icon-arrow-right':'el-icon-arrow-left'" />
          </div>
          <img :src="require('@/assets/img/key-indicators.png')" alt="">
        </div>
        <key-indicators
          v-show="drawer && isActive === 1"
          id="drawerKey"
          ref="keyIndicatorRef"
          class="key-content"
          v-bind="$attrs"
          :patient-id="patientId"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import timeLine from './time-line.vue'
import keyIndicators from './key-indicators'
import imgRecord from './img-reccrd.vue'
import moment from 'moment' // 导入模块
import crf from '@/components/hm-crf/load_content.vue'
import IntelligentFill from '@/mixins/IntelligentFill.js'
const Base64 = require('js-base64').Base64

export default {
  components: { timeLine, keyIndicators, crf, imgRecord },
  directives: {
    move(el, bindings) {
      el.onmousedown = (e) => {
        const init = e.clientX
        const parent = document.getElementById('drawerKey')
        const initWidth = parent.offsetWidth
        document.onmousemove = function(e) {
          const end = e.clientX
          const newWidth = init - end + initWidth
          parent.style.width = newWidth + 'px'
        }
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  },
  mixins: [IntelligentFill],
  props: {
    id: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    },
    isSearch: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      drawer: true,
      visible: false,
      patientBaseData: {},
      timeAxisNodeInfo: [], // 点击左侧时间轴获取到的中间区域详细信息
      VisitContent: '', // 首诊单
      detailInfo: [], // 详细信息
      timeAxisData: [], // 左侧时间轴数据
      kpilist: [], // kpi关键指标checkbox
      ShiLiAndYanYaData: {}, // 视力和眼压
      isActive: 1, // 控制数据与报告tab展示
      fileFlag: true, // 文件展示组件
      type: '', // 筛查类型
      defaultProps: {
        children: 'children',
        label: 'tagName'
      },
      jsArr: [],
      isVisit: '',
      crfVisible: false,
      dataForm: {}
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.$refs.keyIndicatorRef.init()
      })
    },
    // 重置时间轴样式
    setIndex() {
      this.$nextTick(() => {
        this.$refs.timeline.currentIndex = 0
        this.$refs.timeline.itemCurrentIndex = 0
        this.$refs.timeline.itemListCurrentIndex = 0
        this.$refs.timeline.setCheckArr()
      })
    },
    // 关键指标组件是否显示
    shrinkClick() {
      this.drawer = !this.drawer
      // if (this.drawer) {
      //   this.$nextTick(() => {
      //     this.$refs.keyIndicatorRef.init()
      //   })
      // }
    },
    // 根据id获取患者信息--中间上侧患者信息
    async getPatientData() {
      const { data: res } = await this.$http.get(
        '/patient/view/getPatientData',
        {
          params: {
            patientId: this.patientId
          }
        }
      )
      if (res.code === 0) {
        this.patientBaseData = res.data ? res.data : {}
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取时间轴数据--左侧时间轴
    async getTimeAxisData(typeScreenCheckArr) {
      const type = ['诊断', '手术', '用药', '住院', '出院', '检查', '随访']
      const { data: res } = await this.$http({
        method: 'post',
        url: '/patient/view/getTimeAxisData',
        data: {
          patientId: this.patientId,
          type: typeScreenCheckArr !== undefined ? typeScreenCheckArr : type
        }
      })
      if (res.code === 0) {
        res.data.forEach(item => {
          item.data.forEach(iten => {
            iten.active = false
          })
        })
        this.timeAxisData = res.data.length > 0 ? res.data : []
        if (res.data.length > 0) {
          const info = this.timeAxisData[0].data[0].itemList[0]
          info.isVisit === '1' ? this.getVisitRecordInfo(info) : this.getTimeAxisNodeInfo(info)
        }
        if (!res.data.length) {
          this.timeAxisNodeInfo = []
          this.type = ''
          this.isVisit = ''
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取时间轴节点信息--点击左侧时间轴获取患者具体信息
    async getTimeAxisNodeInfo(item) {
      this.type = item.type
      this.isVisit = item.isVisit
      const { data: res } = await this.$http.get('/patient/view/getTimeAxisNodeInfo', {
        params: {
          date: moment(item.date).format('YYYY-MM-DD'),
          type: item.type,
          patientId: this.patientId
        }
      })
      if (res.code === 0) {
        this.timeAxisNodeInfo = res.data && res.data.length ? res.data[0].data : []
        this.isActive = 1
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取CRF表单
    async getVisitRecordInfo(info) {
      this.crfVisible = false
      this.type = info.type
      this.isVisit = info.isVisit
      const { data: res } = await this.$http.get(`/visit/record/${info.formId}`)
      if (res.code === 0) {
        this.VisitContent = res.data.formContent ? Base64.decode(res.data.formContent) : ''
        this.dataForm = res.data
        res.data.isWrite === 0 && (res.data.crfDescription === '智能填充' || res.data.crfDescription === '病历模板') ? this.getFirstFeedbackData('智能填充', this.dataForm.id) : this.CRFLoading = false
        this.crfVisible = true
      } else {
        this.$message.error(res.msg)
      }
    },
    // 切换数据与表单、图像与报告tab
    handleSelete(index) {
      this.isActive = index1
    },
    // 关闭弹框时
    closedDialog() {
      this.$emit('detailViewVisible')
      this.visible = false
    }
  }
}
</script>

<style lang="scss">
.aui-wrapper .detail-view .el-table th {
  color: #ffffff !important;
  background-color: #1f2328 !important;
}
.detail-view {
  .el-scrollbar__wrap {
    margin-right: -6px !important;
  }
  .el-scrollbar__view {
    height: 100%;
  }
  .el-dialog.is-fullscreen {
    overflow: hidden;
  }
  .el-input__inner {
    background-color: #000000;
    border: 1px solid #1c69dc;
    color: #ffffff;
  }
  .el-step__icon {
    width: 8px;
    height: 8px;
    //background-color: #49AA19;
    margin-right: 11px;
  }
  // 完成
  .el-step__head.is-success .el-step__icon {
    background: #49AA19;
  }
  .el-step__icon-inner {
    display: none;
  }
  .el-step__title {
    line-height: 25px;
  }
  .el-step__head.is-finish {
    color: #49aa19;
    border-color: #49aa19;
  }
  .el-step__line {
    margin-right: 12px !important;
    //background-color: #49AA19
  }
  .el-step__icon.is-text {
    border: none;
  }
  .el-step.is-center .el-step__description{
    padding: 0 8%;
  }
  .el-table th, .el-table .has-gutter .tr{
    color: #FFFFFF;
    background: #1F2328;
  }
  .el-table th, .el-table tr{
    color: #FFFFFF;
    background: #1F2328;
  }
  .aui-wrapper .el-table th{
    color: #FFFFFF;
    background: #1F2328;
  }
  .el-table tbody th, .el-table tbody tr{
    color: #FFFFFF;
    background-color: #0C1016;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #0C1016;
  }
  .el-table, .el-table__expanded-cell{
    background-color: #0C1016;
    border-bottom: 1px solid #000;
  }
  .el-table td, .el-table th.is-leaf{
    border-bottom: 1px solid #1F2328;
  }
  .el-table{
    border: 1px solid #1F2328;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before{
    background-color: transparent;
  }

}
</style>

<style lang="scss" scoped>
.picTool{
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
  text-align: center;
  cursor: pointer;

  .dataBtn {
    position: absolute;
    top: 0;
    left: 24px;
    font-size: 16px;
    color: #FFFFFF;
  }
  .imgBtn {
    position: absolute;
    top: 0;
    right: 40px;
    font-size: 16px;
    color: #FFFFFF;
  }
  .pic_img{
    height: 44px;
    margin-left: -16px;
  }
}
.template-container-360 {
  width: 100%;
  height: 100%;

  // 时间轴
  .time-line {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: 200px;
    height: 100%;
    padding: 10px 0;
  }
  .patient-wrapper {
    .scrollbar-wrapper .el-scrollbar__wrap {
      padding-right: 10px;
    }
  }
  .key-indicators-shrink {
    width: 32px;
    height: 100%;
    background: linear-gradient(90deg, rgba(47, 130, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    .icon-circle {
      border-radius: 50%;
      width: 24px;
      height: 24px;
      border: 2px solid rgba(30, 121, 255, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 18px;
      margin-left: 3px;
      cursor: pointer;
    }
    .el-icon-arrow-right,.el-icon-arrow-left {
      color: #fff;
      font-weight: 700;
    }
    img {
      width: 32px;
      height: 142px;
    }
  }
  // 关键指标
  .key-content {
    height: 100%;
    width: calc(33% - 5px);
    padding-bottom: 50px;
  }
  .key-indicators-shrink:hover{
    cursor: w-resize;
  }

  // 病人信息
  .patient-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
     background-color: #0c1016;

    // 信息
    .info-content {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      min-width: 530px;
      padding: 10px 16px;
      height: calc(100% - 50px);
      .info-btn{
        text-align: center;
        margin-bottom: 16px;
      }
      .picBtn{
        margin-left: 0;
        background-color: #0C1016;
        border: 1px solid #3D3D3D;
        color: #FFFFFF;
      }
      .bgBlue{
        background-color: #1C69DC;
      }
      .dataForm{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
      }
      .data-header{
        width: 100%;
        height: 96px;
        padding: 16px;
        background: linear-gradient(180deg,rgba(0,70,251,0.46), rgba(0,3,11,0.10) 100%);
        border-radius: 4px;
        margin-bottom: 30px;
      }
      .clinical{
        font-size: 20px;
        font-weight: 600;
        color: #FFFFFF;
        margin: 0 0 14px 16px;
      }
      .VisitContent{
        width: 100%;
        height: 1500px;
        text-align: center;
      }
      .dataRecord{
        width: 100%;
        background: rgba(255,255,255,0.08);
        border-radius: 4px;
        margin-bottom: 22px;
      }
      .dataPad{
        padding: 32px 0px;
      }
      .personMsg{
        color: #FFFFFF;
        font-size: 20px;
        margin-bottom: 10px;
      }
      .personInfo{
        display: flex;
        justify-content: space-between;
        color: #FFFFFF;
        font-size: 14px;
        white-space: nowrap; // 段落不换行
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .mr16{
        margin-right: 16px;
      }
      .stepRecord{
        .step-title{
          font-size: 16px;
          color: #FFFFFF;
        }
        .step-description{
          text-align: left;
          font-size: 14px;
          color: rgba(255,255,255,0.45);
          margin-top: 5px;
        }
      }
    }

  }
}
</style>
