<template>
  <div class="inspection">
    <div class="doctorAdviceTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="toReturn"></i>
      <div class="patientName" >
        {{ patientName }}的检验检查
        <!-- {{ patientName }} -->
        <!-- <van-icon name="arrow-down" /> -->
      </div>
      <p ></p>
    </div>
    <div style="margin-left: 10px;">
      <el-select v-model="value" placeholder="请选择" @change="changeoption" class="elselect">
        <el-option
          v-for="item in options"
          :key="item.project_id"
          :label="item.name"
          :value="item.project_id">
        </el-option>
      </el-select>
    </div>

    <div class="el_table">
      <el-table
        :data="tableData" border
        style="width: 100%"
        stripe
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        >
        <el-table-column
          :fixed="true"
          prop="inspect_date"
          label="检验日期"
          width="150">
         <template slot-scope="scope">
          {{ getTime(scope.row.inspect_date) }}
         </template>
        </el-table-column>
        <el-table-column
          v-for="(item,index) in columns" :key="index"
          :prop="item.item_id"
          :label="item.item_name"
          width="150">
         <template slot-scope="scope" >
          <span v-if="item.range_type == 3">
            {{ getItemValueOne(scope.row.inspect_date,item.item_name) }}
          </span>

          <span v-if="item.range_type == 2">
            <span v-if="getItemValue(scope.row.inspect_date,item.item_name)=='阳性'" style="color: red"> {{ getItemValue(scope.row.inspect_date,item.item_name) }}</span>
            <span v-else> {{ getItemValue(scope.row.inspect_date,item.item_name) }}</span>
          </span>

          <span v-if="item.range_type == 1">
             <span v-if="getItemValue(scope.row.inspect_date,item.item_name).indexOf('>') ==-1">
              <span v-if="parseFloat(getItemValue(scope.row.inspect_date,item.item_name)) < parseFloat(item.range_min) ">
              {{ getItemValue(scope.row.inspect_date,item.item_name) }} <span style="color: blue;" v-if="getItemValue(scope.row.inspect_date,item.item_name)>0">↓</span>
             </span>
             <span v-if="parseFloat(item.range_min)<= parseFloat( getItemValue(scope.row.inspect_date,item.item_name)) && parseFloat(getItemValue(scope.row.inspect_date,item.item_name))<= parseFloat(item.range_max) ">
               {{ getItemValue(scope.row.inspect_date,item.item_name) }}
             </span>
             <span v-if="parseFloat(item.range_min) =='' || parseFloat(item.range_max) == '' ">
               {{ getItemValue(scope.row.inspect_date,item.item_name) }}
             </span>
             <span v-if="parseFloat(getItemValue(scope.row.inspect_date,item.item_name)) >parseFloat(item.range_max) ">
              {{ getItemValue(scope.row.inspect_date,item.item_name) }} <span style="color: red;" v-if="getItemValue(scope.row.inspect_date,item.item_name)>0">↑</span>
             </span>
             <span v-if ="item.range_max ==''||item.range_min ==''">
              {{ getItemValue(scope.row.inspect_date,item.item_name) }}
             </span>
            </span>
           

            <span v-if="getItemValue(scope.row.inspect_date,item.item_name).indexOf('>') !=-1">
              {{ getItemValue(scope.row.inspect_date,item.item_name) }} 
            </span>
            
          </span>

         </template>
        </el-table-column>
        <!-- <el-table-column v-for="(item,index) in columns" :key="index"
          :prop="item.prop"
          :label="item.label"
          width="">
          <template slot-scope="scope">
            <div >
              {{ getname(scope.row.prop) }}
              {{ scope.row.prop }}
            </div>

          </template>
        </el-table-column> -->

      </el-table>
    </div>

    <div class="checkBox1" @click="goCheck" ref="moveBtn2" >
      <img src="../../../assets/images/his5.png" @mousedown="down" @touchstart="down"
      @mousemove="move"
      @touchmove="move"
      @mouseup="end"
      @touchend="end"
      @touchcancel="end"
      alt="">
    </div>
    <!--   -->
  </div>
</template>

<script>
import {getinspectiongroupdetails} from '@/api/patient/patient'
import { uParseTime } from '@/utils/tools'
import { Dialog } from 'vant'
const moment = require('moment')
export default {
  props: {
    active: Number,
    // patientName:String
  },
  data () {
    return {
      loading: false,
      finished: false,
      newShow: false,
      newShowOne: false,
      typeShow: false,
      startShow: false,
      endShow: false,
      type: '全部',
      columns: [],
      startTime: '请选择',
      endTime: '请选择',
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      actions: [{ name: '查看全部' }, { name: '全部删除' }],
      actions1: [{ name: '删除' }],
      showOne: true,
      showTwo: false,
      list: [],
      page: 1,
      limit: 10,
      total: 0,
      Inspection: [],
      project_id: 0,
      patientid: 0,
      checkdata: [],
      date: 0,
      index: 0,
      name: '',
      date: '',
      index: '',
      restatus: 0,

      tableData:[],
      value:'',
      options:[],
      patientName:'',
      row:{},
      columns:[],
      moveBtn: {},
      position: {
        x: 0,
        y: 0
      },
      nx: '',
      ny: '',
      dx: '',
      dy: '',
      xPum: '',
      yPum: '',

      blood_id:0,
      route_date:0,
      patient_name:'',
      datable:[],
    }
  },
  mounted(){
    this.moveBtn = this.$refs.moveBtn2
    if (sessionStorage.getItem('checkBtnTop1')) {
      this.moveBtn.style.top = sessionStorage.getItem('checkBtnTop1')
      this.moveBtn.style.bottom = 'initial'
    }
    if (sessionStorage.getItem('checkBtnLeft1')) {
      this.moveBtn.style.left = sessionStorage.getItem('checkBtnLeft1')
    }
    window.addEventListener('scroll', this.handleScroll)
    // this.appSource()
    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: {
    checkType(value) {
      if (typeof value === 'string') {
        console.log("11111")
        return 2
      } else if (typeof value === 'number') {
        console.log("22222")
        return  1  
      }
    else {
        return 2;
      }
    },
    // 顶部返回
    toReturn(){
      this.$router.push(
        {path:"/patientdetail?patientid=" +this.patientid +'&seacherActive='+1,query:{active:this.active} }
      );
    },
    getTime (time) {
      // return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
      return uParseTime(time, '{y}-{m}-{d}  {h}:{i}')
    },
    // 数据源
    getinspectiondetails(patient_id,project_id){
      const params={
        patient_id:patient_id,
        project_id:project_id,
      }
      getinspectiongroupdetails(params).then(response =>{

        const list = response.data.data.inspection
        const tablehed = response.data.data.referenceList
        console.log('response11111',response.data.data);

        this.tableData = list
        var columns = []
        // const date = []
        // var date1 =[]
        // let table = [{inspect_date:''}]
        // const datable =[]
        // const arr ={}
        // if(tablehed.length >0){
        //   for(let i=0;i<tablehed.length;i++){
        //     const obj ={
        //       label:tablehed[i].item_name,
        //       prop:'value'+(i+1)
        //     }
        //     columns.push(obj)
        //   }
        // }

        this.columns = tablehed

        console.log('list[0].Child121',this.columns);
        console.log('this.tableData',this.tableData);

        // list.forEach(item =>{
        //   const datable1 ={
        //     inspect_date:item.inspect_date,
        //   }
        //   datable.push(datable1)

        //   item.Child.forEach((item1,index1) =>{
        //     for(let i in datable){
        //       for(let j in columns){
        //         if(item1.inspect_date == datable[i].inspect_date && columns[j].label == item1.item_name){
        //             console.log("item1---------------",item1)
        //             if(item1.inspect_type == 2){
        //               datable[i][columns[j].prop] = item1.inspect_value
        //             }
        //             datable[i][columns[j].prop] = item1.inspect_value
        //         }
        //       }
        //     }
        //   })
        // })
        // table =datable
        // this.datable = datable
        // console.log('ppppp',columns);

        // this.tableData = table
        // console.log("columns",columns)
        // this.columns = columns
        // console.log('11111',this.tableData);
      })

    },
    getname(row,label){
      for(let key in row){
        if(key == label){
          return row[key]
        }
      }
    },
    getItemValue(inspect_date,item_name){

      var inspect_value = ""
      for(let i=0;i<this.tableData.length;i++){
        for(let j=0;j<this.tableData[i].Child.length;j++){
          if(inspect_date == this.tableData[i].Child[j].inspect_date && item_name == this.tableData[i].Child[j].item_name){
            inspect_value = this.tableData[i].Child[j].inspect_value.replace(/&lt;/g, "<").replace(/&gt;/g, ">")
          }
        }
      }

      
      return inspect_value
    },
    getItemValueOne(inspect_date,item_name){
      var inspect_value = ""
      for(let i=0;i<this.tableData.length;i++){
        for(let j=0;j<this.tableData[i].Child.length;j++){
          if(inspect_date == this.tableData[i].Child[j].inspect_date && item_name == this.tableData[i].Child[j].item_name){
            inspect_value = this.tableData[i].Child[j].inspect_value
          }
        }

      }
      return inspect_value
    },
    changeoption(val){
      // console.log('val',val);
      const option = this.options
      for(let i in option){
        if(option[i].project_id == val){
          this.getinspectiondetails(this.patientid,option[i].project_id)
          return option[i].name
        }
      }
    },
    // 跳转返回
    goCheck(){

      this.$router.push(
        {path:'/patientdetail?' +
          'patientid=' +
          this.patientid + '&seacherActive=' + 1 + 
          '&active=' + 4 + '&restatus=' +1,
          query:{id:this.blood_id,date:this.route_date,name:this.patient_name,}
        })
    },
    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('touchmove1', this.handler, {
          passive: false
        })
      }
    },
    // 鼠标释放时候的函数
    end () {
      this.flags = false
      sessionStorage.setItem('checkBtnTop1', this.moveBtn.style.top)
      sessionStorage.setItem('checkBtnLeft1', this.moveBtn.style.left)
      document.addEventListener('touchmove1', this.handler, {
        passive: false
      })
    },
  },
  created () {
    // console.log('patientName',this.patientName);
    var patientid = this.$route.query.patient_id ? this.$route.query.patient_id : this.$route.query.patient_id
    console.log("病人id---------------------------------",patientid)
    this.patientid = patientid

    this.patientName=this.$route.query.name
    this.row = this.$route.query.row
    this.value = this.row.project_id
    this.options = this.$route.query.options

    // this.blood_id = this.$route.query.row.patient_id
    this.route_date = this.$route.query.date
    this.patient_name = this.$route.query.name
    this.active = this.$route.query.active
    this.blood_id = this.$route.query.id
    console.log('this.$route.query',this.$route.query);
    this.getinspectiondetails(patientid,this.row.project_id)

    var restatus = this.$route.query.restatus
    this.restatus = restatus
  }
}
</script>

<style lang="scss" scoped>
.inspection {
  height: 100%;
  overflow-y: auto;
  .doctorAdviceTitle {
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.125rem;
    background: #fff;
    font-size: 1rem;
    .patientName {
      display: flex;
      align-items: center;
      font-size: 1rem;
    }
  }
  .el_table{
    padding: 10px;
  }
  .toolBox {
    display: flex;
    height: 3.125rem;
    justify-content: space-around;
    align-items: center;
    .toolOne {
      width: 6.25rem;
      height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.8125rem;
      color: #8d8d8d;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  .adviceBox {
    padding: 0 1.125rem;
    margin-bottom: 3.125rem;
  }
  .adviceMain {
    > div:last-child {
      border: none;
    }
  }
  .adviceOne {
    // box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.625rem;
  }
  .adviceTitle {
    padding-top: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      color: #000000;
      font-weight: bold;
      font-size: 0.9375rem;
    }
  }
  .ellipsis {
    font-size: 1.25rem;
    color: #cccccc;
  }
  .orderContent {
    font-size: 0.875rem;
    color: rgba(49, 50, 52, 1);
    margin-top: 0.625rem;
    p {
      line-height: 1.25rem;
    }
  }
  .doctorBox {
    font-size: 0.75rem;
    color: rgba(152, 152, 152, 1);
    line-height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.625rem;
  }
  .all {
    font-size: 0.8125rem;
    color: #5b98ff;
    margin-top: 0.625rem;
  }
  .noimgBox {
    margin-top: 40%;
    img {
      width: 9.375rem;
      height: 9.375rem;
      margin: 0 auto;
      display: block;
    }
  }
  .add {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.75rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 0.9375rem;
    color: #979798;
    .addIcon {
      color: #5b98ff;
      font-size: 1.25rem;
      margin-right: 0.25rem;
    }
  }
  .flexBox {
    display: flex;
    justify-content: space-between;
  }
}
::-webkit-scrollbar {
  width: 0;
}
.elselect{
  .el-input--suffix{
    .el-input__inner{
      font-size: 16px !important;
    }
  }
}
.checkBox1 {
  position: fixed;
  left: 0.6rem;
  bottom: 3.25rem;
  z-index:5000;
  img {
    width: 3.5rem;
    height: 3.5rem;
  }
}
</style>
<style lang="scss">
.elselect{
  .el-input--suffix{
    .el-input__inner{
      font-size: 16px !important;
    }
  }
}
</style>
