<template>
    <div class="page_noStardard">
        <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>未达标人数:{{this.tableData.length}}人</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" label="姓名" width="80">
                    <template slot-scope="scope">
                      {{scope.row.name}}
                    </template>
                 </el-table-column>
                <el-table-column prop="date" label="检查日期" width="100">
                    <template slot-scope="scope">
                       {{getTime(scope.row.inspect_date)}}
                    </template>
                </el-table-column>
                <el-table-column
                    :label="modeItem.item_name"
                    property="number"
                    align="center"
                    min-width="100"
                    v-for="(modeItem, index) in normData"
                    :key="index"
                    >
                  <template slot-scope="scope">
                      <!-- <span>{{scope.row.data[modeItem.item_name].inspect_value}}</span> -->
                     <span v-if="scope.row.data[modeItem.item_name].range_type == 1 && scope.row.data[modeItem.item_name].inspect_value == ''">0</span>
                     <span v-if="scope.row.data[modeItem.item_name].range_type == 1 && scope.row.data[modeItem.item_name].inspect_value !=''&& (parseInt(scope.row.data[modeItem.item_name].inspect_value) < parseInt(scope.row.data[modeItem.item_name].min_range))">
                     <span >{{scope.row.data[modeItem.item_name].inspect_value}}</span><span style="color:#5B98FF;margin-left:5px;">↓</span>
                     </span>
                     <span v-if="scope.row.data[modeItem.item_name].range_type == 1 && scope.row.data[modeItem.item_name].inspect_value !=''&& (parseInt(scope.row.data[modeItem.item_name].inspect_value) > parseInt(scope.row.data[modeItem.item_name].large_range))">
                     <span>{{scope.row.data[modeItem.item_name].inspect_value}}</span><span style="color:#F56C6C;margin-left:5px;">↑</span>
                     </span>
                     <span v-if="scope.row.data[modeItem.item_name].range_type == 1 && scope.row.data[modeItem.item_name].inspect_value !=''&& (parseInt(scope.row.data[modeItem.item_name].inspect_value) >= parseInt(scope.row.data[modeItem.item_name].min_range))&& (parseInt(scope.row.data[modeItem.item_name].inspect_value) <= parseInt(scope.row.data[modeItem.item_name].large_range)) ">{{scope.row.data[modeItem.item_name].inspect_value}}</span>
                     <span v-if="scope.row.data[modeItem.item_name].range_type == 2 && scope.row.data[modeItem.item_name].inspect_value !=''">
                     <span v-if="scope.row.data[modeItem.item_name].range_value == scope.row.data[modeItem.item_name].inspect_value">
                     <span style="color:#5B98FF;margin-left:5px;" >{{scope.row.data[modeItem.item_name].inspect_value}}</span>
                     </span>
                     <span v-if="scope.row.data[modeItem.item_name].range_value != scope.row.data[modeItem.item_name].inspect_value">
                     <span style="color:#F56C6C;margin-left:5px;" >{{scope.row.data[modeItem.item_name].inspect_value}}</span>
                     </span>
                    </span>
                    </template>
                </el-table-column>
            </el-table>

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

<script>
import ScrollTop from '../../dqc/components/ScrollTop'
import {getMobileNormData, getTargetNoStandDetail} from '@/api/common/common'
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),
      tableData: [],
      tableHeight: '',
      loading: false,
      minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
      maxDate: new Date(),
      normData: [],
      start_time: 0,
      end_time: 0,
      ObjectData: {},
      limit: 20,
      page: 1
    }
  },
  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
    },
    loadMore () {},
    getMobileNormData () {
      getMobileNormData().then(response => {
        if (response.data.state == 1) {
          var normdata = response.data.data.normdata
          this.normData = normdata
          var a = []
          for (let i = 0; i < normdata.length; i++) {
            a.push(normdata[i])
          }
          this.newArr = a
          var arr = this.arrayToObj(a)
          this.ObjectData = arr
          this.getlist()
        }
      })
    },
    getlist () {
      this.tableData = []
      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
      }
      getTargetNoStandDetail(params).then(response => {
        if (response.data.state == 1) {
          var inspectlist = response.data.data.inspectlist
          var configurationlist = response.data.data.configurationlist
          configurationlist.map(item => {
            inspectlist.push(item)
          })
          var list = response.data.data.list

          let dataInfo = {}
          inspectlist.forEach((item, index) => {
            let { inspect_date } = item
            if (!dataInfo[inspect_date]) {
              dataInfo[inspect_date] = {
                inspect_date,
                name: item.name
              }
            }
          })
          let list = Object.values(dataInfo)
          var dd = {}
          for (const index in inspectlist) {
            if (!(inspectlist[index].inspect_date in dd)) {
              dd[inspectlist[index].inspect_date] = {}
            }
            if (!(inspectlist[index].item_name in dd[inspectlist[index].inspect_date]) && inspectlist[index].item_name != 0) {
              dd[inspectlist[index].inspect_date][inspectlist[index].item_name] = inspectlist[index]
            }
          }

          for (const key in dd) {
            for (const mkey in this.ObjectData) {
              if (!(this.ObjectData[mkey].item_name in dd[key])) {
                dd[key][this.ObjectData[mkey].item_name] = {
                  item_name: this.ObjectData[mkey].item_name,
                  inspect_date: mkey,
                  inspect_value: 0,
                  range_type: this.ObjectData[mkey].range_type
                }
              }
            }
            this.tableData.push({ inspect_date: key, data: dd[key]})
          }
          list.map(item => {
            for (let i = 0; i < this.tableData.length; i++) {
              if (item.inspect_date == this.tableData[i].inspect_date) {
                this.tableData[i].name = item.name
              }
            }
          })
          this.$nextTick(() => {
            this.$refs.tab.doLayout()
          })
        }
      })
    },
    arrayToObj (arr) {
      return Object.assign({}, arr)
    },
    getTime (time) {
      return uParseTime(time, '{y}-{m}-{d}')
    }

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

<style lang="scss" scoped>
.page_noStardard{
  .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>
<style lang="scss">
.page_noStardard {
  .el-table__fixed-body-wrapper {
    top: 2.625rem;
  }
  .el-table {
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .el-table__fixed-right {
      right: 0 !important;
    }
    // .el-table__fixed {
    //   height: 15.625rem !important;
    // }
    // .el-table__fixed-right {
    //   height: 15.625rem !important;
    // }

  }
  .el-table td, .el-table th{
    text-align: center;
  }

}
.el-table td, .el-table th{
  padding:8px 0;
  font-size: .9375rem;
}
</style>
