<template>
    <div class="page_bloodNoStandard">
        <div class="quarterBox">
            <p :class="Num == 1 ? 'active' : ''" @click="onClick(1)">近一月</p>
            <p :class="Num == 2 ? 'active' : ''" @click="onClick(2)">近三月</p>
            <p :class="Num == 3 ? 'active' : ''" @click="onClick(3)">近半年</p>
            <!-- <div class="toolBox"> -->
                <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>

        <div>
            <van-popup 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" 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>
        </div>
          <div>未达标人数:{{noStandTotal}}人</div>
          <div>
            <el-table ref="tab" :data="tableData" style="width: 100%" :height="tableHeight" v-loadmore="loadMore" v-loading="loading" border :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
                 <el-table-column fixed="left"  prop="name" align="center" label="姓名" width="80">
                    <template slot-scope="scope">
                        {{scope.row.name}}
                    </template>
                 </el-table-column>
                <el-table-column prop="date" label="日期" align="center">
                    <template slot-scope="scope">
                       {{getTime(scope.row.monitoring_date)}}
                    </template>
                </el-table-column>
                  <el-table-column prop="date" label="收缩压" width="90">
                    <template slot-scope="scope">
                       <span>
                          <span v-if="scope.row.systolic_blood_pressure >= min_range && scope.row.systolic_blood_pressure<=large_range">{{scope.row.systolic_blood_pressure}}</span>
                          <span v-if="scope.row.systolic_blood_pressure < min_range">
                           <span style="color:#5B98FF;margin-left:5px;">↓</span>{{scope.row.systolic_blood_pressure}}</span>
                          <span v-if="scope.row.systolic_blood_pressure>large_range">
                            <span style="color:#F56C6C;margin-left:5px;">↑</span> {{scope.row.systolic_blood_pressure}}
                          </span>
                       </span>
                    </template>
                </el-table-column>
                  <el-table-column prop="date" label="舒张压" width="90">
                    <template slot-scope="scope">
                       <span v-if="scope.row.diastolic_blood_pressure >= min && scope.row.diastolic_blood_pressure<=large">{{scope.row.diastolic_blood_pressure}}</span>
                          <span v-if="scope.row.diastolic_blood_pressure < min">
                           <span style="color:#5B98FF;margin-left:5px;">↓</span>{{scope.row.diastolic_blood_pressure}}</span>
                          <span v-if="scope.row.diastolic_blood_pressure>large">
                            <span style="color:#F56C6C;margin-left:5px;">↑</span> {{scope.row.diastolic_blood_pressure}}
                          </span>

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

         </div>
         <scroll-top></scroll-top>
    </div>
</template>

<script>
import { getSystolicBloodNoStand } from '@/api/common/common'
import ScrollTop from '../../dqc/components/ScrollTop'
import { uParseTime } from '@/utils/tools'
const moment = require('moment')
export default {
  components: {
    ScrollTop
  },
  data () {
    return {
      tableHeight: '',
      Num: 1,
      startShow: false,
      endShow: false,
      currentDate: new Date(),
      startTime: '请选择',
      endTime: '请选择',
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      limit: 20,
      page: 1,
      bloodArr: [],
      tableData: [],
      loading: false,
      isStop: false,
      min: 0,
      large: 0,
      min_range: 0,
      large_range: 0,
      noStandTotal: 0
    }
  },
  methods: {
    onClick (id) {
      if (id == 1) {
        this.Num = 1
        this.start_time = moment().subtract('month', 1).format('YYYY-MM-DD')
        this.end_time = moment(new Date()).format('YYYY-MM-DD')
        this.getlist()
      } else if (id == 2) {
        this.Num = 2
        this.start_time = moment().subtract('month', 3).format('YYYY-MM-DD')
        this.end_time = moment(new Date()).format('YYYY-MM-DD')
        this.getlist()
      } else if (id == 3) {
        this.Num = 3
        this.start_time = moment().subtract('month', 6).format('YYYY-MM-DD')
        this.end_time = moment(new Date()).format('YYYY-MM-DD')
        this.getlist()
      }
    },
    getstartTime (value) {
      this.page = 1
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }

      this.startTime = `${year}-${month}-${day}`
      this.start_time = `${year}-${month}-${day}`
      this.startShow = false
    },
    getstartTime2 (value) {
      this.page = 1
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }

      this.endTime = `${year}-${month}-${day}`
      this.end_time = `${year}-${month}-${day}`
      this.endShow = false
    },
    getlist () {
      this.tableData = []
      this.loading = true
      if (this.Num == 1) {
        this.start_time = moment().subtract('month', 1).format('YYYY-MM-DD')
        this.end_time = moment(new Date()).format('YYYY-MM-DD')
      }
      const params = {
        startime: this.start_time,
        endtime: this.end_time,
        limit: this.limit,
        page: this.page
      }
      getSystolicBloodNoStand(params).then(response => {
        if (response.data.state == 1) {
          this.loading = false
          var record = response.data.data.record
          // console.log('recored', record)
          var recordtwo = response.data.data.recoredtwo
          this.noStandTotal = recordtwo.length
          var bloodPressure = response.data.data.bloodPressure
          var obj = {}
          var newArr = []
          for (let i = 0; i < bloodPressure.length; i++) {
            bloodPressure[0].min = bloodPressure[1].min_range
            bloodPressure[0].large = bloodPressure[1].large_range
          }

          for (let j = 0; j < bloodPressure.length; j++) {
            obj = bloodPressure[0]
          }
          newArr.push(obj)
          newArr.map(item => {
            this.min = item.min
            this.large = item.large
            this.min_range = item.min_range
            this.large_range = item.large_range
          })
          this.tableData = record
          this.$nextTick(() => {
            this.$refs.tab.doLayout()
          })
        } else {
          this.loading = false
        }
      })
    },
    loadMore () {
      if (!this.isStop) {
        this.isStop = true
        this.page++
      }
      if (this.Num == 1) {
        this.start_time = moment().subtract('month', 1).format('YYYY-MM-DD')
        this.end_time = moment(new Date()).format('YYYY-MM-DD')
      }
      const params = {
        startime: this.start_time,
        endtime: this.end_time,
        limit: this.limit,
        page: this.page
      }
      getSystolicBloodNoStand(params).then(response => {
        for (let i = 0; i < response.data.data.record.length; i++) {
          this.tableData.push(response.data.data.record[i])
        }

        this.$nextTick(() => {
          this.$refs.tab.doLayout()
        })
        if (response.data.data.record.length <= 0) {
          this.isStop = true
        } else {
          this.isStop = false
        }
      })
    },
    getTime (time) {
      return uParseTime(time, '{y}-{m}-{d}')
    },
    unique (arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
    }

  },
  created () {
    this.tableHeight = (document.documentElement.clientHeight - (Number(document.documentElement.style.fontSize.slice(0, -2)) * 2.75)) + 'px'
    this.getlist()
  }
}
</script>

<style lang="scss" scoped>
.page_bloodNoStandard{
  .quarterBox {
    display: flex;
    height: 2.5rem;
    align-items: center;
    justify-content: space-around;
    p {
      width: 3rem;
      height: 1.875rem;
      line-height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      // opacity: 0.8;
      border-radius: 0.3125rem;
      color: #8d8d8d;
      cursor: pointer;
      text-align: center;
      font-size: 0.8125rem;
    }
    .active {
      background: rgba(51, 138, 251, 1);
      color: #fff;
      border: 1px solid #338afb;
    }
  }
//   .toolBox {
//     display: flex;
//     height: 2.5rem;
//     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;
    //   margin-left: 0.8125rem;
    }
//   }
}
</style>
