<template>
    <div>
            <date-range @timeChange="timeChange" :time-arr="timeArr" label="日期范围" width="100" small="true" size="small"></date-range>
    </div>
</template>

<script>
  import dateRange from ‘../../selComponents/dateRange‘

  export default {
    components:{
      dateRange
    },
    data() {
      return {
        timeArr:[],
      };
    },
    methods: {
        timeChange(val){
          console.log(222)
          console.log(val);
        }

    },
    mounted(){
      // 默认回填数据
      this.timeArr = [‘2017-07-07‘,‘2018-09-09‘]


    }
  }
</script>
    

 <template>
    <div class="wrap">
        <div style="width:100%;">
            <span style="margin-top:0px;" :style="{‘width‘:width+‘px‘}" :class="{‘s-pre-small‘:small}">{{label}}</span>
            <el-date-picker
                style="width:100%;"
                  v-model="dateRange"
                  type="daterange"
                  align="right"
                  @change="timeChange"
                  placeholder="选择日期范围"
                  :picker-options="pickerOptions"
                  :size="size">
            </el-date-picker>
        </div>
    </div>
</template>

<script>
export default{
    props:{
        label:{
            default:‘所在区域‘
        },
        width:{
            default:‘80‘
        },
        small:{
            default:false
        },
        size:{
            default:‘false‘
        },
        timeArr:{
            default:[],
        }
        
    },
    data(){
        return {
            dateRange:this.timeArr,
            pickerOptions: {
              shortcuts: [{
                text: ‘最近一周‘,
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit(‘pick‘, [start, end]);
                }
              }, {
                text: ‘最近一个月‘,
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit(‘pick‘, [start, end]);
                }
              }, {
                text: ‘最近三个月‘,
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit(‘pick‘, [start, end]);
                }
              }]
            },
        }
    },
    watch:{
        timeArr(val){
            this.dateRange = val;
        }
    },
    methods:{
        timeChange(){
            let tempTimeArr = [utils.formateDate(this.dateRange[0]),utils.formateDate(this.dateRange[1])];
            this.$emit(‘timeChange‘,tempTimeArr);
        }
    },
    mounted(){
        
    }
}
</script>

<style lang="less" scoped>
    .wrap{
        width: 100%;
        margin:0 auto;
    }    
</style>