<template>
  <div class="page_allCheck">
    <div class="allCheckTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="toReturn"></i>
      <span class="titleName">{{ patient_name }}的检验检查</span>
    </div>
    <div class="searchList">
      <van-tabs
        v-model="active"
        title-active-color="#000000"
        title-inactive-color="#3C3C3C"
        @change="changeActive"
      >
        <van-tab
          v-for="(item, index) in checkdata"
          :title="item.project_name"
          :key="index"
        >
          <div class="all" v-if="InspectionDetail.length > 0">
            <ul class="headline">
              <li>检查项目</li>
              <li>结果</li>
              <li>参考值</li>
              <li>单位</li>
            </ul>

            <p class="checkTime">检查日期：{{ getTime(inspection_date) }}</p>
            <ul class="itemList">
              <li v-for="(item, index) in InspectionDetail" :key="index">
                <span>{{ item.item_name }}</span>
                <p>
                  <span style="text-align:right;width:3.125rem;display: inline-block;">
                   <span v-if="item.inspect_type!=3"> {{ item.inspect_value }}</span> 
                    <span v-if="item.inspect_type == 3"><img :src="item.inspect_value" style="width: 50px;height: 50px;"></span> 
                  </span>
                  <span v-if="item.inspect_value != '' && parseInt(item.inspect_value) > parseInt(item.range_max)">
                    <i class="el-icon-top" style="color:#F44746"></i>
                  </span>
                  <span
                    v-if="item.inspect_value != '' &&parseInt(item.inspect_value) <parseInt(item.range_min) &&parseInt(item.inspect_value) < parseInt(item.range_max)">
                    <i class="el-icon-bottom" style="color:#5B98FF"></i>
                  </span>
                  <span v-if="parseInt(item.inspect_value) === ''"></span>
                </p>
                <span v-if="item.range_type === 1">{{ item.range_min }}~{{ item.range_max }}</span>
                <span v-if="item.range_type === 2">
                  <span v-if="item.inspect_type!=3"> {{ item.inspect_value }}</span> 
                  <span v-if="item.inspect_type == 3"><img :src="item.inspect_value" style="width: 50px;height: 50px;"></span> 
                </span>
                <span>{{ item.unit }}</span>
              </li>
            </ul>
          </div>
          <div class="nodata" v-else>
            <img src="../../../assets/images/none.png" alt />
          </div>
        </van-tab>
      </van-tabs>
      <div class="fixedBox3" ref="butt">
        <div  @mousedown="down" @touchstart="down" @mousemove="move" 
        @touchmove="move" @mouseup="end" @touchend="end" @touchcancel="end">
          <el-button type="primary" @click="toLastInspectionDetail" >上一张</el-button>
        </div>
      </div>
      <div class="fixedBox4"  ref="butt2">
        <div  @mousedown="down2" @touchstart="down2" @mousemove="move2" 
        @touchmove="move2" @mouseup="end2" @touchend="end2" @touchcancel="end2">
          <el-button type="primary" @click="toNextInspectionDetail">下一张</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetAllProjectNameByDate,
  getAllInspection,
  getPatientName,
  getInspectionDetail,
  getLastInspectionDetail,
  getNextInspectionDetail
} from "@/api/patient/patient";
import { uParseTime } from "@/utils/tools";
import { setRem, setHeight } from "@/libs/functionRem";
import { Console } from "console";
export default {
  data() {
    return {
      searchVal: "",
      active: 0,
      checkdata: [],
      patient_name: "",
      inspection_date: "",
      InspectionDetail: [],
      project_id: 0,
      patient_id: "",
      date: "",
      activeTwo: 0,
      patientid: 0,
      data: [],
      projectName: [],
      restatus: 0,
      nx: '',
      ny: '',
      dx: '',
      dy: '',
      xPum: '',
      yPum: '',
      position: {
        x: 0,
        y: 0
      },
      moveBtnbut: {},
      keyBoardShow:true,
      flags: false,
      nx2: '',
      ny2: '',
      dx2: '',
      dy2: '',
      xPum2: '',
      yPum2: '',
      position2: {
        x: 0,
        y: 0
      },
      moveBtnbut2: {},
         
    };
  },
  mounted(){
    this.moveBtnbut = this.$refs.butt
    if (sessionStorage.getItem('checkBtnTop2')) {
      this.moveBtnbut.style.top = sessionStorage.getItem('checkBtnTop2')
      this.moveBtnbut.style.bottom = 'initial'
    }
    if (sessionStorage.getItem('checkBtnLeft2')) {
      this.moveBtnbut.style.left = sessionStorage.getItem('checkBtnLeft2')
    }
    this.moveBtnbut2 = this.$refs.butt2
    if (sessionStorage.getItem('checkBtnTop3')) {
      this.moveBtnbut2.style.top = sessionStorage.getItem('checkBtnTop3')
      this.moveBtnbut2.style.bottom = 'initial'
    }
    if (sessionStorage.getItem('checkBtnLeft3')) {
      this.moveBtnbut2.style.left = sessionStorage.getItem('checkBtnLeft3')
    }
    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: {
    GetAllProjectNameByDate(date, patientid) {
      GetAllProjectNameByDate(date, patientid).then(response => {
        if (response.data.state === 1) {
          var projectName = response.data.data.projectName;
          // console.log("projectName", projectName);
          this.projectName = projectName;
          this.checkdata = projectName;
          this.getInspection(this.patientid, this.date);
        }
      });
    },
    getAllInspection() {
      getAllInspection().then(response => {
        if (response.data.state === 1) {
          var inspection = response.data.data.inspection;
          // console.log("inspection什么意思", inspection);
          // this.checkdata = inspection;
          this.data = inspection;
        }
      });
    },
    getPatientName(patientid) {
      getPatientName(patientid).then(response => {
        if (response.data.state === 1) {
          var patientName = response.data.data.patientName;
          // console.log("patientName", patientName);
          this.patient_name = patientName.name;
        }
      });
    },
    changeActive(name, title) {
      this.checkdata.map(item => {
        if (item.project_name === title) {
          this.project_id = item.project_id;
        }
      });
      this.getInspectionDetail(this.patientid, this.date, this.project_id);
    },
    getInspectionDetail(patientid, date) {
      getInspectionDetail(patientid, date, this.project_id).then(response => {
        if (response.data.state === 1) {
          var InspectionDetail = response.data.data.InspectionDetail;
          console.log("数据是", InspectionDetail);
          this.InspectionDetail = InspectionDetail;
        }
      });
    },
    getInspection(patientid, date) {
      if (this.active === 0) {
        this.project_id = this.projectName[0].project_id;
      }
      getInspectionDetail(patientid, date, this.project_id).then(response => {
        if (response.data.state === 1) {
          var InspectionDetail = response.data.data.InspectionDetail;
          this.InspectionDetail = InspectionDetail;
        }
      });
    },
    getTime(time) {
      return uParseTime(time, "{y}-{m}-{d} {h}:{i}");
    },
    toReturn() {
      if (this.restatus == 1) {
        this.$router.push(
          "/patientdetail?patientid=" +
            this.patientid +
            "&active=" +
            this.activeTwo +
            "&restatus=" +
            this.restatus
        );
      } else {
        this.$router.push(
          "/patientdetail?patientid=" +
            this.patientid +
            "&active=" +
            this.activeTwo
        );
      }
    },
     // 拖动
     down (event) {
      this.flags = true
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      console.log('touch',touch);
      this.position.x = touch.clientX
      this.position.y = touch.clientY
      this.dx = this.moveBtnbut.offsetLeft
      this.dy = this.moveBtnbut.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.moveBtnbut.offsetWidth
        ) {
          this.moveBtnbut.style.left = this.xPum + 'px'
        }
        if (
          this.yPum > 0 &&
          this.yPum < clientHeight - this.moveBtnbut.offsetHeight
        ) {
          this.moveBtnbut.style.top = this.yPum + 'px'
        }

        // 阻止页面的滑动默认事件
        document.addEventListener('touchmove', this.handler, {
          passive: false
        })
      }
    },
    // 鼠标释放时候的函数
    end () {
      this.flags = false
      sessionStorage.setItem('checkBtnTop2', this.moveBtnbut.style.top)
      sessionStorage.setItem('checkBtnLeft2', this.moveBtnbut.style.left)
      document.addEventListener('touchmove', this.handler, {
        passive: false
      })
    },
    // 拖动
    down2 (event) {
      this.flags = true
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      console.log('touch',touch);
      this.position2.x = touch.clientX
      this.position2.y = touch.clientY
      this.dx2 = this.moveBtnbut2.offsetLeft
      this.dy2 = this.moveBtnbut2.offsetTop
    },
    move2 (event) {
      if (this.flags) {
        var touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        this.nx2 = touch.clientX - this.position2.x
        this.ny2 = touch.clientY - this.position2.y
        this.xPum2 = this.dx2 + this.nx2
        this.yPum2 = this.dy2 + this.ny2
        var clientWidth = document.documentElement.clientWidth
        var clientHeight = document.documentElement.clientHeight
        if (
          this.xPum2 > 0 &&
          this.xPum2 < clientWidth - this.moveBtnbut2.offsetWidth
        ) {
          this.moveBtnbut2.style.left = this.xPum2 + 'px'
        }
        if (
          this.yPum2 > 0 &&
          this.yPum2 < clientHeight - this.moveBtnbut2.offsetHeight
        ) {
          this.moveBtnbut2.style.top = this.yPum2 + 'px'
        }

        // 阻止页面的滑动默认事件
        document.addEventListener('touchmove', this.handler, {
          passive: false
        })
      }
    },
    // 鼠标释放时候的函数
    end2 () {
      this.flags = false
      sessionStorage.setItem('checkBtnTop3', this.moveBtnbut2.style.top)
      sessionStorage.setItem('checkBtnLeft3', this.moveBtnbut2.style.left)
      document.addEventListener('touchmove', this.handler, {
        passive: false
      })
    },
    toLastInspectionDetail(){
       var params = {
        patient_id:this.patientid,
        date:this.date,
        project_id:this.project_id,
       }
       getLastInspectionDetail(params).then(response=>{
         if(response.data.state == 1){
            var InspectionDetail = response.data.data.InspectionDetail
            this.InspectionDetail=[]
            this.InspectionDetail = InspectionDetail;
            var inspection_date = response.data.data.inspectdate
            this.inspection_date = ""
            this.inspection_date = inspection_date
            this.date = ""
            this.date = inspection_date
            console.log("date",this.date)
         }
       })
    },
    toNextInspectionDetail(){
      var params = {
        patient_id:this.patientid,
        date:this.date,
        project_id:this.project_id,
       }
      
       getNextInspectionDetail(params).then(response=>{
         if(response.data.state == 1){
          var InspectionDetail = response.data.data.InspectionDetail
          this.InspectionDetail=[]
          this.InspectionDetail = InspectionDetail;
          var inspection_date = response.data.data.inspectdate
          this.inspection_date = ""
          this.inspection_date = inspection_date
          this.date = ""
          this.date = inspection_date
         }
       })
    }

  },
  created() {
    var patientid = this.$route.query.patientid ? this.$route.query.patientid : this.$route.query.patient_id;
    if(patientid >0){
      this.patientid = parseInt(patientid);
    } 
  
    var date = this.$route.query.date;
    this.date = date;
    this.inspection_date = date;
    this.activeTwo = parseInt(this.$route.query.active);
    setRem();
    setHeight();
    this.GetAllProjectNameByDate(date, patientid);
    // this.getAllInspection();
    this.getPatientName(patientid);
    var restatus = this.$route.query.restatus;
    this.restatus = restatus;
  }
};
</script>

<style lang="scss" scoped>
.page_allCheck {
  overflow: hidden;
  height: 100%;
  overflow-y: auto;
  .allCheckTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 6rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .searchList {
    height: 100%;
    .van-tabs {
      display: flex;
      flex-direction: column;
      height: 100%;
      > div:last-child {
        flex: 1;
        overflow: auto;
        background: #f4f4f4;
      }
    }
    .van-tabs__line {
      height: 0.25rem;
      background: #5b98ff;
    }
    .van-tabs__content {
      background: #f8f8f8;
    }
    .all {
      background: #fff;
      // margin-top: 1.25rem;
      padding-top: 0.625rem;
    }
    .headline {
      display: flex;
      height: 2.5rem;
      align-items: center;
      background: #f7f7fa;

      li {
        width: 33.3%;
        text-align: center;
        font-size: 0.75rem;
        font-weight: bold;
      }
    }
    .checkTime {
      height: 1.875rem;
      line-height: 1.875rem;
      padding-left: 1.5rem;
      font-size: 0.75rem;
    }
    .itemList {
      li {
        display: flex;
        align-items: center;
        height: 2.5rem;
        span {
          width: 33.3%;
          text-align: center;
          font-size: 0.75rem;
        }
        p {
          width: 33.3%;
          // text-align: center;
          font-size: 0.75rem;
        }
      }
    }
  }
  .nodata {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 9.375rem;
      height: 9.375rem;
    }
  }
}
.fixedBox3{
  position: fixed;
  bottom: 4.2rem;
  right: 0.2rem;
  z-index: 5;
  width: 100px;
  height: 50px;
}
.fixedBox4{
  position: fixed;
  bottom: 0.625rem;
  right: 0.2rem;
  z-index: 5;
  width: 100px;
  height: 50px;
}
</style>

<style lang="scss">
.page_allCheck {
  .van-tab--active {
    font-size: 1rem;
    color: #000;
    font-weight: bold;
    flex-basis: 26% !important;
  }
  .van-tabs__wrap {
    overflow: inherit;
  }
}
</style>
