<template>
  <div :id="id" :style="{ width: width, height: height }"></div>
</template>

<script>
import { chartOptionMixins } from "@/views/analyse/custom/mixins";
import { random } from "@/utils";

export default {
  mixins: [chartOptionMixins],
  name: "CHeat",
  data() {
    return {
      id: 'heat'
    }
  },
  mounted() {
  },
  methods: {
    getOption() {
      if (this.form.schema.x.ptype === 2) {
        this.dateTimeSort()
      }
      let data = [], x = this.selected.x, y = this.selected.y, max = 0
      for (let i = 0; i < x.length; i++) {
        for (let j = 0; j < y.length; j++) {
          if (x[i] && y[j]) {
            let val = this.getDataCount(x[i], y[j]) || undefined
            data.push([i, j, val])
            if (val > max) {
              max = val
            }
          }
        }
      }
      return {
        tooltip: {
          trigger: 'item',
        },
        grid: {
          top: this.form.setting.gridTop + '%',
          left: this.form.setting.gridLeft + '%',
          right: this.form.setting.gridRight + '%',
          bottom: this.form.setting.gridBottom + '%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          name: this.getAxisName('title1'),
          nameTextStyle: this.getNameTextStyle('x'),
          nameLocation: this.form.setting.nameLocation,
          axisLabel: this.getAxisLabel('category', 'x'),
          data: x,
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          name: this.getAxisName('title2'),
          axisLabel: this.getAxisLabel('category', 'y'),
          nameTextStyle: this.getNameTextStyle('y'),
          nameLocation: this.form.setting.nameLocation2,
          data: y,
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: max,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          show: false,
          inRange: {
            color: this.form.setting.config.color.map(item => item.color)
          }
        },
        series: [
          {
            name: '',
            type: 'heatmap',
            data: data,
            label: this.getDataLabel(),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
  }
}
</script>
