<template>
  <div class="inspection">
    <div class="el_table">
      <el-table
        :data="tableData" border
        style="width: 100%"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
       >
        <el-table-column
          prop="name"
          label="检验项目"
          width="">
          <template slot-scope="scope">
            <div @click="row_name(scope.row)">
              <span style="color: #409eff;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          label="次数"
          width="80">
        </el-table-column>
        <el-table-column
          prop="date"
          label="最近一次检验日期">
        </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> -->
      <!-- <div class="toolBox">
        <div class="toolOne" @click="typeShow = true">
          <div style="display: flex;align-items: center;">
            {{ type }}
            <van-icon name="arrow-down" />
          </div>
        </div>
        <div class="toolOne" @click="startShow = true">
          <div style="display: flex;align-items: center;">
            {{ startTime }}
            <van-icon name="arrow-down" />
          </div>
        </div>
        <div class="toolOne" @click="endShow = true">
          <div style="display: flex;align-items: center;">
            {{ endTime }}
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div> -->

      <!-- <div class="adviceBox" v-if="Inspection.length > 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          style="width: 100%;height: 100%;overflow-y: auto;"
        >
          <div class="adviceMain">
            <div class="adviceOne" v-for="(item, index) in Inspection" :key="index" >
              <div class="adviceTitle">
                <p>{{ getTime(item.inspect_date) }}</p>
                <van-icon
                  class="ellipsis"
                  name="ellipsis"
                  @click="Delete(item.inspect_date, index)"
                />
              </div>
              <div class="orderContent" @click="toInspection(item.inspect_date)">
                <div class="flexBox" v-for="(it, i) in item.child" :key="i">
                  <p>{{ it }}</p>
                  <van-icon
                    class="ellipsis"
                    name="ellipsis"
                    @click="DeleteOne(it, item.inspect_date, i)"
                  />
                </div>
              </div>
              <div class="all" @click="toInspection(item.inspect_date)">全部</div>
            </div>
          </div>
        </van-list>
      </div>

      <div class="noimgBox" v-else>
        <img src="../../../assets/images/none.png" alt />
      </div>
    </div> -->
    <!-- <div class="add">
      <div style="display: flex;align-items: center;">
        <van-icon class="addIcon" name="add" />新增
      </div>
    </div>-->

    <!-- 弹出层 -->
    <!-- <div>
      <van-popup
        get-container="#app"
        v-model="typeShow"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-popup
        get-container="#app"
        v-model="startShow"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime"
          @cancel="startShow = false"
        />
      </van-popup>
      <van-popup v-model="endShow" get-container="#app" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime2"
          @cancel="endShow = false"
        />
      </van-popup>
      <van-action-sheet
        get-container="#app"
        v-model="newShow"
        :actions="actions"
        cancel-text="取消"
        @select="toDelete"
      />
      <van-action-sheet
        get-container="#app"
        v-model="newShowOne"
        :actions="actions1"
        cancel-text="取消"
        @select="DeleteInspectionOne"
      />
    </div> -->
  </div>
</template>

<script>
import {getinspectiongroup} 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,

      route_date:null,
      route_name:'',
      route_id:0,
      tableData:[],
      moveBtn: {},
      position: {
        x: 0,
        y: 0
      },
      nx: '',
      ny: '',
      dx: '',
      dy: '',
      xPum: '',
      yPum: '',
    }
  },
  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: {
    compareList: function (k) {
        return function (a, b) {
          var M = a[k]
          var N = b[k]
          return N - M;   // 从高向低排
        }
     },
    // 数据源
    getInspection(id){
      getinspectiongroup(id).then(response =>{
        console.log('response',response);
        const table=[]
        const list = response.data.data.inspection
        var newList = list.sort(this.compareList('inspect_date'))
        newList.forEach(item => {
          const arr ={
            id:item.id,
            name:item.project_name,
            count:item.Count,
            date:this.getTime(item.inspect_date),
            project_id:item.project_id,
            patient_id:item.patient_id,
          }
          table.push(arr)
        });
        this.tableData = table
      })
    },
    getTime (time) {
      // return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
      return uParseTime(time, '{y}-{m}-{d}  {h}:{i}')
    },
    //点击表格行 
    rowclick({row, column, event}){
      console.log('row',row);
    },
    
    row_name(row){
      console.log('rows',row)
      this.$router.push({path: '/new_Inspectiondetails',
      query:{name:this.patientName,
        date:this.route_date,
        row:row,
        id:this.route_id,
        patient_id:this.patientid,
        options:this.tableData,
        active:this.active,
        
      }})
    },
    // 返回
    goCheck(){
      if (this.restatus == 1) {
        this.$router.push(
          '/details?patient_id=' +
            this.route_id +
            '&date=' +
            this.route_date +
            '&patient_name=' +
            this.route_name
        )
        // console.log('vvvvvv11111',this.route_id,this.route_date,this.route_name);
      }
      // this.$router.push(
      //   '/details?patient_id=' +
      //     this.route_id +
      //     '&date=' +
      //     this.route_date +
      //     '&patient_name=' +
      //     this.route_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 () {
    var patient_id = this.$route.query.patientid ? this.$route.query.patientid : this.$route.query.patientid
    // const patient_id = this.$route.query.id 
    this.route_date = this.$route.query.date*1
    this.route_name = this.$route.query.name
    this.route_id = this.$route.query.id*1
   
    this.patientid = patient_id
    this.getInspection(patient_id)
    // this.getPatientDetail(patientid)
    // 获取所有检验检查项目
    // this.getAllInspection()
    // this.getInspection(patientid)
    var restatus = this.$route.query.restatus
    this.restatus = restatus
  }
}
</script>

<style lang="scss" scoped>
.inspection {
  height: 100%;
  overflow-y: auto;
  .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;
}
.checkBox1 {
  position: fixed;
  left: 0.6rem;
  bottom: 3.25rem;
  z-index:5000;
  img {
    width: 3.5rem;
    height: 3.5rem;
  }
}
</style>
