<!--
 * @Description: 各话务员总话务量
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div>
    <ve-line :data="chartData" :extend="extend" :title="title" :settings="chartSettings"/>
  </div>
</template>

<script>
export default {
  name: 'CallTimeLine',
  props: {
    data: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      tableOption: {
        head: {
          show: false, // 是否需要标题栏，
          text: '数据列表' // 标题名称
        },
        options: {
          needIndex: false // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      }, // 表格属性
      size: 'small',
      extend: {
        series: {
          label: { show: true, position: 'top' },
          barMaxWidth: 35 // 最大柱宽度
        },
        yAxis: {
          max: 10 // y轴最大值
        }
      },
      grid: { right: 60 },
      title: { text: '' },
      chartSettings: {
        itemStyle: {
          'barCategoryGap': 5
        },
        barWidth: 15,
        labelMap: {
          'seat': '坐席',
          'onLineInTime': '在线呼入时长（分）',
          'onLineOutTime': '在线呼出时长（分）',
          'onLineFreeTime': '在线空闲时长（分）',
          'onLineTotalTime': '总在线时长（分）',
          'busyTotalTime': '总置忙入长（分）'
        }
      },
      chartData: {
        columns: ['seat', 'onLineInTime', 'onLineOutTime', 'onLineFreeTime', 'onLineTotalTime', 'busyTotalTime'],
        rows: []
      }
    }
  },
  watch: {
    data(val) {
      this.chartData.rows = this.data
      const maxValue = Math.max.apply(Math, this.data.map(function(item) { return item.caseNum }))
      if (maxValue < 10) {
        this.extend.yAxis = { max: 10 }
      } else {
        this.extend.yAxis = {}
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>