<template>
  <div class="data-range-container">
    <el-button type="primary" @click="previous">前一周</el-button>
    <el-date-picker
      v-model="datePrivate"
      type="week"
      format="yyyy 第 WW 周"
      :picker-options="dateOption"
      placeholder="选择周">
    </el-date-picker>
    <el-button type="primary" @click="next">后一周</el-button>
  </div>
</template>

<script>
  import {GetDateStr} from '@/utils/util'
  export default {
    name: 'date-signal',
    props: {
      value:{ // 必须要使用value
        default: ()=>([]),
      },
      offset:{ // 必须要使用value
        default: 0,
      },
    },
    data() {
      return {
        datePrivate: '',
        dateOption:{
          firstDayOfWeek: 1,
          disabledDate: (time) => {
            return time.getTime() > this.today;
          }
        },
      }
    },
    computed: {
      today: {
        get: function(){
          return (new Date()).getTime()
        },
      },
      weekTime: {
        get: function(){
          return 7*(24*60*60*1000)
        },
      },
    },
    watch:{
      value(val) {
        let date = val.replace(/-/g,'/')
        let time = (new Date(date)).getTime()
        if(time !== this.datePrivate.getTime()){
          this.datePrivate = new Date(date)
        }
      },
      datePrivate(val) {
        val = val.getTime()
        let arr=['', '']
        if (val) {
          arr = [GetDateStr(val,0), GetDateStr(val,7)]
        }
        this.$emit('input', arr)
      },
    },
    mounted(){
      // console.log(this.total)
      let current=new Date()
      this.datePrivate = new Date(current.getTime() - this.weekTime*this.offset)
    },
    methods: {
      next(){
        let current=this.datePrivate?this.datePrivate:new Date()
        this.datePrivate = new Date(current.getTime() + this.weekTime)
      },
      previous(){
        let current=this.datePrivate?this.datePrivate:new Date()
        this.datePrivate = new Date(current.getTime() - this.weekTime)
      }
    },
  }
</script>

<style scoped>
  .page-container{
    padding:30px 10px
  }
</style>
