<template>
  <el-dialog v-loading="loading" :visible.sync="dialogFormVisible" title="Synchronize recognition records" append-to-body>
    <div class="block data-pick">
      <p class="demonstration">Select the synchronization time range</p>
      <el-date-picker
        v-model="timeRange"
        :picker-options="pickerOptions"
        :default-time="['00:00:00', '23:59:59']"
        type="datetimerange"
        size="small"
        class="my-datepick"
        range-separator="to"
        start-placeholder="Begin date"
        end-placeholder="End date"
        align="right"
        @change="checkDate"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveData">OK</el-button>
      <el-button @click="cancel">Cancel</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { syncRecords } from '@/api/device'
import * as moment from 'moment'
export default {
  name: 'SyncRecord',
  data() {
    return {
      loading: false,
      dialogFormVisible: false, // 对话框是否显示
      form: {
        devIds: [],
        startTime: '',
        endTime: ''
      },
      timeRange: [],
      pickerOptions: {
        shortcuts: [{
          text: 'Yesterday',
          onClick(picker) {
            const end = moment().subtract(1, 'days').set({ hour: 23, minute: 59, second: 59, millisecond: 999 })
            const start = moment().subtract(1, 'days').set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
            // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: 'Last 3 days',
          onClick(picker) {
            const end = moment().subtract(1, 'days').set({ hour: 23, minute: 59, second: 59, millisecond: 999 })
            const start = moment().subtract(3, 'days').set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
            picker.$emit('pick', [start, end])
          }
        }, {
          text: 'Last week',
          onClick(picker) {
            const end = moment().subtract(1, 'days').set({ hour: 23, minute: 59, second: 59, millisecond: 999 })
            const start = moment().subtract(7, 'days').set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
            picker.$emit('pick', [start, end])
          }
        }],
        onPick: (time) => {
          if (time.minDate) {
            this.startTime = time.minDate
          }
          if (time.maxDate) {
            console.log('time', moment(time.minDate).add(7, 'days').set({ hour: 23, minute: 59, second: 59, millisecond: 999 }))
            if (time.maxDate.getTime() - time.minDate.getTime() > (7 * 24 * 60 * 60 * 1000)) {
              // time.maxDate = moment(time.minDate).add(7, 'days').set({ hour: 23, minute: 59, second: 59, millisecond: 999 })
            }
          }
        },
        disabledDate: this.disabledDate
      }
    }
  },
  watch: {
    timeRange(val) {
      if (val && val.length > 0) {
        if (typeof val[0] !== 'string') {
          val[0] = val[0].format('YYYY-MM-DD HH:mm:ss')
        }
        if (typeof val[1] !== 'string') {
          val[1] = val[1].format('YYYY-MM-DD HH:mm:ss')
        }
        this.form.startTime = val[0]
        this.form.endTime = val[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    }
  },
  methods: {
    checkDate() {
      console.log('CHANGE')
      if (this.timeRange && this.timeRange.length === 2) {
        let s = moment(this.timeRange[0])
        let end = moment(this.timeRange[1])

        if (end.valueOf() - s.valueOf() > (7 * 24 * 60 * 60 * 1000)) {
          this.$message.warning('The date range cannot be more than 7 days')
          end = moment(s).add(7, 'days').format('YYYY-MM-DD 23:59:59')
          s = s.format('yyyy-MM-DD 00:00:00')
        }
        if (s.valueOf() - end.valueOf() > (7 * 24 * 60 * 60 * 1000)) {
          this.$message.warning('The date range cannot be more than 7 days')
          end = moment(s).subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
          s = s.format('YYYY-MM-DD 23:59:59')
        }
        this.timeRange = [s, end]
      }
    },
    disabledDate(time) {
      // if (this.startTime) {
      //   if (time.getTime() < this.startTime.getTime()) {
      //     return time.getTime() < (this.startTime.getTime() - (24 * 60 * 60 * 1000 * 7))
      //   } else {
      //     return time.getTime() > (this.startTime.getTime() + (24 * 60 * 60 * 1000 * 7))
      //   }
      // }
    },
    initDialog(dialogFormVisible, devIds) {
      this.dialogFormVisible = dialogFormVisible
      this.form.devIds = devIds
      this.timeRange = []
    },
    saveData() {
      this.loading = true
      syncRecords(this.form).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.loading = false
          this.$message.success('Synchronize successfully')
          this.dialogFormVisible = false
          this.$emit('watchChild')
        }
      }).catch((res) => {
        this.loading = false
      })
    },
    cancel() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>
<style scoped>
  .demonstration {
    font-size: 14px;
    color: #606266;
  }
  .data-pick {
    display: table;
    margin: 0 auto;
  }
</style>