<template>
  <div class="test" :style="{width:'50%',height:height+'px'}">
      <DisplaySwitch
        :mytitle="mytitle"
        :option="option"
        :events = "events"
        :events-action = "eventsAction"
        :x-lable = "xLable"
        :table-height= "height - 39"
        :legendData="legendData"
        :timeTabShow="true"
        :option_month="option_month"
        :loading_month="loading_month"
        :option_week="option_week"
        :loading_week="loading_week">
      </DisplaySwitch>
  </div>
</template>

<script>
import components from '../../components/index'
export default {
  data(){
      return {
          option:{
            xAxis: {
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'bar'
            }]
          },
          option_month: {},
          loading_month: false,
          option_week: {},
          loading_week: false,
          mytitle:'测试组件',
          events:['click'],
          legendData:['数据'],
          xLable:'星期',
          height:500
      }
  },
  components,
  mounted(){
      window.onresize = ()=> {
          this.height = document.querySelector('#app').offsetHeight - 100;
      }
      this.getWeekData();
      this.getMonthData();
  },
  methods:{
      eventsAction(params){
          console.log(params);
          this.$alert(params.name+':'+params.value);
      },
      downloadMethod(a, b){
          console.log(a)
          console.log(b)
      },
      getMonthData(){
            this.loading_month = true;
          setTimeout(() => {
                this.loading_month = false;
                this.option_month ={
                    xAxis: {
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                    }]
                };
          }, 2000)
      },
      getWeekData(){
        this.loading_week = true;
        setTimeout(() => {
            this.loading_week = false;
            this.option_week = {
                xAxis: {
                    data: ['一', '二', '三', '四', '五', '六', '七'],
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'bar'
                }]
            };
        }, 6000)
      }
  }
}
</script>

<style scoped>
.test{
    width: 500;
    height: 500;
    position: relative;
}
</style>
