<template>
  <v-chart :force-fit="true" :height="height" :data="dataSource" :padding="[0, 0, 40, 60]">
    <v-axis
      data-key="name"
      :title="{ text: title, textStyle: { fill: '#5b9cba', fontSize: 14 }, offset: 45 }"
      :label="{ textStyle: { fill: '#ade6ee' } }"
      :grid="{ lineStyle: { stroke: '#406979', strokeOpacity: 0.2, lineDash: [0, 0] } }"
      :line="{ stroke: '#406979', strokeOpacity: 0.5 }"
    />
    <v-axis
      data-key="time"
      :label="{ textStyle: { fill: '#ade6ee' }, offset: 25 }"
      :grid="{ lineStyle: { stroke: '#406979', strokeOpacity: 0.2, lineDash: [0, 0] }, hideLastLine: true }"
      :line="{ stroke: '#406979', strokeOpacity: 0.5 }"
      :tick-line="null"
    />
    <v-polygon position="time*name" shape="custom" :v-style="{ lineWidth: 0 }" />
  </v-chart>
</template>

<script>
import { registerShape } from 'viser-vue'

registerShape('polygon', 'custom', {
  draw: function(cfg, container) {
    const color = cfg.origin._origin.color // 颜色,取自datasource原始数据中的color

    // 绘制色块
    return color
      ? container.addShape('rect', {
          attrs: {
            x: cfg.x - 32,
            y: cfg.y - 10,
            width: 32,
            height: 20,
            fill: color,
            stroke: color
          }
        })
      : null
  }
})

const timeList = [
  '08:00\n04/06',
  '10:00\n04/06',
  '12:00\n04/06',
  '14:00\n04/06',
  '16:00\n04/06',
  '18:00\n04/06',
  '20:00\n04/06',
  '22:00\n04/06',
  '00:00\n04/07',
  '02:00\n04/07',
  '04:00\n04/07',
  '06:00\n04/07',
  // '08:00\n04/07'
]

const typeList = ['MET', 'SOH', 'QC', 'PHD']

export default {
  props: {
    legendList: {
      type: Array
    },
    height: {
      type: Number,
      default: 250
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      dataSource: []
    }
  },
  created() {
    const dataSource = typeList.reduce((prev, type) => {
      return prev.concat(
        timeList.map(time => {
          return {
            name: type,
            color: '',
            time
          }
        })
      )
    }, [])

    dataSource[36].color = '#d3ad16'
    dataSource[37].color = '#d3ad16'
    dataSource[38].color = '#d3ad16'
    dataSource[39].color = '#d3ad16'
    dataSource[40].color = '#db6423'
    dataSource[41].color = '#17a840'
    dataSource[42].color = '#17a840'
    dataSource[43].color = '#17a840'
    dataSource[44].color = '#17a840'
    dataSource[45].color = '#17a840'
    dataSource[46].color = '#8c6513'
    dataSource[47].color = '#d3ad16'
    dataSource[28].color = '#1c82eb'
    dataSource[34].color = '#1c82eb'

    this.dataSource = dataSource
  }
}
</script>

<style></style>
