<template>
  <div>
    <div ref="myChartTitle" style="text-align: center;height: 16px;font-weight: 600;font-size: 14px;line-height:16px">{{config.title}}</div>
    <canvas ref="myChart"></canvas>
  </div>
</template>

<script>
const F2 = require('@antv/f2/lib/index');
// 引入所有的交互行为
require('@antv/f2/lib/interaction/');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    config: {
      type: Object,
      default: () => {}
    },
    width: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: ''
    }
  },
  watch: {
    data: {
      handler(newV) {
        this.$nextTick(() => {
          if(newV.length > 0) {
            this.draw()
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      $__el: null,
      $__myChartTitle: null
    }
  },
  mounted() {
    this.$__el = this.$refs.myChart
    this.$__myChartTitle = this.$refs.myChartTitle
    const myChart = this.$__el
    const mychartTitle = this.$__myChartTitle
    myChart.style.width = this.width ? this.width + 'px' : '100%'
    myChart.style.height = this.height + 'px'
    mychartTitle.style.width = this.width ? this.width + 'px' : '100%'
  },
  methods: {
    draw() {
      const x = Object.keys(this.data[0])[0]
      const y = Object.keys(this.data[0])[1]
      const config = this.config
      //y坐标轴上刻度点的个数
      let yTickCount
      if (config && config.y && config.y.tickCount) { 
        yTickCount = config.y.tickCount 
      } else {
        yTickCount = 5
      }
      //x坐标轴上刻度点的个数
      let xTickCount
      if (config && config.x && config.x.tickCount) { 
        xTickCount = config.x.tickCount 
      } else {
        xTickCount = 5
      }
       //y坐标轴名称
      let yName
      if (config && config.y && config.y.name) { 
        yName = config.y.name 
      } else {
        yName = ''
      }
      //颜色
      let color = '#1890ff'
      if (config && config.color) {
        color = config.color
      }
      //多类型颜色
      let colorList = []
      if (config && config.colorList) {
        colorList = config.colorList
      }
      const chart = new F2.Chart({
        el: this.$__el,
        pixelRatio: window.devicePixelRatio,
        plugins: ScrollBar
      })
      const values=[]
      const defs = {
        [y]: {
          tickCount: yTickCount,
          min: 0
        },
        [x]: {
          type: 'cat',
          range: [0,1],
          tickCount:xTickCount,
        }
      }
      //x轴滚动条
      if(config && config.xScroll) {
        this.data.forEach((item,index) => {
          if(index < xTickCount){
            values.push(item[x])
          }
        })
        chart.interaction('pan');
        chart.scrollBar({
          mode: 'x',
          xStyle: {
            offsetY: -5
          }
        });
        defs[x].values = values
      }
      //加载数据
      chart.source(this.data, defs)

      if(config && config.tooltip) {
        chart.tooltip({
          showCrosshairs: true,
          showItemMarker: true,
          showXTip: true
        });
      } else {
        chart.tooltip(false)
      }
      if (config && config.area) {
        if (colorList.length !== 0) {
          chart.area().position(`${x}*${y}`).color(color, colorList) 
        } else {
          chart.area().position(`${x}*${y}`).color(color) 
        }
      }
      if (colorList.length !== 0) {
        chart.line().position(`${x}*${y}`).color(color, colorList)
      } else {
        chart.line().position(`${x}*${y}`).color(color)
      }
      if(config && config.point) {
        chart.point().position(`${x}*${y}`).style({
          lineWidth: 1,
          stroke: '#fff'
        }).color(color);
      }
      //y坐标轴名称
      chart.guide().text({
        position: ['min', 'max'],
        content: yName,
        style: {
          textBaseline: 'middle',
          textAlign: 'left',
          fontSize: '9'
        },
        offsetY: -15,
        offsetX: -30
      });
      chart.render();
    }
  }
}
</script>
