<template>
  <div class="newRecordPage" v-loading="load"
    element-loading-text="刷新中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="top_row_new">
      <div class="floatLeftBox">
        <div class="floatLeft">
          <i
            class="iconfont icon-zuojiantou jiantou"
            @click="toReturn"
          ></i>
          <div class="newSearch">
            <el-input
              class="newinput"
              prefix-icon="el-icon-search"
              v-model="search_input"
              ref="search_field"
              placeholder="透析号/姓名"
              @keyup.enter.native='searchWithKeyword'
              @input='searchWithKeyword'
            ></el-input>

          </div>
        </div>
        <van-popup
          v-model="show"
          closeable
          position="top"
          :style="{ height: '200px' }"
        >
          <div class="popupContent">
            <div class="popupBox">
              <div class="popupBoxOne" @click="goMonitoring">
                <img src="../../assets/images/T1.png" alt />
                <p>透析监测</p>
              </div>
              <div class="popupBoxOne" @click="goAdvice">
                <img src="../../assets/images/T2.png" alt />
                <p>透析医嘱</p>
              </div>
              <div class="popupBoxOne" @click="goSchedule">
                <img src="../../assets/images/T3.png" alt />
                <p>临时排班</p>
              </div>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
    <van-tabs v-model="index" class="recordPageTabs"  @click="onClick" :lazy-render="false">
      <van-tab title="候诊区" :badge="un_read_wait_num == 0 ? '' : un_read_wait_num">
        <waiting-area
          ref="waitingArea"
          v-show="index == 0"
          title="候诊区"
          :search_keyword="search_keyword"
        ></waiting-area>
      </van-tab>
      <van-tab title="透析区" :badge="un_read_dialysis_num == 0 ? '' : un_read_dialysis_num">
        <dialysis-area
          @func="getMsgFormSon"
          ref='dialysisArea'
          @refWaitingArea="refWaitingArea"
          v-show="index == 1"
          title="透析区"
          :search_keyword="search_keyword"
          @clear_search_keyword="clearKeyword"
        ></dialysis-area>
      </van-tab>
      <van-tab title="透析监测">
        <monitoring v-if="index == 2" ref='monitoring' :search_keyword="search_keyword"></monitoring>
      </van-tab>

      <van-tab title="透析医嘱">
        <dialysis-advice-table v-if="index == 3"></dialysis-advice-table>
      </van-tab>
      <van-tab title="病历质控">
        <control v-if="index == 4" ref='control' :search_keyword="search_keyword"></control>
      </van-tab>

      <van-tab title="耗材药品">
        <before-dialysis  v-if="index ==5" ref="dialysisParameters"  :search_keyword="search_keyword"></before-dialysis>
      </van-tab>
      <van-tab title="透析叫号">
        <calling v-if="index == 6"></calling>
      </van-tab>

      <van-tab title="药品统计">
        <dialysis-advice v-if="index == 7"></dialysis-advice>
      </van-tab>
    </van-tabs>
    <div class="fixedBox" @click="refresh" ref="moveBtn"
      style="margin-bottom:1.375rem" v-if="index == 0 ? true : index == 1 ? true : false">
        <img src="../../assets/images/refresh.png"
        @mousedown="down" @touchstart="down"
        @mousemove="move"
        @touchmove="move"
        @mouseup="end"
        @touchend="end"
        @touchcancel="end" alt />
      </div>
      <div class="fixedBox2" v-if="user_type==3 &&($store.getters.user.template_info.org_id==10340 || $store.getters.user.template_info.org_id==10489)"  @click="toExecution" ref="moveBtns" @mousedown="downs" @touchstart="downs"
        @mousemove="moves"
        @touchmove="moves"
        @mouseup="ends"
        @touchend="ends"
        @touchcancel="ends">
        <img src="../../assets/images/advice.png"  alt />
        <span class="redpoint" v-if="total>0">
           {{ total }}
        </span>
      </div>
      <div class="popup">
        <van-popup
          v-model:show="showRight"
          position="right"
          :style="{ width: '60%', height: '100%',right: '-30%' }">
          <div  v-if="drugStockConfig.is_open == 0 || drugStockConfig.is_open == 2">
            <div style="margin: 10px;border-bottom: 1px solid black;">
              <span class="text">姓名</span>
              <span class="text">条数</span>
            </div>
            <div v-for="item in adviceList">
              <div style="margin: 10px;border-bottom: 1px solid black;" @click="toExecutionPatent(item)">
                <span class="text">{{getPaitenName(item.patient_id) }}</span>
                <span class="text">{{item.count }}</span>
              </div>
            </div>
          </div>
          <div v-if="drugStockConfig.is_open == 1 ">
            <div style="margin: 10px;border-bottom: 1px solid black;">
              <span class="text">姓名</span>
              <span class="text">条数</span>
            </div>
            <div v-for="item in tableData">
              <div style="margin: 10px;border-bottom: 1px solid black;" @click="toExecutionPatent(item)">
                <span class="text">{{getPaitenName(item.patient_id) }}</span>
                <span class="text">{{item.count }}</span>
              </div>
            </div>
          </div>
        </van-popup>
      </div>
  </div>
</template>

<script>
import Utils from './utils.js'
import DialysisArea from './DialysisArea'
import WaitingArea from './WaitingArea'
import { Popover } from 'vux'
import { getDialysisScheduals, getWaitingScheduals } from '@/api/dialysis'
import { parseTime } from '@/utils/index'
import { getDialysisOrWaitSelectedConfig } from '@/utils/data_config'
import monitoring from '../monitoring/index'
import control from '../control/index.vue'
import DialysisAdviceTable from '../advice/DialysisAdviceTable'
import DialysisAdvice from '../advice/DialysiAdive'
import beforeDialysis from './beforeDialysis/index'
import calling from './calling/index'
import schedule from './schedule/index'

export default {
  name: 'RecordPage',
  props: {
    un_read_wait_num: {
      type: Number
    },
    un_read_dialysis_num: {
      type: Number
    },
    total: {
      type: Number
    },
    adviceList:{
      type:Array
    },
    hisAdviceList:{
      type:Array
    },
    projectList:{
      type:Array
    },
    drugStockConfig:{
      type:Object
    },
    patientList:{
      type:Array
    },
    user_type:{
      type:Number,
    },
    projectConfig:{
      type:Object
    },
  },
  data () {
    return {
      index: this.$store.getters.user.tab_index,
      search_input: '',
      search_keyword: '',
      scheduals: [],
      advice_groups: [],
      unReadWaitNum: 0,
      unReadDialysisNum: 0,
      show: false,
      load: false,
      showRight:false,
      // 拖动
      keyBoardShow: true,
      flags: false,
      position: {
        x: 0,
        y: 0
      },
      positions: {
        x: 0,
        y: 0
      },
      active: 0,
      nx: '',
      ny: '',
      dx: '',
      dy: '',
      xPum: '',
      yPum: '',

      nsx: '',
      nsy: '',
      dsx: '',
      dsy: '',
      xsPum: '',
      ysPum: '',

      moveBtn: {},
      moveBtns:{},
      dialogVisible:false,
      tableData:[],
    }
  },
  components: {
    DialysisArea,
    WaitingArea,
    Popover,
    monitoring,
    DialysisAdviceTable,
    DialysisAdvice,
    beforeDialysis,
    calling,
    schedule,
    control
    // Group,
   // Cell
  },
  mounted () {
    this.moveBtn = this.$refs.moveBtn
    if (sessionStorage.getItem('checkBtnTop')) {
      this.moveBtn.style.top = sessionStorage.getItem('checkBtnTop')
      this.moveBtn.style.bottom = 'initial'
    }
    if (sessionStorage.getItem('checkBtnLeft')) {
      this.moveBtn.style.left = sessionStorage.getItem('checkBtnLeft')
    }
    this.moveBtns= this.$refs.moveBtns
    if (sessionStorage.getItem('checkBtnsTop')) {
      this.moveBtns.style.top = sessionStorage.getItem('checkBtnTop')
      this.moveBtns.style.bottom = 'initial'
    }
    if (sessionStorage.getItem('checkBtnsLeft')) {
      this.moveBtns.style.left = sessionStorage.getItem('checkBtnLeft')
    }
    const originHeight = document.documentElement.clientHeight || document.body.clientHeight
    window.addEventListener('resize', () => {
      const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
      if (resizeHeight < originHeight) {
        this.keyBoardShow = false
      } else {
        this.keyBoardShow = true
      }
    }, false)
  },
  methods: {
     // 拖动
     down (event) {
      this.flags = true
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      this.position.x = touch.clientX
      this.position.y = touch.clientY
      this.dx = this.moveBtn.offsetLeft
      this.dy = this.moveBtn.offsetTop
    },
    move (event) {
      if (this.flags) {
        var touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        this.nx = touch.clientX - this.position.x
        this.ny = touch.clientY - this.position.y
        this.xPum = this.dx + this.nx
        this.yPum = this.dy + this.ny
        var clientWidth = document.documentElement.clientWidth
        var clientHeight = document.documentElement.clientHeight
        if (
          this.xPum > 0 &&
          this.xPum < clientWidth - this.moveBtn.offsetWidth
        ) {
          this.moveBtn.style.left = this.xPum + 'px'
        }
        if (
          this.yPum > 0 &&
          this.yPum < clientHeight - this.moveBtn.offsetHeight
        ) {
          this.moveBtn.style.top = this.yPum + 'px'
        }

        // 阻止页面的滑动默认事件
        document.addEventListener('touchmove', this.handler, {
          passive: false
        })
      }
    },
    // 鼠标释放时候的函数
    end () {
      this.flags = false
      sessionStorage.setItem('checkBtnTop', this.moveBtn.style.top)
      sessionStorage.setItem('checkBtnLeft', this.moveBtn.style.left)
      document.addEventListener('touchmove', this.handler, {
        passive: false
      })
    },

    downs (event) {
      this.flags = true
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      this.positions.x = touch.clientX
      this.positions.y = touch.clientY
      this.dsx = this.moveBtns.offsetLeft
      this.dsy = this.moveBtns.offsetTop
    },
    moves (event) {
      if (this.flags) {
        var touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        this.nsx = touch.clientX - this.positions.x
        this.nsy = touch.clientY - this.positions.y
        this.xsPum = this.dsx + this.nsx
        this.ysPum = this.dsy + this.nsy
        var clientWidth = document.documentElement.clientWidth
        var clientHeight = document.documentElement.clientHeight
        if (
          this.xsPum > 0 &&
          this.xsPum < clientWidth - this.moveBtns.offsetWidth
        ) {
          this.moveBtns.style.left = this.xsPum + 'px'
        }
        if (
          this.ysPum > 0 &&
          this.ysPum < clientHeight - this.moveBtns.offsetHeight
        ) {
          this.moveBtns.style.top = this.ysPum + 'px'
        }

        // 阻止页面的滑动默认事件
        document.addEventListener('touchmove', this.handler, {
          passive: false
        })
      }
    },
    // 鼠标释放时候的函数
    ends () {
      this.flags = false
      sessionStorage.setItem('checkBtnTop', this.moveBtn.style.top)
      sessionStorage.setItem('checkBtnLeft', this.moveBtn.style.left)
      document.addEventListener('touchmove', this.handler, {
        passive: false
      })
    },
    handler () {
      if (this.flags) {
        event.preventDefault()
      } else {
        return true
      }
    },
    onClick (tabIndex) {

      this.$store.getters.user.tab_index = tabIndex
      this.index = tabIndex
      if (tabIndex == 5) {
        this.$refs.dialysisParameters.getDialysisGoods()
      }
    },
    refWaitingArea: function () {
      this.$refs.waitingArea.requestScheduals()
      this.$emit('refAdvice')
    },
    ClickTab: function (tabIndex) {
      this.index = tabIndex
    },
    searchWithKeyword: function () {
      // this.$refs.search_field.blur();
      this.search_keyword = this.search_input
      if (this.index == 0) {
        this.$refs.waitingArea.searchVal(this.search_keyword)
      } else if (this.index == 1) {
        this.$refs.dialysisArea.searchVal(this.search_keyword)
      } else if (this.index == 2) {
        this.$refs.monitoring.searchWithKeyword(1, this.search_keyword)
      } else if (this.index == 5) {
        this.$refs.dialysisParameters.getKeyword(this.search_keyword)
      }
    },
    clearKeyword: function () {
      this.search_input = ''
      this.search_keyword = ''
    },
    goSchedule () {
      this.$router.push('/add_urgent_schedule')
    },
    goMonitoring () {
      this.$router.push('/monitoring')
    },
    goAdvice () {
      this.$router.push('/advice')
    },
    toReturn () {
      this.$store.getters.user.tab_index = 0
      this.$router.push('/homeIndex')
    },
    refresh () {
      this.load = true
      let time = new Date()
      this.$refs.dialysisArea.requestLatestDialysisScheduals(time)

      Utils.$emit('demo', 'msg')
    },
    getMsgFormSon (data) {
      this.load = data
    },
    chooseActive (index) {
      this.active = index
    },
    toExecution(){
      this.tableData = []
      if(this.adviceList!=null && this.adviceList.length >0){
          for(let i=0;i<this.adviceList.length;i++){
              this.tableData.push(this.adviceList[i])
          }
      }
      if(this.hisAdviceList!=null && this.hisAdviceList.length>0){
        for(let i=0;i<this.hisAdviceList.length;i++){
            this.tableData.push(this.hisAdviceList[i])
        }
      }

      if(this.projectConfig!=undefined&&this.projectConfig.is_open == 1){
        if(this.projectList!=null && this.projectList.length>0){
          for(let i=0;i<this.projectList.length;i++){
            this.tableData.push(this.projectList[i])
          }
         }

      }

      if(this.tableData!=null && this.tableData.length>0){
            let dataInfo = {}
            this.tableData.forEach((item, index) => {
              let { patient_id } = item
              if (!dataInfo[patient_id]) {
                dataInfo[patient_id] = {
                patient_id:item.patient_id,
                child: [],
                total:0,
                count: item.count,
                advice_date:item.advice_date,
              }
             }
            })
           let newlist = Object.values(dataInfo)

            if(newlist!=null && newlist.length>0){
              for(let i=0;i<newlist.length;i++){
                for(let j=0;j<this.tableData.length;j++){
                  if(newlist[i].patient_id == this.tableData[j].patient_id){
                      newlist[i].child.push(this.tableData[j])
                  }
                }
              }
              for(let i=0;i<newlist.length;i++){
                for(let j=0;j<newlist[i].child.length;j++){
                    newlist[i].total += parseInt(newlist[i].child[j].count)
                }
              }
              this.tableData = newlist

            }


          }
      // this.dialogVisible = true
      this.showRight =true

    },
    toExecutionPatent(row){
     var patient_name = ""
     patient_name = this.getPaitenName(row.patient_id)
     this.$router.push('/details?patient_id='+row.patient_id+"&date="+row.advice_date+"&patient_name="+patient_name)
     this.showRight =false
    },
    getPaitenName(patient_id){
      var name = ""
      for(let i=0;i<this.patientList.length;i++){
         if(patient_id == this.patientList[i].id){
            name = this.patientList[i].name
         }
      }
      return name
    }
  },
  created () {
    // var index = getDialysisOrWaitSelectedConfig()
    // if (index != null) {
    this.index = this.$store.getters.user.tab_index
    // }
  },
  watch:{

  }
}
</script>

<style lang="scss" scoped>
.top_row_new {
  // height: 50px;
  font-size: 0.3rem;
  padding: 0.2rem 0.3rem;
  @media only screen and (min-width: 813px) and (max-width: 1024px) {
    padding: 0.3rem 0.3rem;
  }
  // border-bottom: 1px #e5e5e5 solid;
  // display: flex;
  // align-items: center;
  background: #258ffc;
  .floatLeftBox {
    .van-popup {
      top: 0;
      transform: translate3d(0, 0, 0);
      border-radius: 0;
    }
    .popupContent {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
    }
    .popupBox {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 40%;
      .popupBoxOne {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        font-size: 0.44rem;
        img {
          width: 1.7rem;
          height: 1.7rem;
        }
      }
    }
  }

  .floatLeft {
    height: 1rem;
    // margin-top: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 0.6rem;
    .titleName {
      font-size: 0.6rem;
    }
    .icons {
      font-size: 0.8rem;
    }
    .jiantou {
      font-size: 0.8rem;
      color: #fff;
    }
    .order {
      float: right;
      font-size: 0.45rem;
      color: #fff;
    }
  }
  .search {
    float: right;
    margin-top: 15px;
  }
}
.title {
  font-size: 0.45rem;
  font-weight: 600;
  height: 45px;
  // line-height: 50px;
  margin-left: 8px;
  // color: $title-color;
  color: #fff;
}
.newDepartment {
  text-align: center;
  // height: 100%;
  width: 60%;
  margin: 0 auto;
  ul {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      float: left;
      font-size: 0.45rem;
      margin: 0 0.2rem;
      height: 0.8rem;
      line-height: 0.8rem;
      padding: 0 0.4rem;
      // color: $title-color;
      color: #fff;
      &.active {
        // background: $main-color;
        background: #ffffff;
        color: #258ffc;
        border-radius: 30px;
      }
    }
  }
}

.add_schedule_btn {
  margin-left: 10px;
  float: right;
  background-color: #ff7978;
  border: none;
}

.redpoint {
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 26px;
  text-align: center;
  font-size: 0.8em;
  border-radius: 20px;
  color: #fff;
  background: #f56c6c;
  position: relative;
  top: -64px;
  right: 27px;
  border: 1px solid #fff;
  @media only screen and (max-width: 767px) {
    height: 16px;
    width: 16px;
    line-height: 15px;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    height: 20px;
    width: 20px;
    line-height: 20px;
    font-size: 0.36rem;
  }
}
.box {
  height: 1rem;
  margin-top: 0.26rem;
  background: #258ffc;
}
.head {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-top: 3px;
  display: inline-block;
  float: left;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.newSearch {
  height: 1rem;
  width: 100%;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  .searchBtn {
    width: 14%;
    float: right;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: 0.45rem;
    color: #258ffc;
    vertical-align: middle;
  }
}

.fixedBox {
  position: fixed;
  bottom: 0.625rem;
  left: 0.2rem;
  z-index: 5;
  img {
    width: 1.875rem;
    height: 1.875rem;
  }
}
.fixedBox2{
  position: fixed;
  bottom: 0.625rem;
  right: 0.2rem;
  z-index: 5;
  width: 100px;
  height: 100px;
  img {
    width: 1.875rem;
    height: 1.875rem;
  }
}

.beforeDialysis{
  width:100%;
  position: fixed;
  top: 2.75rem;
}
.popup{
  .text{
    display: inline-block;
    width: 40%;
    height: 30px;
    font-size: 16px;
  }
  .mainBox .van-popup {
    top: 0%;
    right: -176px;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    border-radius: 10px;
  }
}
</style>
<style lang="scss">
.newinput {
  height: 100%;
  width: 85% !important;
  float: left;
  .el-input__inner {
    height: 1rem;
    line-height: 1rem;
    width: 100%;
    border-radius: 30px;
    border: none;
    font-size: 0.45rem;
    box-sizing: border-box;
    padding-bottom: 0.05rem;
    vertical-align: middle;
    @media only screen and (min-width: 768px) {
      padding-left: 0.9rem !important;
    }
    @media only screen and (min-width: 416px) and (max-width: 767px) {
      padding-left: 1.2rem !important;
    }
  }
  .el-input__icon {
    line-height: 0.95rem;
    font-size: 0.45rem;
    margin-top: 0.02rem;
    padding-left: 0.1rem;
    @media only screen and (min-width: 768px) {
      margin-top: 1px;
      font-size: 24px;
      width: 0;
    }
    @media only screen and (min-width: 416px) and (max-width: 767px) {
      margin-top: 1px;
      font-size: 24px;
      width: 0;
    }
  }
  .el-input__prefix {
    // left:1px;
    @media only screen and (min-width: 768px) {
      // left: 10px;
    }
  }
}
</style>

<style lang="scss">
.newRecordPage{
  height: 100%;
  overflow: hidden;
  .el-loading-spinner{
    top:200px;
  }
  .van-tabs--line .van-tabs__wrap{
    height:1.46rem;
    // position: fixed;
    // top: 1.3rem;
    // right: 0;
    // left: 0;
    // z-index: 99;
  }
  .van-tabs__nav{
    background: #258ffc;

  }
  .recordPageTabs{
    // margin-top: 1rem;
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    .van-tabs__content{
      flex: 1;
      overflow: hidden;
      height: 100%;
    }
    .van-tab__pane{
      height: 100%;
    }
    .van-tabs--line .van-tabs__wrap{
      height: 1.46rem !important;
      // position: fixed;
      top: 1.3rem;
      right: 0;
      left: 0;
      z-index: 99;
    }
    .van-tabs__nav--line{
      padding-bottom: 0.5rem;
    }
    .van-tab{
      line-height: 1.46rem;
      font-size: 0.55rem;
      padding: 0 0.13rem;
      color:#fff;
    }
    .van-tabs__line{
      bottom: 0.5rem;
      height: 0.1rem;
    }
    .van-tabs__line{
      width: 47px;
      transform: translateX(47px) translateX(-50%);
      transition-duration: 0.3s;
      background-color:#fff !important;
    }
    .van-tab--active{
      font-weight: bold;
      font-size: 0.6rem;
    }
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
      border-width:0;
    }
  }
  .van-info {
    position: absolute;
    top: 0.5rem;
    right: 0;
    box-sizing: border-box;
    min-width: 0.53rem;
    padding: 0 3px;
    color: #fff;
    font-weight: 500;
    font-size: 0.4rem;
    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
    line-height: 1.2;
    text-align: center;
    background-color: #f56c6c;
    border: 1px solid #fff;
    border-radius: 16px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }


}

</style>
