<template>
  <div>
    <Echart :options="options" id="bottomLeftChart" height="220px" width="100%" ref="myChart"></Echart>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  export default {
    data () {
      return {
        options: {}
      }
    },
    components: {
      Echart
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({})
      }
    },
    watch: {
      cdata: {
        handler (newData) {
          this.options = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              show: false
            },
            color: [
              '#73c0D1',
              '#5470c6'
            ],
            textStyle: {
              fontSize: 20
            },
            yAxis: {
              type: 'category',
              data: ['房间', '床位'],
              axisLabel: {
                fontSize: 20
              }
            },
            series: [{
                name: '入住数',
                type: 'bar',
                stack: 'total',
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: this.cdata.seriesData.map(item => item.value2)
              },
              {
                name: '总数',
                type: 'bar',
                stack: 'total',
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: this.cdata.seriesData.map(item => item.value)
              }
            ]
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
    },
    mounted () {
      const myChart = this.$refs['myChart'].chart
      // 柱状图点击事件
      myChart.on('click', (params) => {
        if (params.seriesName == '总数') {
          this.$router.push({
            path: '/room/list'
          })
        } else {
          this.$router.push({
            path: '/room/checkin'
          })
        }
      })
    }
  }
</script>
