<template>
  <div :style="{ padding: '0 0 32px 20px' }">
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="padding">
      <v-coord type="rect" direction="LB" />
      <v-tooltip/>
      <v-axis dataKey="x" :label="IAxisLabel"/>
      <v-axis dataKey="y" :label="null" />
      <v-bar position="x*y" :color="barColor" :label="stackLabel"/>
    </v-chart>
  </div>
</template>

<script>
  import { triggerWindowResizeEvent } from '@/utils/util'

  const DataSet = require('@antv/data-set');

  const IAxisLabel= {
    offset: 10,
  }

  export default {
    name: 'BaseBar',
    props: {
      dataSource: {
        type: Array,
        required: true
      },
      yaxisText: {
        type: String,
        default: 'y'
      },
      title: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 254
      },
      barColor: {
        type: Array,
        default: []
      },
      padding: {
        type: Array,
        default: ['auto', 'auto', '40', '50']
      },
    },
    data() {
      return {
        IAxisLabel
      }
    },
    computed: {
      scale() {
        return [{
          dataKey: 'y',
          alias: this.yaxisText,
          minTickInterval: 1,
        }]
      },
      data() {
        const dv = new DataSet.View().source(this.dataSource)
        dv.transform({
          type: 'fold',
          fields: ['value'],
          key: 'city',
          value: 'y',
        })
        let rows =  dv.rows
        return rows
      },
      stackLabel(){
        return ['y', {
        formatter: function formatter(text) {
          return text;
        },
        offset: 5
      }]
      }
    },
    mounted() {
      triggerWindowResizeEvent()
    }
  }
</script>