<template>
    <div class="mainBox">
        <div class="choice">
          <ul>
           <el-popover
              v-model="type_options_visible"
              placement="bottom"
              trigger="click"
            >
              <li slot="reference">
                {{ type_options[type_selected].text }}
                <span class="iconfont">&#xe74a;</span>
              </li>
              <div class="popover-demo-content">
                <ul>
                  <li
                    v-for="(option, index) in type_options"
                    :key="index"
                    @click="handleTypeChange(index)"
                    :class="type_selected == index ? 'tick' : ''"
                  >
                    {{ option.text }}
                  </li>
                </ul>
              </div>
            </el-popover>
  
          
  
            <el-popover
              v-model="visible4"
              placement="bottom"
              trigger="click"
            >
              <li slot="reference">
                {{ type_optionsOne[type_selected_one].text }}
                <span class="iconfont">&#xe74a;</span>
               
              </li>
              <div class="popover-demo-content">
                <ul>
                  <li
                    v-for="(option, index) in type_optionsOne"
                    :key="index"
                    @click="handleTypeChangeOne(index)"
                    :class="type_selected_one == index ? 'tick' : ''"
                  >
                    {{ option.text }}
                  </li>
                </ul>
              </div>
            </el-popover>
  
            <el-popover v-model="visible" placement="bottom" trigger="click">
              <li slot="reference">
                {{ partitionName(partition) }}
                <span class="iconfont">&#xe74a;</span>
              </li>
              <div class="popover-demo-content">
                <ul>
                  <li
                    v-for="item in partitionArr"
                    :key="item.id"
                    @click="itemClick(item.id)"
                    :class="partition == item.id ? 'tick' : ''"
                  >{{ item.name }}</li>
                </ul>
              </div>
            </el-popover>
  
            <el-popover
              v-model="time_options_visible"
              placement="bottom"
              trigger="click"
            >
              <li slot="reference">
                {{ time_options[time_selected].text }}
                <span class="iconfont">&#xe74a;</span>
              </li>
              <div class="popover-demo-content">
                <ul>
                  <li
                    v-for="(option, index) in time_options"
                    :key="index"
                    @click="handleTimeChange(index)"
                    :class="time_selected == index ? 'tick' : ''"
                  >
                    {{ option.text }}
                  </li>
                </ul>
              </div>
            </el-popover>
  
            <li @click="openPicker" v-show="timeShow">
              {{ parseTime(date.getTime() / 1000, "{y}-{m}-{d}") }}
              <span class="iconfont">&#xe74a;</span>
            </li>
  
             <el-popover
              v-model="patient_options_visible"
              placement="bottom"
              trigger="click"
              v-show="showVisible"
              popper-class="new-popover"
            >
              <li slot="reference">
                {{ patient_options[patient_selected].name }}
                <span class="iconfont">&#xe74a;</span>
              </li>
              <div class="popover-demo-content new-demo-content">
                <ul>
                  <li
                    v-for="(option, index) in patient_options"
                    :key="index"
                    @click="patientTypeChange(index,option.id)"
                    :class="patient_selected == index ? 'tick' : ''"
                  >
                    {{ option.name }}
                  </li>
                </ul>
              </div>
            </el-popover>
          </ul>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="  " @load="onLoad">
          <div class="blueBorder"></div>
          <div class="monitoringTable"  ref="monitorScrollTop">
            <table class="table">
              <tr>
                <th width="2.2%" rowspan="2">姓名</th>
                <th width="3%" rowspan="2">上机时间</th>
                <th width="3%" :rowspan="2" v-show="showVisible">透析日期</th>
                <th width="3%" rowspan="2" v-show="timeShow">透析次数</th>
                <th width="2.2%" rowspan="2">机号</th>
                <th width="2.2%" rowspan="2">Kt/v</th>
                <th width="2.5%" rowspan="2">透析号</th>
                <th width="3%" rowspan="2">透析模式</th>
                <th width="3.5%" rowspan="2">目标超滤量</th>
                <th width="3.5%" rowspan="2">实际超滤量</th>
                <th width="4%" rowspan="2">体重(透前/透后)</th>
                <th width="3%" rowspan="2">透析时长</th>
                <th width="3.5%" rowspan="2">实际透析时长</th>
                <th width="12.5%">透中血压</th>
                <th width="12.5%">静脉压/动脉压</th>
                <th width="3%"  rowspan="2">累计血容量</th>
                <th width="12.5%">SpO₂</th>
                <th width="12.5%">病情变化</th>
                <th width="12.5%">处理</th>
              </tr>
              <tr>
                <th style="justify-content: space-between;">
                  <td style="background: #f7f7fa;" width='14%' v-for="(item, index) in labelArr" :key="index">{{ item }}</td>
                </th>
                <th style="justify-content: space-between;">
                  <td style="background: #f7f7fa;" width='14%' v-for="(item, index) in labelArr" :key="index">{{ item }}</td>
                </th>
  
                <th style="justify-content: space-between;">
                  <td style="background: #f7f7fa;" width='14%' v-for="(item, index) in labelArr" :key="index">{{ item }}</td>
                </th>
  
                <th style="justify-content: space-between;">
                  <td style="background: #f7f7fa;" width='14%' v-for="(item, index) in labelArr" :key="index">{{ item }}</td>
                </th>
  
                <th style="justify-content: space-between;">
                  <td style="background: #f7f7fa;" width='14%' v-for="(item, index) in labelArr" :key="index">{{ item }}</td>
                </th>
               
              </tr>
             
            </table>
  
            <table class="table" v-for="(items, index) in dialysis_scheduals" :key="index">
              <tr v-if="items.zone_name.length > 0" >
                <td width="2.2%">{{ items.zone_name }}</td>
                <td width="3%" v-show="timeShow"></td>
                <td width="3%" v-show="showVisible"></td>
                <td width="3%"></td>
                <td width="2.2%"></td>
                <td width="2.2%"></td>
                <td width="2.5%"></td>
                <td width="3%"></td>
                <td width="3.5%"></td>
                <td width="3.5%"></td>
                <td width="4%"></td>
                <td width="3%"></td>
                <td width="3.5%"></td>
                <td width="12.5%"></td>
                <td width="12.5%"></td>
                <td width="3%"></td>
                <td width="12.5%"></td>
                <th width="12.5%"></th>
                <th width="12.5%"></th>
              </tr>
              <tr v-for="(item, index) in items.scheduals" :key="index" @click="clickfunction(item)">
                <td width="2.2%" style="color:#409eff;">{{ item.patient.name }}</td>
                <td width="3%" style="color:#409eff;">
                   <span v-if="item.dialysis_order!=null">{{ parseTime(item.dialysis_order.start_time, "{h}:{i}") }}</span>
                </td>
                <th width="3%" style="color:#409eff" v-show="showVisible">{{parseTime(item.schedule_date, "{y}-{m}-{d}")}}</th>
                <td width="3%" style="color:#409eff" v-show="timeShow">
                  <!-- <span v-if="$store.getters.user.template_info.org_id != 10101 && $store.getters.user.template_info.org_id != 10445 && $store.getters.user.template_info.org_id != 3877">
                     {{item.patient.user_sys_before_count + getCountPatent(item.patient.id)}}
                  </span>
                  <span v-if="$store.getters.user.template_info.org_id == 10101 || $store.getters.user.template_info.org_id == 10445 || $store.getters.user.template_info.org_id == 3877">
                     <span v-if="item.dialysis_order!=null && item.dialysis_order.dialysis_date<=1672416000">{{item.patient.user_sys_before_count + getCountPatent(item.patient.id)}}</span>
                     <span v-if="item.dialysis_order!=null && item.dialysis_order.dialysis_date>=1672502400">{{item.dialysis_order.dialysis_total}}</span>
                  </span> -->
                  <span v-if="item.dialysis_order!=null">{{ item.dialysis_order.dialysis_total }}</span>
                </td>
                <td width="2.2%">
                  <span v-if="item.dialysis_order!=null"> {{item.dialysis_order.device_number.number.length > 0? item.dialysis_order.device_number.number: item.device_number.number}} </span>

                </td>
                <td width="2.2%">
                  <span>{{getStr(item.monitoring_record )}} </span>
                </td>
                <td width="2.5%">{{ item.patient.dialysis_no }}</td>
                <td width="3%">
                 <span v-if="item.treatment_mode!=null">
                 <span :class="modeColor(item.treatment_mode.name)">
                   <span v-if="item.treatment_mode!=null">{{ item.treatment_mode.name }}</span>
                  </span>
                </span>
                </td>
                <td width="3.5%">
                   <span v-if="item.prescription!=null">{{item.prescription.target_ultrafiltration? item.prescription.target_ultrafiltration: ""}} </span>
                </td>
                <td width="3.5%">
                   <span v-if="item.assessment_after_dislysis!=null">{{item.assessment_after_dislysis.actual_ultrafiltration? item.assessment_after_dislysis.actual_ultrafiltration: ""}} </span>
                </td>
                <td width="4%">
                  <span v-if="item.assessment_before_dislysis!=null">{{item.assessment_before_dislysis.weight_before? item.assessment_before_dislysis.weight_before: ""}}</span> /
                 <span v-if="item.assessment_after_dislysis!=null">{{item.assessment_after_dislysis.weight_after? item.assessment_after_dislysis.weight_after: ""}}</span>
                </td>
                <td width="3%">
                  <span v-if="item.prescription!=null">
                    <span v-if="item.prescription.dialysis_duration_hour >0">{{item.prescription.dialysis_duration_hour}} h</span>
                    <span v-if="item.prescription.dialysis_duration_minute >0">{{item.prescription.dialysis_duration_minute}}min</span>
                  </span>
                </td>
                <td width="3.5%">
                  <span v-if="item.assessment_after_dislysis!=null">
                    <span v-if="item.assessment_after_dislysis.actual_treatment_hour >0">{{item.assessment_after_dislysis.actual_treatment_hour}} h</span>
                    <span v-if="item.assessment_after_dislysis.actual_treatment_minute >0">{{item.assessment_after_dislysis.actual_treatment_minute}}min</span>
                  </span>
  
                </td>
                <td width="12.5%">
                
                  <span v-if='item.monitoring_record!=null&&item.monitoring_record.length > 0 && item.monitoring_record.length <= 7' style="display: flex;justify-content: space-between;">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record" :key='newindex'>
                      <!-- <span :class="isRangeInSBP(i.systolic_blood_pressure.toString())">
                      {{ i.systolic_blood_pressure.toString() }}</span>
                      /<span :class="isRangeInDBP(i.diastolic_blood_pressure.toString())">
                        {{ i.diastolic_blood_pressure.toString() }}
                      </span>&nbsp; -->
                      <span v-if="$store.getters.user.template_info.org_id != 10693">
                     <span :class="isRangeInSBP(i.systolic_blood_pressure.toString())">{{ i.systolic_blood_pressure.toString() }}</span>/<span :class="isRangeInDBP(i.diastolic_blood_pressure.toString())">{{ i.diastolic_blood_pressure.toString() }}</span>&nbsp;
                     <!-- <span :class="isRangeInSBP(i.systolic_blood_pressure.toString())">{{ i.systolic_blood_pressure.toString() }}</span>/<span :class="isRangeInDBP(i.diastolic_blood_pressure.toString())">{{ i.diastolic_blood_pressure.toString() }}</span>&nbsp; -->
                    </span> 
                    <span v-if="$store.getters.user.template_info.org_id == 10693">
                      <span :class="isRangeInSBP(i.monitor_systolic_blood_pressure_one.toString())">{{ i.monitor_systolic_blood_pressure_one.toString() }}</span>/<span :class="isRangeInDBP(i.monitor_diastolic_blood_pressure_one.toString())">{{ i.monitor_diastolic_blood_pressure_one.toString() }}</span>&nbsp;
                      <!-- <span :class="isRangeInSBP(i.monitor_systolic_blood_pressure_one.toString())">{{ i.monitor_systolic_blood_pressure_one.toString() }}</span>/<span :class="isRangeInDBP(i.monitor_diastolic_blood_pressure_one.toString())">{{ i.monitor_diastolic_blood_pressure_one.toString() }}</span>&nbsp; -->
                    </span> 
                      
                    </td>
                    <td width='16%' v-for="(i,newindex) in 7 - item.monitoring_record.length" :key="newindex + 'i'"></td>
                  </span>
                  <span v-else style="display: flex;justify-content: space-between;">
                   <span v-if="item.monitoring_record!=null">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record.slice(0,7)" :key='newindex'>
                      <!-- <span :class="isRangeInSBP(i.systolic_blood_pressure.toString())">{{ i.systolic_blood_pressure.toString() }}</span>
                      /<span :class="isRangeInDBP(i.diastolic_blood_pressure.toString())">{{ i.diastolic_blood_pressure.toString() }}
                      </span>&nbsp; -->
                      <span  v-if="$store.getters.user.template_info.org_id != 10693"> 
                       <span :class="isRangeInSBP(i.systolic_blood_pressure.toString())">{{ i.systolic_blood_pressure.toString() }}</span>
                      /<span :class="isRangeInDBP(i.diastolic_blood_pressure.toString())">{{ i.diastolic_blood_pressure.toString() }}
                      </span>&nbsp;
                    </span>

                      <span  v-if="$store.getters.user.template_info.org_id == 10693">  
                        <span :class="isRangeInSBP(i.monitor_systolic_blood_pressure_one.toString())">{{ i.monitor_systolic_blood_pressure_one.toString() }}</span>
                        /<span :class="isRangeInDBP(i.monitor_diastolic_blood_pressure_one.toString())">{{ i.monitor_diastolic_blood_pressure_one.toString() }}
                        </span>&nbsp;
                  </span>
                    </td>
                   </span>
                  </span>
                </td>
                <td width="12.5%">
                  <span v-if='item.monitoring_record!=null&&item.monitoring_record.length > 0 && item.monitoring_record.length <= 7' style="display: flex;justify-content: space-between;">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record" :key='newindex'>
                      <!-- <span>
                      {{ i.venous_pressure.toString() }}</span>
                      /<span>
                        {{ i.arterial_pressure.toString() }}
                      </span>&nbsp; -->
                      <span v-if="$store.getters.user.template_info.org_id != 10693">{{ i.venous_pressure.toString() }}</span>/<span>{{ i.arterial_pressure.toString() }}</span>&nbsp;
                    <span v-if="$store.getters.user.template_info.org_id == 10693">{{ i.venous_pressure_one.toString() }}</span>/<span>{{ i.arterial_pressure_one.toString() }}</span>&nbsp;
                    <!-- <span v-if="$store.getters.user.template_info.org_id != 10693"><span>{{ i.venous_pressure.toString() }}</span>/<span>{{ i.arterial_pressure.toString() }}</span>&nbsp;</span> 
                    <span v-if="$store.getters.user.template_info.org_id == 10693"><span>{{ i.venous_pressure_one.toString() }}</span>/<span>{{ i.arterial_pressure_one.toString() }}</span>&nbsp;</span>  -->
                     
                    </td>
                    <td width='16%' v-for="(i,newindex) in 7 - item.monitoring_record.length" :key="newindex + 'i'"></td>
                  </span>
                  <span v-else style="display: flex;justify-content: space-between;">
                   <span v-if="item.monitoring_record!=null">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record.slice(0,7)" :key='newindex'>
                      <!-- <span>{{ i.venous_pressure.toString() }}</span>
                      /<span>{{ i.arterial_pressure.toString() }}
                      </span>&nbsp; -->
                      <!-- <span v-if="$store.getters.user.template_info.org_id != 10693"> <span>{{ i.venous_pressure.toString() }}</span></span> 
                      <span v-if="$store.getters.user.template_info.org_id  == 10693"> <span>{{ i.venous_pressure_one.toString() }}</span></span>  -->
                        <span v-if="$store.getters.user.template_info.org_id != 10693">/<span>{{ i.arterial_pressure.toString() }}  </span>&nbsp;</span> 
                        <span v-if="$store.getters.user.template_info.org_id == 10693">/<span>{{ i.arterial_pressure_one.toString() }}  </span>&nbsp;</span> 
                      
                    </td>
                   </span>
                  </span>
                </td>
                <td width="3%">
                  <span v-if="item.monitoring_record!=null">
                    {{ item.monitoring_record[item.monitoring_record.length - 1].accumulated_blood_volume.toString() }}
                  </span>
                </td>
                 <td width="12.5%">
                  <span v-if='item.monitoring_record!=null&&item.monitoring_record.length > 0 && item.monitoring_record.length <= 7' style="display: flex;justify-content: space-between;">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record" :key='newindex'>
                      <!-- <span v-if="i.blood_oxygen_saturation > 0"> -->
                      <!-- {{ i.blood_oxygen_saturation.toString() }}</span> -->
                      <span v-if="i.blood_oxygen_saturation > 0 &&$store.getters.user.template_info.org_id != 10693">
                    {{ i.blood_oxygen_saturation.toString() }}
                  </span>

                  <span v-if="i.blood_oxygen_saturation_one > 0 &&$store.getters.user.template_info.org_id == 10693">
                    {{ i.blood_oxygen_saturation_one.toString() }}
                  </span>
                      
                     
                    </td>
                    <td width='16%' v-for="(i,newindex) in 7 - item.monitoring_record.length" :key="newindex + 'i'"></td>
                  </span>
                  <span v-else style="display: flex;justify-content: space-between;">
                   <span v-if="item.monitoring_record!=null">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record.slice(0,7)" :key='newindex'>
                      <!-- <span v-if="i.blood_oxygen_saturation > 0">{{ i.blood_oxygen_saturation.toString() }}</span> -->
                      <span v-if="i.blood_oxygen_saturation > 0 &&$store.getters.user.template_info.org_id != 10693">{{ i.blood_oxygen_saturation.toString() }}</span>
                      <span v-if="i.blood_oxygen_saturation_one > 0 &&$store.getters.user.template_info.org_id == 10693">{{ i.blood_oxygen_saturation_one.toString() }}</span>
                    </td>
                   </span>
                  </span>
                </td>
                <td width="12.5%">
                  <span v-if='item.monitoring_record!=null&&item.monitoring_record.length > 0 && item.monitoring_record.length <= 7' style="display: flex;justify-content: space-between;">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record" :key='newindex'>
                      <span>
                      {{ i.symptom.toString() }}</span>
                     
                    </td>
                    <td width='16%' v-for="(i,newindex) in 7 - item.monitoring_record.length" :key="newindex + 'i'"></td>
                  </span>
                  <span v-else style="display: flex;justify-content: space-between;">
                   <span v-if="item.monitoring_record!=null">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record.slice(0,7)" :key='newindex'>
                      <span v-if="i.symptom > 0">{{ i.symptom.toString() }}</span>
                    </td>
                   </span>
                  </span>
                </td>
                <td width="12.5%">
                  <span v-if='item.monitoring_record!=null&&item.monitoring_record.length > 0 && item.monitoring_record.length <= 7' style="display: flex;justify-content: space-between;">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record" :key='newindex'>
                      <span>
                      {{ i.dispose.toString() }}</span>
                     
                    </td>
                    <td width='16%' v-for="(i,newindex) in 7 - item.monitoring_record.length" :key="newindex + 'i'"></td>
                  </span>
                  <span v-else style="display: flex;justify-content: space-between;">
                   <span v-if="item.monitoring_record!=null">
                    <td width='16%' v-for="(i,newindex) in item.monitoring_record.slice(0,7)" :key='newindex'>
                      <span v-if="i.dispose > 0">{{ i.dispose.toString() }}</span>
                    </td>
                   </span>
                  </span>
                </td>
              </tr>
            </table>
  
            <div class="NoData" v-show="dialysis_scheduals.length == 0">
              <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
            </div>
          </div>
        </van-list>
       
      <mt-datetime-picker
        ref="date_picker"
        type="date"
        @confirm="handleDateConfirm"
        :endDate="new Date()"
        v-model="date"
      ></mt-datetime-picker>
    </div>
  </template>
  
  <script>
  import SideBar from '@/pages/layout/SideBar'
  import Divider from 'vux/src/components/divider/index'
  import {  GetAllZone, getPatientMonitors,getControlMonitorList } from '@/api/monitor'
  import { parseTime } from '@/utils'
  import { Toast } from 'vant'
  import { Console } from 'console'
  
  export default {
    name: 'ControlIndex',
    props: {
      search_keyword: {
        type: String
      }
    },
    created () {
      if (sessionStorage.getItem('monitoringPartition') != null) {
        this.partition = Number(sessionStorage.getItem('monitoringPartition'))
      }
      if (sessionStorage.getItem('monitoringTime') != null) {
        this.time_selected = Number(sessionStorage.getItem('monitoringTime'))
      }
      this.queryParams.date = this.parseTime(new Date().getTime() / 1000, '{y}-{m}-{d}'
      )
      this.queryParams.partition = this.partition
      this.queryParams.patient_id = this.patient_id
  
      this.getMonitor(this.queryParams)
  
      this.GetAllZone()
    },
    data () {
      return {
        loading: false,
        finished: false,
  
        dialysis_scheduals: [],
        zones: [],
        visible: false,
        partitionArr: [],
        date: new Date(),
        partition: 0,
        queryParams: {
          date: new Date(),
          partition: '',
          patient_id: '',
          pat_type:0,
        },
        patient_keyword: '',
        search_page: 1,
  
        //
        time_options: [
          { value: 0, text: '全部班' },
          { value: 1, text: '上午' },
          { value: 2, text: '下午' },
          { value: 3, text: '晚上' }
        ],
        time_options_visible: false,
        time_selected: 0,
        patient_selected: 0,
        type_selected: 0,
        type_selected_one:0,
        patient_options_visible: false,
        labelArr: ['第1次', '第2次', '第3次', '第4次', '第5次', '第6次', '第7次'],
        patientCount: [],
        type_options: [
          {vlaue: 0, text: '日期查询'},
          {value: 1, text: '病人查询'}
        ],
        type_optionsOne: [
            { value: 0, text:'全部'},
            { value: 1, text: '待医嘱核对', select: false },
            { value: 2, text: '待开小结', select: false },
            { value: 3, text: '待下机', select: false },
            { value: 4, text: '待消毒', select: false },
            { value: 5, text: '待双人核对', select: false },
            { value: 6, text: '医嘱未执行', select: false },
            { value: 7, text: '患者未签名', select: false },
            { vlaue: 8, text: '目标超滤于实际超滤不同',select:false},
            { value: 9, text: '血压少于5次',select:false},
            { value: 10, text: '累计血容量为零',select:false},
            { value: 11, text: '有病情变化',select:false},
            { value: 12, text: '有换药',select:false},
            { value: 13, text: '超滤量少于4次',select:false},
        ],
        type_options_visible: false,
        visible3:false,
        visible4:false,
        patient_options: [{id: 0, name: '全部'}],
        showVisible: false,
        timeShow: true,
        patient_id: ''
      }
    },
    mounted: function () {
      this.addEventListener()
    },
    methods: {
      addEventListener () {
        window.addEventListener('scroll', this.handleScroll, true)
      },
      removeEventListener () {
        window.removeEventListener('scroll', this.handleScroll, true)
      },
      handleScroll () {
        this.$nextTick(() => {
          if (this.$refs.monitorScrollTop) {
            let monitorScrollTop = this.$refs.monitorScrollTop.scrollTop
            if (monitorScrollTop > 0) {
              this.$store.dispatch('SetMonitorScrollTop', monitorScrollTop)
            }
          }
        })
      },
      clickfunction: function (val) {
        this.$router.push({
          path: '/details',
          query: {
            patient_id: val.patient_id,
            date: val.schedule_date,
            patient_name: val.patient.name
          }
        })
      },
      getMonitor: function (queryParams) {
        this.search_page = 1
        this.patient_keyword = ''
  
        this.loading = true
        this.finished = false
        this.dialysis_scheduals = []
        console.log("queryparaswww",queryParams)
        getControlMonitorList(queryParams).then(response => {
          this.loading = false
          this.finished = true
          if (response.data.state == 0) {
            return false
          } else {
            var scheduals = response.data.data.monitor
           
            var patients = response.data.data.patients
  
            this.patient_options.push(...patients)
            
            var zoneMap = {}
            var schedualMap = {}
  
            for (let index = 0; index < scheduals.length; index++) {
              const schedual = scheduals[index]
              if (schedualMap[schedual.device_zone.name] == null) {
                schedualMap[schedual.device_zone.name] = []
              }
              schedualMap[schedual.device_zone.name].push(schedual)
              if (zoneMap[schedual.device_zone.name] == null) {
                zoneMap[schedual.device_zone.name] = schedual.device_zone
              }
            }
  
            var zones = []
            zones.push({ value: 0, text: '全部分区' })
            for (var zoneName in zoneMap) {
              zones.push({ value: zoneMap[zoneName].id, text: zoneName })
            }
            zones = zones.sort(function (a, b) {
              return a.value > b.value
            })
            this.zones = zones
  
            var dialysis_scheduals = []
            for (let index = 0; index < zones.length; index++) {
              const zone = zones[index]
              var scheduals = schedualMap[zone.text]
              if (scheduals == null) {
                continue
              }
              dialysis_scheduals.push({
                zone_name: zone.text,
                scheduals: scheduals
              })
            }
            let patientArr = dialysis_scheduals
            let arr1 = []
            if (this.time_selected == 0) {
              arr1 = JSON.parse(JSON.stringify(patientArr))
            } else {
              let arr = JSON.parse(JSON.stringify(patientArr))
           
              for (let i = 0; i < arr.length; i++) {
                for (let j = 0; j < arr[i].scheduals.length; j++) {
                  if (this.time_selected != arr[i].scheduals[j].schedule_type) {
                    // 删除元素后改变i的值
                    arr[i].scheduals.splice(j--, 1)
                  }
                }
              }
              arr1 = arr
            }

            // for(let i=0;i<arr1.length;i++){
            //   for(let j=0;j<arr1[i].scheduals.length;j++){
            //     console.log("hhhahhahahwoow",arr1[i].scheduals[j])
            //     for(let z=0;z<arr1[i].scheduals[j].monitoring_record.length;z++){
            //        arr1[i].scheduals[j].ktv_str = ""
            //        for(let s=0;s< arr1[i].scheduals[j].monitoring_record.length;s++){
            //         if( arr1[i].scheduals[j].monitoring_record[s].ktv > 0){
            //           arr1[i].scheduals[j].ktv_str +=  arr1[i].scheduals[j].monitoring_record[s].ktv
            //         }
            //       }
            //     }
            //   }
             
            // }
  
            this.dialysis_scheduals = arr1
            console.log('透析监测数据', arr1)
            this.$nextTick(() => {
              if (this.$refs.monitorScrollTop) {
                this.$refs.monitorScrollTop.scrollTop = this.$store.getters.monitorScrollTop
              }
            })
          }
        })
      },
      parseTime (time, layout) {
        return parseTime(time, layout)
      },
      openPicker: function () {
        this.$refs.date_picker.open()
      },
      handleDateConfirm: function (val) {
        this.queryParams.date = this.parseTime(this.date / 1000, '{y}-{m}-{d}')
        this.queryParams.partition = this.partition
        this.queryParams.patient_id = this.patient_id
        this.getMonitor(this.queryParams)
      },
      partitionName: function (val) {
        for (let i = 0; i < this.partitionArr.length; i++) {
          if (this.partitionArr[i].id == val) {
            return this.partitionArr[i].name
          }
        }
      },
      GetAllZone: function () {
        GetAllZone().then(response => {
          if (response.data.state == 0) {
            return false
          } else {
            this.partitionArr = response.data.data.zone
            this.partitionArr.unshift({ id: 0, name: '全部分区' })
          }
        })
      },
      itemClick: function (id) {
        this.partition = id
        this.visible = false
        sessionStorage.setItem('monitoringPartition', id)
        this.queryParams.date = this.parseTime(this.date / 1000, '{y}-{m}-{d}')
        this.queryParams.partition = this.partition
        this.queryParams.patient_id = this.patient_id
        this.getMonitor(this.queryParams)
      },
      monitorBloodPressureStatus: function (val) {
        let status = 0
        if (val.length == 0) {
          return 0
        }
        for (let i = 0; i < val.length; i++) {
          // 舒张压（低压）(diastolic_blood_pressure)    收缩压(高压)(systolic_blood_pressure)
          if (
            val[i].systolic_blood_pressure >= 140 ||
            val[i].diastolic_blood_pressure >= 90
          ) {
            status = 3 // 高压
          } else if (
            val[i].diastolic_blood_pressure < 60 ||
            val[i].systolic_blood_pressure < 90
          ) {
            status = 1 // 低压
          } else if (
            val[i].diastolic_blood_pressure >= 60 ||
            val[i].systolic_blood_pressure < 140
          ) {
            status = 2 // 正常
          }
  
        }
  
        return status
      },
      monitorRateStatus: function (val) {
        let status = 0
        if (val.length == 0) {
          return 0
        }
        for (let i = 0; i < val.length; i++) {
          // 舒张压（低压）(diastolic_blood_pressure)    收缩压(高压)(systolic_blood_pressure)
          if (val[i].pulse_frequency < 60) {
            status = 1 // 心率过缓
          } else if (
            val[i].pulse_frequency >= 60 &&
            val[i].pulse_frequency < 100
          ) {
            status = 2 // 心率正常
          } else if (val[i].pulse_frequency >= 100) {
            status = 3 // 心率过快
          }
        }
        return status
      },
      searchWithKeyword: function (page, search_keyword) {
        // this.$refs.search_field.blur();
        this.patient_keyword = search_keyword
        if (search_keyword.length == 0) {
          this.queryParams.date = this.parseTime(this.date / 1000, '{y}-{m}-{d}')
          this.queryParams.partition = this.partition
          this.queryParams.patient_id = this.patient_id
          this.getMonitor(this.queryParams)
          return
        }
  
        this.partition = 0
  
        this.search_page = page
        if (page == 1) {
          this.dialysis_scheduals = []
        }
        this.loading = true
        this.finished = false
        getPatientMonitors({
          keyword: this.patient_keyword,
          page: this.search_page
        }).then(rs => {
          this.loading = false
          this.finished = true
          var resp = rs.data
          if (resp.state == 1) {
            if (resp.data.monitor.length > 0) {
              this.dialysis_scheduals.push({
                zone_name: '',
                scheduals: resp.data.monitor
              })
              this.finished = false
            } else {
              this.finished = true
            }
          }
        })
      },
      onLoad: function () {
        this.searchWithKeyword(this.search_page + 1, this.patient_keyword)
      },
      handleTimeChange: function (index) {
        this.time_selected = index
        this.time_options_visible = false
        sessionStorage.setItem('monitoringTime', index)
        this.queryParams.date = this.parseTime(this.date / 1000, '{y}-{m}-{d}')
        this.queryParams.partition = this.partition
        this.queryParams.patient_id = this.patient_id
        this.getMonitor(this.queryParams)
      },
      handleTypeChange: function (index) {
        if (index == 0) {
          this.timeShow = true
          this.showVisible = false
          this.type_selected = index
          this.type_options_visible = false
        }
  
        if (index == 1) {
          this.timeShow = false
          this.showVisible = true
          this.type_selected = index
          this.type_options_visible = false
        }
      },
      handleTypeChangeOne(val){
        
        this.type_selected_one = val
        this.visible4 = false
        this.queryParams.pat_type = val
        this.getMonitor(this.queryParams)
     
      },
      patientTypeChange: function (index, patient_id) {
        this.patient_selected = index
        this.patient_options_visible = false
  
        this.queryParams.date = this.parseTime(this.date / 1000, '{y}-{m}-{d}')
        this.queryParams.partition = this.partition
        this.queryParams.patient_id = patient_id
        this.getMonitor(this.queryParams)
      },
      modeColor (name) {
        if (name == 'HD') {
  
        } else if (name == 'HDF') {
          return 'modeRed'
        } else if (name == 'HD+HP') {
          return 'modePurple'
        }
      },
      getCountPatent (id) {
        var count = 0
        for (let i = 0; i < this.patientCount.length; i++) {
          if (id == this.patientCount[i].patient_id) {
            count = this.patientCount[i].Count
          }
        }
        return count
      },
      isRangeInSBP (str) {
        var num = parseFloat(str)
        if (num <= 140 && num >= 90) {
          return ''
        }
        return 'redFont'
      },
      isRangeInDBP (str) {
        var num = parseFloat(str)
        if (num <= 90 && num >= 60) {
          return ''
        }
        return 'redFont'
      },
      getStr(arr){
        var str = ""
        if(arr!=null && arr.length>0){
          for(let i=0;i<arr.length;i++){
             if(arr[i].ktv>0){
                str+=arr[i].ktv
             }
          }
        }
        return str
       
      }
    },
    components: {
      Divider,
      SideBar
    },
    watch: {
      search_keyword: {
        handler (newVal) {
          this.patient_keyword = newVal
        },
        deep: true
      }
  
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .mainBox {
    height: 100%;
  }
  .top {
    padding: 0 0.3rem 0.3rem;
    @include text-align;
    font-size: 0.36rem;
    /*border-bottom: 1px #e5e5e5 solid;*/
    position: relative;
    color: $title-color;
    // @include display-flex;
    // @include align-items-center;
    // @include justify-content-between;
    background: #258ffc;
    .title {
      font-size: 0.3rem;
      font-weight: bold;
      color: $pgh-color;
    }
    .iconfont {
      font-size: 0.4rem;
      color: #a8b3ba;
      @media only screen and (max-width: 812px) {
        margin-right: 0 !important;
      }
    }
  }
  .floatLeft {
    height: 1rem;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 0.6rem;
    .titleName {
      font-size: 0.6rem;
    }
    .icons {
      font-size: 0.8rem;
    }
    .jiantou {
      font-size: 0.8rem;
      color: #fff;
      padding-right: 4rem;
    }
  }
  .choice {
    border-bottom: 1px #e5e5e5 solid;
    width: 100%;
    // position: fixed;
    // top: 86px;
    // right: 0;
    // z-index: 66;
    // left: 0;
    // background: #258ffc;
    background:#fff;
    /*@media only screen and (max-width: 415px) {*/
    /*top: 38px !important;*/
    /*}*/
    /*@media only screen and (min-width: 813px) and (max-width: 1024px) {*/
    /*top: 38px !important;*/
    /*}*/
    // @media only screen and (min-width: 768px) {
    //   top: 143px !important;
    // }
    // @media only screen and (min-width: 415px) and (max-width: 767px) {
    //   top: 114px;
    // }
    ul {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      width: 90%;
      margin: 0 auto;
      font-size: 0.43rem;
      /*// color: $pgh-color;*/
      color: #fff;
      li {
        @include display-flex;
        @include align-items-center;
        @include text-align;
        @include justify-content-between;
        padding: 0.3rem 0;
        color:#000;
        .iconfont {
          margin: 0 0.1rem;
          color: #a8b3ba;
        }
        .line {
          background: #a8b3ba;
          width: 0.2rem;
          height: 1px;
          margin: 0 0.2rem;
          display: inline-block;
        }
      }
    }
  }
  .table {
    width: 2600px;
    @media only screen and (min-width: 768px) {
      // width: 1600px;
      width: 3200px;
    }
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      // width: 1200px;
      width: 2800px;
    }
  }
  .van-list {
    height: 100%;
    // padding-top: 40px;
    background: #fff;
    display: flex;
    flex-direction: column;
    // min-height: calc(100vh - 1px);
    padding-bottom: 80px;
    @media only screen and (min-width: 376px) and (max-width: 414px) {
      // padding-top: 50px !important;
    }
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      padding-bottom: 112px;
    }
    @media only screen and (min-width: 768px) {
      padding-bottom: 140px;
    }
    .monitoringTable{
      flex: 1;
      overflow-y: auto;
      height: 100%;
  
    }
  }
  .mainBox {
    height: 100%;
    display: flex;
    flex-direction: column;
    // overflow: auto;
    // -webkit-overflow-scrolling: touch;
  }
  </style>
  <style lang="scss">
  .newSearch1 {
    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;
    }
    .el-input {
      height: 100%;
      width: 85% !important;
      float: left;
    }
    .el-input__inner {
      height: 100%;
      line-height: 1rem;
      width: 100%;
      border-radius: 30px;
      border: none;
      font-size: 0.45rem;
      vertical-align: middle;
      @media only screen and (min-width: 768px) {
        padding-left: 0.9rem;
      }
    }
    .el-input__icon {
      line-height: 1rem;
      font-size: 0.45rem;
      margin-top: 0.02rem;
      padding-left: 0.1rem;
    }
    .el-input__prefix {
      @media only screen and (min-width: 768px) {
        left: 10px;
      }
    }
  }
  
  .monitoringTable {
    width: 100%;
    /*// .el-table {*/
    /*//   width: 99.9% !important;*/
    /*// }*/
    /*// .newTable {*/
    /*//   margin-top: 80px;*/
    /*//   @media only screen and (min-width: 768px) {*/
    /*//     margin-top: 140px !important;*/
    /*//   }*/
    /*// }*/
    /*// .el-table td {*/
    /*//   padding: 0;*/
    /*// }*/
    /*// .el-table th {*/
    /*//   padding: 6px 0;*/
    /*// }*/
    .table tr th{
      background:#f7f7fa;
      color:#000;
      font-weight:bold;
      td span{
        display: inline-block;
      }
    }
    .table tr td{
      background:#f7f7fa;
      td span{
        display: inline-block;
      }
    }
    td span{
      display: inline-block;
    }
  }
  .modeRed{
    color:#ed5555;
  }
  .modePurple{
    color: #53b86e;
  }
  .new-demo-content{
    max-height:96%;
    overflow-y: auto;
  }
  .new-popover{
    height:100%;
  }
  .redFont{
    color: red;
  }
  
  </style>
  