<template>
    <div class="com-trs">
        <div ref="refEcharts" class="chart-slider"></div>
    </div>
</template>

<script>
export default {
    name: 'TimeRangeSelector',
    props: {
        value: {
            type: Object,
            default: () => {
                return {
                    start: 0,
                    end: 100
                }
            }
        }
    },
    watch: {
        value: {
            handler(val) {
                this.parentValueChange = true;
                this.setTimeRange(val.start * 100, val.end * 100);
            },
            deep: true
        }
    },
    data() {
        return {
            insECharts: null,
            parentValueChange: false
        }
    },
    mounted() {
        this.initEcharts();
    },
    methods: {
        initEcharts() {
            if(!this.insECharts) {
                this.insECharts = this.$echarts.init(this.$refs.refEcharts);
            }

            const option = {
                grid: {
                    left: 10,
                    right: 10,
                    top: 10,
                    bottom: 10
                },
                tooltip: {},

                dataZoom: [
                    {
                        type: 'slider'
                    },
                ],
                xAxis: { show: false } ,
                yAxis: { show: false },

            };

            this.insECharts.on('dataZoom', (evt) => {
                if(this.parentValueChange) {
                    this.parentValueChange = false;
                    return;
                }
                this.$emit('change', {
                    start: evt.start / 100,
                    end: evt.end / 100
                })
                this.$emit('input', {
                    start: evt.start / 100,
                    end: evt.end / 100
                })
            })

            this.insECharts.setOption(option);
        },
        setTimeRange(start, end) {
            this.insECharts.dispatchAction({
                type: 'dataZoom',
                // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
                dataZoomIndex: 0,
                // 开始位置的百分比，0 - 100
                start: start,
                // 结束位置的百分比，0 - 100
                end: end,
                // // 开始位置的数值
                // startValue: number,
                // // 结束位置的数值
                // endValue: number
            });

        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.com-trs {
    width: 100%;
    height: 50px;
}

.chart-slider {
    width: 100%;
    height: 100%;
}
</style>