
<template>
  <!-- 随访记录 -->
  <div class="follow-up-record">
    <div style="display: flex">
      <!-- 随访内容 -->
      <div class="content-left">
        <div class="buttonBackground">
          <el-button type="primary" plain size="small" icon="el-icon-plus" class="addfollow" @click="addFollowHandle">新增随访</el-button>
        </div>
        <time-line-follow-up ref="timeline" :time-axis-data="timeAxisData" class="time-line" @refreshDataList="childInit" />
      </div>
      <div class="content-right">
        <div class="buttons">
          <el-button type="primary" size="small" @click="addOrUpdateHandle(dataForm,'put')">修改</el-button>
          <el-button type="danger" size="small" @click="deleteHandle">删除</el-button>
          <el-button size="small" @click="printerHandle">打印</el-button>
        </div>
      </div>
      <!-- 没有随访数据 -->
      <div v-show="timeAxisData.length <= 0 && loading==false" class="no-follow-up-father">
        <div class="no-follow-up">
          <img src="@/assets/img/nodata.png" alt="">
          <div class="no-follow-up-content">
            <p class="title-one">暂无随访记录</p>
            <p class="title-two">你可以点击新增记录按钮，新增随访记录</p>
            <el-button type="primary" icon="el-icon-plus" round @click="addFollowHandle">新增记录</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增随访记录 -->
    <add-follow-record v-if="followRecordVisible" ref="followRecordRef" @getTimeAxisData="getTimeAxisData('add',$event)" @closeDialog="followRecordVisible=false" />
    <!-- 弹窗, 新增 / 修改 -->
    <follow-up v-if="followUpVisible" ref="followUp" updata-file="getTimeAxisData" :is-sign="true" :is-close-refresh="isCloseRefresh" @refreshDataList="childInit()" @getTimeAxisData="getTimeAxisData" @closeDialog="followUpVisible=false" />
  </div>
</template>

<script>
import eventBus from '@/page-subspecialty/utils/eventBus'
import timeLineFollowUp from '@/components/360View/time-line-follow-up'
import followUp from '@/components/hm-crf/followUp.vue'
import editFullCaseTemplate from '@/components/hm-crf/edit-full-case-template.vue'
import intelligentFull from '@/components/hm-crf/intelligent-full.vue'
import addFollowRecord from './add-follow-record.vue'
import IntelligentFill from '@/mixins/IntelligentFill'
const Base64 = require('js-base64').Base64
export default {
  components: {
    timeLineFollowUp,
    addFollowRecord,
    followUp,
    editFullCaseTemplate,
    intelligentFull
  },
  mixins: [IntelligentFill],
  props: {
    patientIdNumber: {
      type: String,
      default: ''
    },
    patientCentreId: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    }
  },
  inject: ['refresh'],
  data() {
    return {
      visible: true,
      timeAxisData: [], // 左侧时间轴数据
      followRecordVisible: false,
      crfVisible: false,
      followUpVisible: false,
      editFullCaseTemplateVisible: false,
      intelligentFullVisible: false,
      jsArr: [],
      dataForm: {},
      name: '',
      formDate: '',
      callList: [{
        date: '2021--4-12 12:53:21',
        recordFile: '',
        recordLength: '10:12:12',
        flag: 1
      }, {
        date: '2021--4-12 13:53:21',
        recordFile: '',
        recordLength: '10:12:12',
        flag: 1
      }, {
        date: '2021--4-12 14:53:21',
        recordFile: '',
        recordLength: '10:12:12',
        flag: 0
      }],
      followFormList: [],
      loading: true,
      isCloseRefresh: false
    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.getTimeAxisData()
        // 根据类型获取随访表单列表
        this.getFollowFormList()
      })
    },
    // 打印
    printerHandle() {
      this.$refs.crfComponent.$el.contentWindow.print()
    },
    // 根据类型获取随访表单列表
    async getFollowFormList() {
      const { data: res } = await this.$http.get('/crf/template/getListByType/随访')
      if (res.code === 0) {
        this.followFormList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 点击新增随访记录 时间+选择随访表单
    addFollowHandle() {
      this.followRecordVisible = true
      this.isCloseRefresh = true
      this.$nextTick(() => {
        this.$refs.followRecordRef.followFormList = this.followFormList
        this.$refs.followRecordRef.dataForm.patientIdNumber = this.patientIdNumber
        this.$refs.followRecordRef.dataForm.patientCentreId = this.patientCentreId
        this.$refs.followRecordRef.init()
      })
    },
    // 新增修改填写CRF
    addOrUpdateHandle(data, flag) {
      this.isCloseRefresh = flag !== 'put'
      // console.log(data)
      this.$store.commit('destroyPlugin')
      if (data.crfDescription === '病历模板') {
        this.editFullCaseTemplateVisible = true
        this.$nextTick(() => {
          this.$refs.editFullCaseTemplateRef.dataForm.id = flag === 'post' ? data.id : data.formId
          this.$refs.editFullCaseTemplateRef.dataForm.description = data.crfDescription
          this.$refs.editFullCaseTemplateRef.dataForm.patientIdNumber = data.patientIdNumber
          this.$refs.editFullCaseTemplateRef.dataForm.patientCentreId = data.patientCentreId
          this.$refs.editFullCaseTemplateRef.init()
        })
      } else if (data.crfDescription === '智能填充') {
        this.intelligentFullVisible = true
        this.$nextTick(() => {
          this.$refs.intelligentFullRef.dataForm.crfId = data.crfId
          this.$refs.intelligentFullRef.dataForm.formId = flag === 'post' ? data.id : data.formId
          this.$refs.intelligentFullRef.dataForm.isWrite = data.isWrite
          this.$refs.intelligentFullRef.init()
        })
      } else {
        this.followUpVisible = true
        this.$nextTick(() => {
          this.$refs.followUp.dataForm.crfId = data.crfId
          this.$refs.followUp.dataForm.formId = flag === 'post' ? data.id : data.formId
          this.$refs.followUp.dataForm.isWrite = data.isWrite
          this.$refs.followUp.init()
        })
      }
    },
    // 显示当前随访表单
    childInit(item) {
      console.log(item)
      item ? this.dataForm = { ...this.dataForm, ...item } : ''
      this.crfVisible = false
      this.$nextTick(() => {
        this.$http.get(`/visit/record/${this.dataForm.formId}`)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            if (res.data) {
              res.data.formId = res.data.id
              delete res.data.id
              this.dataForm = { ...this.dataForm, ...res.data }
              // console.log(this.dataForm)
              this.dataForm.content = Base64.decode(res.data.formContent)
              // console.log(this.dataForm)
              this.crfVisible = true
              console.log(this.dataForm)
              this.dataForm.isWrite === 0 && (this.dataForm.crfDescription === '智能填充' || this.dataForm.crfDescription === '病历模板') ? this.getFirstFeedbackData('智能填充', this.dataForm.formId) : this.CRFLoading = false
            }
          }).catch(() => { })
      })
    },
    // 获取时间轴数据--左侧时间轴
    async getTimeAxisData(flag, data, del) {
      this.loading = true
      const addFromData = data
      data ? this.dataForm = data : ''
      const { data: res } = await this.$http.get(`/visit/record/${this.patientCentreId}/${this.patientIdNumber}`)
      if (res.code === 0) {
        if (res.data.length > 0) {
          res.data.forEach(item => {
            item.active = false
          })
          this.timeAxisData = res.data
          // 刚新增随访添加日期完成后定位当前所在序列位置高亮
          data ? this.timeAxisData.forEach((item, index) => {
            // console.log('data', data)
            // console.log('item', item)
            // console.log('this.dataForm', this.dataForm)
            if (item.dateStr === this.dataForm.formDate) {
              this.$refs.timeline.itemCurrentIndex = index
              item.dataList.forEach((iten, itenIndex) => {
                if (iten.formId === this.dataForm.id) {
                  this.$refs.timeline.itemListCurrentIndex = itenIndex
                  window.sessionStorage.setItem('itemCurrentIndex', index)
                  window.sessionStorage.setItem('itemListIndex', itenIndex)
                }
              })
            }
          }) : ''
          // 如果是新增修改调取随访表单弹框
          flag === 'add' ? this.addOrUpdateHandle(addFromData, 'post') : ''
          // 如果是删除操作设置高亮区域及dataform和随访表单回显
          if (del && !flag) {
          // 判断当前日期是否还存在
            const Isdate = this.timeAxisData.some(item => item.dateStr === this.dataForm.formDate)
            // 获取当前所在序列
            const itemCurrentIndex = this.$refs.timeline.itemCurrentIndex
            const itemListCurrentIndex = this.$refs.timeline.itemListCurrentIndex
            // 如果当前日期存在获取当前日期下的随访dataform
            if (Isdate) {
              const itemListIndex = itemListCurrentIndex == 0 ? 0 : itemListCurrentIndex - 1
              this.$refs.timeline.itemListCurrentIndex = itemListIndex
              this.dataForm = this.timeAxisData[itemCurrentIndex].dataList[itemListIndex]
              window.sessionStorage.setItem('itemCurrentIndex', itemCurrentIndex)
              window.sessionStorage.setItem('itemListIndex', itemListIndex)
              this.childInit()
            } else {
            // 如果不存在获取上一日期的第一个序列的随访dataform
              const itemIndex = itemCurrentIndex == 0 ? 0 : itemCurrentIndex - 1
              this.$refs.timeline.itemCurrentIndex = itemIndex
              this.$refs.timeline.itemListCurrentIndex = 0
              this.dataForm = this.timeAxisData[itemIndex].dataList[0]
              window.sessionStorage.setItem('itemCurrentIndex', itemIndex)
              window.sessionStorage.setItem('itemListIndex', 0)
              // console.log(123)
              this.childInit()
            }
          } else if (!del && !flag) {
            // console.log(123)
            const getItemListCurrentIndex = window.sessionStorage.getItem('itemListIndex') ? window.sessionStorage.getItem('itemListIndex') : 0
            const getItemCurrentIndex = window.sessionStorage.getItem('itemCurrentIndex') ? window.sessionStorage.getItem('itemCurrentIndex') : 0
            // console.log(this.timeAxisData)
            this.dataForm = this.timeAxisData[getItemCurrentIndex].dataList[getItemListCurrentIndex]
            // console.log(this.dataForm)
            this.childInit()
          }
        } else {
          this.dataForm = {}
          this.timeAxisData = []
          del ? this.$emit('refreshFollow') : ''
        }
        this.loading = false
      } else {
        this.$message.error(res.msg)
      }
    },
    // 删除
    async deleteHandle() {
      this.$confirmFun('你确定要删除此随访记录吗？').then(async() => {
        const { data: res } = await this.$http.delete(`/visit/record/${this.dataForm.id}`)
        if (res.code === 0) {
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.getTimeAxisData('', '', 'delete')
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 关闭弹框
    closeDialog() {
      // 调用档案兄弟组件事件
      // eventBus.$emit('getArchiveCaseList')
      this.$emit('closeDialog', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.follow-up-record {
  width: 100%;
  height: 100%;
  .no-follow-up-father {
    width: 100%;
    text-align: center;
    margin-top: 10vh;
    .title-one {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 8px;
      font-weight: 700;
    }
    .title-two {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
      margin-bottom: 8px;
    }
  }
  .follow-up-content {
    display: flex;
    .content-left {
      width: 180px;
      .el-button {
        width: 90%;
      }
      .buttonBackground {
        background: #fff;
        padding-bottom: 20px;
      }
    }
  }

  .content-right {
    flex: 1;
    //overflow:hidden;
    //position: relatiave;
    //text-align: center;
    .buttons {
      width: 100%;
      //height: 50px;
      //line-height: 50px;
      //background: rgba(0, 0, 0, 0.5);
      //position: absolute;
      //top:0;
      padding-right: 10px;
      text-align: right;
    }
    .make-call {
      position: absolute;
      width: 255px;
      top: 50px;
      right: 10px;
    }
    .make-call-head,.make-call-record-list {
      background: #F4F8FB;
      border-radius: 6px;
      width: 100%;
    }
    .make-call-head {
       height: 68px;
       display: flex;
       justify-content: space-between;
       padding: 12px;
       .patient-info {
         text-align: left;
         border-right:1px solid #ccc;
         padding-right: 12px;
       }
       .patient-info-head {
         display: inline-block;
         width:58px;
       }
       .patient-call {
         color: #00820D;
         cursor: pointer;
       }
    }
    .make-call-record-list {
      margin-top: 16px;
      height: calc(88vh - 220px);
      overflow-y: auto;
      text-align: left;
      padding:16px;
      .text {
        font-weight: 700;
        font-size: 16px;
        color: #1D2129;
        margin-bottom: 16px;
      }
      .call-list {
        margin-bottom: 16px;
      }
      .call-date {
        padding-bottom: 2px;
        color: #8E8E8E;
      }
      .call-file {
        margin-left: 10px;
        span:nth-child(1) {
          padding-right: 10px;
        }
        span:nth-child(2) {
          cursor: pointer;
          color: #1e79ff;
        }
      }
    }
  }
  .content-right-padding {
    padding-right: 0;
  }
}
</style>
<style lang="scss">
.follow-up-record {
  .el-dialog {
    height: 88vh;
    margin-top: 7vh !important;
  }
  .microphone-blue {
    color: #1e79ff;
  }
  .call-green {
    color: #00820D;
  }
}
</style>
