<template>
  <div>
    <Echarts ref="echarts" :height="height" :option="myOptions" @click="handleEvent"></Echarts>
  </div>
</template>

<script>
import { merge } from 'lodash';
import propsDefault from './propsDefault';
export default {
  components: {
    Echarts: () => import('../../echarts')
  },
  name: 'ZxHistogram',
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    xAxisData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    yAxisData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    height: {
      type: [Number, String],
      default: '400px'
    },
    dataZoom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    myOptions() {
      let option = merge({}, propsDefault, this.option);
      if (this.xAxisData && this.xAxisData.length) {
        option.xAxis.data = this.xAxisData;
      }
      if (this.yAxisData && this.yAxisData.length) {
        option.series = this.yAxisData;
      }
      return option;
    }
  },
  methods: {
    handleEvent(params) {
      this.$emit('click', params);
    },
    clear() {
      this.$refs.echarts.clear();
    }
  },
  watch: {
    dataZoom: {
      handler(value) {
        if (value) {
          propsDefault.dataZoom = [
            //滚动组件参数上下两个的必须，注意点是end的不宜过大根据效果进行调整
            {
              show: true,
              realtime: true,
              height: 5,
              start: 0,
              end: 50
            },
            {
              type: 'inside',
              show: true,
              realtime: true
            }
          ];
        } else {
          propsDefault.dataZoom = [];
        }
      },
      immediate: true, //刷新加载 立马触发一次handler
      deep: true // 可以深度检测到 person 对象的属性值的变化
    }
  }
};
</script>
