<template>
  <el-dialog v-loading="loading" :visible.sync="dialogFormVisible" title="重新获取识别记录" append-to-body>
    <div class="block data-pick">
      <el-row>
        <p>选择起止日期</p>
        <el-date-picker
          v-model="dateRange"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          type="daterange"
          size="small"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="left"
        />
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveData">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { syncAndGenerate } from '@/api/attendance'
import * as moment from 'moment'
export default {
  name: 'SyncAndGenerate',
  data() {
    return {
      loading: false,
      dialogFormVisible: false, // 对话框是否显示
      beginDate: '',
      form: {
        beginDate: '',
        endDate: ''
      },
      dateRange: [],
      pickerOptions: {
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const end = moment().subtract(1, 'days')
            const start = moment().subtract(1, 'days')
            // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三天',
          onClick(picker) {
            const end = moment().subtract(1, 'days')
            const start = moment().subtract(3, 'days')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = moment().subtract(1, 'days')
            const start = moment().subtract(7, 'days')
            picker.$emit('pick', [start, end])
          }
        }],
        onPick: (time) => {
          if (!time.maxDate) {
            this.beginDate = time.minDate
          }
        },
        disabledDate: (time) => {
          const v = 24 * 60 * 60 * 1000
          if (this.beginDate) {
            if (time.getTime() < this.beginDate.getTime()) {
              return time.getTime() < (this.beginDate.getTime() - (v * 7))
            } else {
              return time.getTime() > (((this.beginDate.getTime() + (v * 7)) > (Date.now() - v) ? (Date.now() - v) : this.beginDate.getTime() + (v * 7)))
            }
          }
          return time.getTime() > Date.now() - v
        }
      }
    }
  },
  watch: {
    dateRange(val) {
      if (val && val.length > 0) {
        if (typeof val[0] !== 'string') {
          val[0] = val[0].format('YYYY-MM-DD')
        }
        if (typeof val[1] !== 'string') {
          val[1] = val[1].format('YYYY-MM-DD')
        }
        this.form.beginDate = val[0]
        this.form.endDate = val[1]
      } else {
        this.form.beginDate = ''
        this.form.endDate = ''
        this.beginDate = ''
      }
    }
  },
  methods: {
    initDialog(dialogFormVisible) {
      this.dialogFormVisible = dialogFormVisible
      this.dateRange = []
    },
    saveData() {
      this.loading = true
      // 全屏加载动画
      // const loading = this.$loading({
      //   lock: true,
      //   text: '数据处理中,请稍后...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // })
      syncAndGenerate(this.form).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.loading = false
          this.$message.success('获取成功')
          this.dialogFormVisible = false
          this.$emit('watchChild')
        } else {
          this.loading = false
          // this.$message.error(res.error)
        }
      }).catch((res) => {
        this.loading = false
        // this.$message.error(res.error)
      })
    },
    cancel() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>
<style scoped>
  .demonstration {
    font-size: 14px;
    color: #606266;
  }
  .data-pick {
    display: table;
    margin: 0 auto;
  }
</style>