var demo_str = `
  <div class="select_date">
      <div class="date_list">
          <div class="filter_time_item filter_time1" :class="{ 'current_date': numRange === 1 }"
              @click="handleChangeNumDateType(1)">昨日</div>
          <div class="filter_time_item filter_time2" :class="{ 'current_date': numRange === 7 }"
              @click="handleChangeNumDateType(7)">近七日</div>
          <div class="filter_time_item filter_time3" :class="{ 'current_date': numRange === 30 }"
              @click="handleChangeNumDateType(30)">近30日</div>
          <div class="filter_time_item filter_time4" :class="{ 'current_date': numRange === 3 }"
              @click="handleChangeNumDateType(3)">自定义</div>
            <van-calendar type="range" v-model="showDate" @confirm="onConfirm" color="#1677FF" :min-date="minDate"
                :max-date="maxDate" :allow-same-day="true"></van-calendar>
      </div>
  </div>
`
var demoComponent = Vue.extend({
  template:demo_str ,
  data:function(){
        return {
            numRange: 7,
            currentDate: [],
            showDate: false,
            minDate: '',
            maxDate: '',
        }
  },
  props: {
    pageDate: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    pageDate: {
      handler(newVal, oldVal) {
        if (newVal.length) {
          this.currentDate = newVal
          if (this.currentDate[0] === this.getDateTime(-1) && this.currentDate[1] === this.getDateTime(-1)) {
            this.numRange = 1
          } else if (this.currentDate[0] === this.getDateTime(-7) && this.currentDate[1] === this.getDateTime(-1)) {
            this.numRange = 7
          } else if (this.currentDate[0] === this.getDateTime(-30) && this.currentDate[1] === this.getDateTime(-1)) {
            this.numRange = 30
          } else {
            this.numRange = 3
          }
        }
      },
      deep: true
    }
  },
  created() {
    let nowDat = new Date()
    let dateY = nowDat.getFullYear()
    let dateM = nowDat.getMonth()
    let dateD = nowDat.getDate()
    // 设置日期可选最小值minDate、最大值maxDate
    this.minDate = new Date(dateY - 100, dateM, dateD)
    //日历可选范围为一年，dateY + 1
    this.maxDate = new Date(dateY, dateM, dateD - 1)
    if (this.pageDate.length) {
      this.currentDate = this.pageDate
      if (this.currentDate[0] === this.getDateTime(-1) && this.currentDate[1] === this.getDateTime(-1)) {
        this.numRange = 1
      } else if (this.currentDate[0] === this.getDateTime(-7) && this.currentDate[1] === this.getDateTime(-1)) {
        this.numRange = 7
      } else if (this.currentDate[0] === this.getDateTime(-30) && this.currentDate[1] === this.getDateTime(-1)) {
        this.numRange = 30
      } else {
        this.numRange = 3
      }
      this.$emit('change-date', this.currentDate)
        }
  },
  methods: {
    handleChangeNumDateType(type) {
          this.numRange = type
          if (type === 3) { 
            this.showDate = true
          } else {
            if (type === 1) {
                this.currentDate = [this.getDateTime(-type), this.getDateTime(-1)]
            } else if (type === 7) {
                this.currentDate = [this.getDateTime(-type), this.getDateTime(-1)]
            } else if (type === 30) {
                this.currentDate = [this.getDateTime(-type), this.getDateTime(-1)]
            }
            this.$emit('change-date', this.currentDate)
          }
      },
    onConfirm(date) {
      const [start, end] = date
      this.currentDate = [this.formatDate(start), this.formatDate(end)]
      if (this.formatDate(new Date()) === this.currentDate[1]) {
        this.currentDate[1] = this.formatDate(start)
      }
      this.showDate = false
      this.$emit('change-date', this.currentDate)
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    getDateTime (day) {
        let today = new Date()
        let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
        today.setTime(targetday_milliseconds)
        let tYear = today.getFullYear()
        let tMonth = today.getMonth() + 1
        let tDate = today.getDate()
        if (tMonth < 10) {
            tMonth = '0' + tMonth
        }
        if (tDate < 10) {
            tDate = '0' + tDate
        }
        return tYear + '-' + tMonth + '-' + tDate
    },
  },
})

Vue.component('select-date',demoComponent )  //注：此处my-demo就是html中组件的名字

