<script>
function getStartTime() {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}-${month}-${day} 00:00:00`
}
const pickerOptions = {
  shortcuts: [
    {
      text: '今日',
      onClick(picker) {
        const start = new Date(
          new Date(getStartTime()).getTime(),
        )
        const end = new Date()
        picker.$emit('pick', [start, end])
      },
    },
    {
      text: '昨天',
      onClick(picker) {
        const start = new Date()
        const end = new Date(
          new Date(getStartTime()).getTime() - 1,
        )
        start.setTime(
          end.getTime() - 3600 * 1000 * 24 * 1 + 1,
        )
        console.log(start, end)
        picker.$emit('pick', [start, end])
      },
    },
    {
      text: '最近7天',
      onClick(picker) {
        const end = new Date()
        const start = new Date(getStartTime())
        start.setTime(
          start.getTime() - 3600 * 1000 * 24 * 6,
        )
        picker.$emit('pick', [start, end])
      },
    },
    {
      text: '最近14天',
      onClick(picker) {
        const end = new Date()
        const start = new Date(getStartTime())
        start.setTime(
          start.getTime() - 3600 * 1000 * 24 * 13,
        )
        picker.$emit('pick', [start, end])
      },
    },
    {
      text: '最近30天',
      onClick(picker) {
        const end = new Date()
        const start = new Date(getStartTime())
        start.setTime(
          start.getTime() - 3600 * 1000 * 24 * 29,
        )
        picker.$emit('pick', [start, end])
      },
    },
    {
      text: '本星期',
      onClick(picker) {
        const end = new Date()
        const start = new Date()
        const nowDay = new Date().getDay() - 1
        start.setTime(
          new Date(getStartTime()).getTime() -
            3600 * 1000 * 24 * nowDay,
        )
        picker.$emit('pick', [start, end])
      },
    },
    {
      text: '上星期',
      onClick(picker) {
        const end = new Date()
        const start = new Date()
        const nowDay = new Date().getDay() - 1
        end.setTime(
          new Date(getStartTime()).getTime() -
            3600 * 1000 * 24 * nowDay -
            1,
        )
        start.setTime(
          end.getTime() - 3600 * 1000 * 24 * 7 + 1,
        )
        picker.$emit('pick', [start, end])
      },
    },
    {
      text: '这个月',
      onClick(picker) {
        const end = new Date()
        const start = new Date()
        const nowDate = new Date().getDate() - 1
        start.setTime(
          new Date(getStartTime()).getTime() -
            3600 * 1000 * 24 * nowDate,
        )
        picker.$emit('pick', [start, end])
      },
    },
    {
      text: '上个月',
      onClick(picker) {
        const date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth()
        const end = new Date(
          new Date(
            `${year}-${month + 1}-1 00:00:00`,
          ).getTime() - 1,
        )
        if (month === 0) {
          month = 12
          year = year - 1
        }
        const start = new Date(
          new Date(`${year}-${month}-1 00:00:00`).getTime(),
        )
        picker.$emit('pick', [start, end])
      },
    },
    {
      text: '历史',
      onClick(picker) {
        picker.$emit('pick', ['', ''])
      },
    },
  ],
}
export default {
  name: 'choose-time-period',
  props: {
    periodTime: {
      type: Array,
      default: () => {},
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: '时间',
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss',
    },
    type: {
      type: String,
      default: 'datetimerange',
    },
    align: {
      type: String,
      default: 'left',
    },
  },
  model: {
    prop: 'periodTime',
    event: 'setVal',
  },
  render() {
    return (
      <el-date-picker
        type={this.type}
        value={this.periodTime}
        clearable={this.clearable}
        onInput={(v) => this.$emit('setVal', v)}
        range-separator="-"
        value-format={this.format}
        start-placeholder={`开始${this.placeholder}`}
        end-placeholder={`结束${this.placeholder}`}
        style="width:200px"
        default-time={['00:00:00', '23:59:59']}
        picker-options={pickerOptions}
        align={this.align}
      ></el-date-picker>
    )
  },
}
</script>
