<style lang="scss" scoped>
.search-bar {
  display: flex;
  align-items: center;
}
.search-box p {
  display: inline-block;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>
<style>
/* .data-display-statistics .ant-card-body {
  padding: 0 15px;
} */
.data-display-statistics .ant-col-6 {
  margin: 10px 0;
}
.data-display-statistics .ant-col-6 .ant-card-body {
  display: flex;
  justify-content: center;
}
.data-display-statistics .ant-col-6 p,
.data-display-statistics .ant-col-6 span {
  text-align: center;
  line-height: 40px;
  font-size: 30px;
  font-weight: 600;
  color: red;
  margin: 0;
}
.search-box .ant-card-body {
  padding: 5px 15px;
}
.data-display-statistics .ant-col-6 .ant-card-body .styleElse {
  line-height: 60px;
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
}
.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  display: none !important;
}
.yincang .ant-col-6 p {
  text-align: left;
  color: red;
  font-size: 16px;
  font-weight: 500;
}
.ant-table-thead div {
  font-weight: 700;
}
.tool-tip {
  position: absolute;
  top: 65px;
  right: 10px;
}
.ant-table-thead tr th {
  background: none;
}
/* th div {
  white-space: nowrap;
} */
</style>
<template>
  <div>
    <p
      :style="active == item.value ? 'color:cornflowerblue;background:#f2f2f2' : ''"
      v-for="(item, index) of timeList"
      :key="index"
      @click="getAdd(item.value)"
    >
      {{ item.label }}
    </p>
    <a-range-picker
      style="width:400px"
      :disabledDate="disabledDate"
      :showTime="{
        hideDisabledOptions: true
      }"
      format="YYYY-MM-DD"
      v-model="startValue"
      @ok="getAdd(9)"
    />
  </div>
</template>

<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import moment from 'moment'
var length = 0
var active = 1
export default {
  name: 'time-check',
  components: {
    ACol,
    ARow
  },
  props: {
    timeList: {
      type: Array,
      default() {
        return [
          { label: '今天', value: 1, show: true },
          { label: '昨天', value: 2, show: true },
          { label: '近一周', value: 3, show: true },
          { label: '近十五天', value: 4, show: true },
          { label: '近一月', value: 5, show: true },
          { label: '近三月', value: 6, show: true },
          { label: '近半年', value: 7, show: true },
          { label: '所有', value: 8, show: true }
        ]
      }
    },
    activeNow: {
      type: Number,
      default() {
        return 1
      }
    }
  },
  data: function() {
    return {
      active: 1,
      startValue: []
    }
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    }
  },
  methods: {
    disabledDate(current) {
      // Can not select days before today and today
      return current && current > moment().endOf('day')
    },
    getAdd(checked) {
      this.active = checked
      if (checked != 9) {
        this.startValue = []
      }
      active = checked
      this.$emit('update:startValue', this.startValue)
      this.$emit('getAdd', checked)
    }
  },
  watch: {},
  distoryed() {},
  updated() {},
  mounted: function() {
    this.$nextTick(() => {
      this.active = this.activeNow
    })
  }
}
</script>
