<template lang="pug">
  el-date-picker(v-model="dateTime"  size="small" type="daterange" align="right", unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
    :picker-options="dateOptions" :clearable="false" clearable @change="handleChange" value-format="timestamp")
</template>

<script>
import { rangeDays } from "@/utils/date";

export default {
  name: "comp-datePick",
  props: {
    dateRange: {
      type: Array,
      default: () => [] // 工厂函数
    }
  },
  data() {
    return {
      // 日期时间
      dateTime: [],
      // 日期组件选项
      dateOptions: {
        shortcuts: [
          {
            text: "最近 30 天",
            onClick(picker) {
              picker.$emit("pick", [rangeDays(-31), rangeDays(-1)]);
            }
          },
          {
            text: "最近 60 天",
            onClick(picker) {
              picker.$emit("pick", [rangeDays(-61), rangeDays(-1)]);
            }
          },
          {
            text: "最近 90 天",
            onClick(picker) {
              picker.$emit("pick", [rangeDays(-91), rangeDays(-1)]);
            }
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  mounted() {},
  methods: {
    handleChange(date) {
      this.$emit("update:dateRange", date);
    }
  }
};
</script>

<style scoped lang="stylus"></style>
