<template>
  <div>
    <div style="width: 100%;">
      <span style="margin: 10px;">统计区间：</span>
      <el-date-picker
        style="margin: 10px"
        v-model="value2"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions" >
      </el-date-picker>
    </div>
    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
      <div style="flex: 1 1 45%; min-width: 620px;"> <!-- Adjust width and allow flexibility -->
        <div style="border: 1px solid black; width: 100%; height: 400px;">
          <LockerDaily :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerDaily>
        </div>
      </div>
      <div style="flex: 1 1 45%; min-width: 620px;">
        <div style="border: 1px solid black; width: 100%; height: 400px;">
          <LockerLending :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerLending>
        </div>
      </div>
      <div style="flex: 1 1 45%; min-width: 620px;">
        <div style="border: 1px solid black; width: 100%; height: 400px;">
          <LockerCollection :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerCollection>
        </div>
      </div>
      <div style="flex: 1 1 45%; min-width: 620px;">
        <div style="border: 1px solid black; width: 100%; height: 400px;">
          <LockerReturn :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerReturn>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import LockerCollection from '@/views/mes/statisticians/LockerCollection.vue'
import LockerReturn from '@/views/mes/statisticians/LockerReturn.vue'
import LockerLending from '@/views/mes/statisticians/LockerLending.vue'
import LockerDaily from '@/views/mes/statisticians/LockerDaily.vue'
import LockerOpen from '@/views/mes/statisticians/LockerOpen.vue'
import LockerSpeciality from '@/views/mes/statisticians/LockerSpeciality.vue'
import LockerMistake from '@/views/mes/statisticians/LockerMistake.vue'
import LockerChange from '@/views/mes/statisticians/LockerChange.vue'
export default {
  name: 'LockerTwo',
  components: {
    LockerChange, LockerMistake, LockerSpeciality,
    LockerOpen,
    LockerCollection,
    LockerReturn,
    LockerLending,
    LockerDaily
  },
  data() {
    return {
      value2: this.getDefaultDateRange(),
      queryParams:{
        startTime: null,
        endTime: null,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  watch: {
    value2(val) {
      if(val){
        this.getList()
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getDefaultDateRange() {
      const today = new Date();
      const oneMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
      return [oneMonthAgo, today];
    },
    formatDate(date) {
      const year = date.getFullYear().toString().padStart(2, "0");
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getList(){
      if (Array.isArray(this.value2) && this.value2.length === 2) {
        this.queryParams.startTime = this.formatDate(this.value2[0])
        this.queryParams.endTime = this.formatDate(this.value2[1])
      }
    }
  },
}
</script>
<style scoped lang="scss">

</style>
