<template>
<!-- 组件使用时 需要传入属性 openOptions：true|false 控制是否打开
    left ：string|0  left为侧边的按钮的定位 0 表示不改变 或者传入字符串 如-100px 表示css中left：-100px
 -->
    <div class="datePicker">
        <a-range-picker
            v-model="dateValue"
            style="width:250px;height:150px"
            :open='openOptions'
             :disabled-date="disabledDate"
             :openChange='openChange'
            @change="onChange" />
        <div class="pickOptions" v-show='openOptions' ref="pickOptions">
            <div v-for="item in pickOptions" :key="item.key" @click="changeDate(item)">{{item.title}}</div>
        </div>
    </div>
</template>


<script>
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:['openOptions','left'],
        data() {
            return {
                moment,
                dateValue:[],
                type:0,
                pickOptions
                // pickOptions:JSON.parse(JSON.stringify(pickOptions))
            }
        },
        
        methods: {
            //日期改变事件
            onChange(date,dateString){
                this.dateValue=date;
                // console.log(this.dateValue)
                if(dateString.length==2){
                    this.$parent.opendate();
                    this.$parent.type=9
                    this.$parent.dateValue=date
                };

            },
            //侧边的按钮点击事件
            changeDate(val){
                this.type=val.value
                this.dateValue=val.dateValue;
                //  console.log(this.dateValue)
                this.$parent.type=val.value
                this.$parent.dateValue=val.dateValue
            },
            
            disabledDate(current) {
            // console.log(current)

                return current && current > moment().subtract(1, 'day')
            },
            openChange(open){
                // console.log(open)
            },

        },
        mounted() {
            this.dateValue=[moment(),moment()]
            if(this.left){
                this.$refs.pickOptions.style.left=this.left
            }
            
            // console.log(this.$refs.pickOptions.style.left)
        },
    }
</script>

<style lang="scss" scoped>
.datePicker{
    position: relative;
    .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;
        div{
            height: 43px;           
            padding: 10px 15px;
            box-sizing: border-box;
            
        }
    }
}
</style>