<template>
  
  <div class="datePicker" >
      <p
      :style="active == item.value ? 'color:cornflowerblue;background:#f2f2f2' : ''"
      v-for="(item, index) of pickOptions"
      :key="index"
      @click="changeDate(item)"
    >
      {{ item.title }}
    </p>
   
    <a-range-picker v-clickoutside="handleClose"
      v-model="mydateValue"
      style="width:250px;"
      :allowClear=false      
      :disabled-date="disabledDate"
      :openChange="openChange"
      @change="onChange"
    />
    
  </div>
</template>


<script>
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}
import moment from 'moment'
let pickOptions = [
  {
    title: '今天',
    key: '1',
    value: 1,
    dateValue: [moment(), moment()]
  },
  {
    title: '昨天',
    key: '2',
    value: 2,
    dateValue: [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
  },
  {
    title: '一周',
    key: '3',
    value: 3,
    dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')]
  },
  {
    title: '一个月',
    key: '5',
    value: 5,
    dateValue: [
      moment()
        .subtract(1, 'days')
        .subtract(1, 'months'),
      moment().subtract(1, 'days')
    ]
  },
  {
    title: '三个月',
    key: '6',
    value: 6,
    dateValue: [
      moment()
        .subtract(1, 'days')
        .subtract(3, 'months'),
      moment().subtract(1, 'days')
    ]
  },
  {
    title: '六个月',
    key: '7',
    value: 7,
    dateValue: [
      moment()
        .subtract(1, 'days')
        .subtract(6, 'months'),
      moment().subtract(1, 'days')
    ]
  },
  {
    title: '一年',
    key: '8',
    value: 8,
    dateValue: [
      moment().subtract(1, 'days').subtract(1, 'years'),
      moment().subtract(1, 'days')
    ]
  }
]

export default {
  props: ['dateValue','type'],
  data() {
    return {
      moment,
      mydateValue: [moment(),moment()],
      pickOptions,
      active:1
      // pickOptions:JSON.parse(JSON.stringify(pickOptions))
    }
  },
  directives: { clickoutside },
  watch: {
    type(newVal) {
      if (newVal) {
        this.active = newVal;
      }
    },
    parentDate(n,o){
        if(n[0].format('YYYY-MM-DD')!=this.mydateValue[0].format('YYYY-MM-DD')){
              this.mydateValue=n
        } 
    }
  },
  methods: {
    //日期改变事件
    onChange(date, dateString) {
      this.mydateValue = date
      this.active=9;
      console.log(this.mydateValue)
      if (dateString.length == 2) {   
        this.$emit('update:dateValue', this.mydateValue)
        this.$emit('update:type', 9)
      }
    },
    //侧边的按钮点击事件
    changeDate(val) {
        console.log(val);
        this.active=val.value;
        this.mydateValue = val.dateValue
      
        this.$emit('update:dateValue', this.mydateValue)
        this.$emit('update:type', val.value)
    },
    handleClose(e) {
        // console.log(e)
        if(e.target.className){
            if(e.target.className.indexOf('ant-calendar')==-1){
                // this.$parent.opendateClose()
            }
        }
            
      
    },
    disabledDate(current) {
        return current && current > moment()
    },
    openChange(open) {
      // console.log(open)
    }
  },
  mounted() {
    this.mydateValue = this.dateValue;
    this.active=this.type
    // console.log(this.$refs.pickOptions.style.left)
  }

}
</script>

<style lang="scss" scoped>
.datePicker {
  position: relative;
  display: flex;
  p{
      margin-bottom: 0;
      width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
  }
  .pickOptions {
    width: 100px;
    background-color: #fff;
    height: 302px;
    position: absolute;
    top: -2px;
    left: -402px;
    border-right: 1px solid #999;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 3;
    div {
      height: 43px;
      padding: 10px 15px;
      box-sizing: border-box;
    }
    .btn:hover{
        color: #1890ff;
    }
  }
}
</style>