<template>
  <div class="thicknessDistributionChart">
    <div class="top-table">
      <ul>
        <li>转换速度：32654654</li>
        <li>配方类型：G8.5-0943</li>
        <li>玻璃索引：56565</li>
        <li>等级：G1</li>
        <li></li>
      </ul>
      <ul>
        <li class="red-tip">最大值：235454</li>
        <li class="blue-tip">最小值：5652356</li>
        <li class="purple-tip">平均值：6856532656</li>
        <li class="green-tip">厚度差：656413212</li>
        <li class="yellow-tip">研磨类型：4ABC</li>
      </ul>
    </div>
    <div>
      <span class="title">玻璃ID：46745386415274874</span>
    </div>
    <div
      id="thicknessChart"
      style="width: 100%"
      :style="{ height: chartHeight + 'px' }"
    />
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { tableHeight } from '@/utils/index'
import resize from '@/utils/chartMixins/resize'
export default {
  name: 'thicknessDistributionChart',
  mixins: [resize],
  data() {
    return {
      chartDom: '',
      chart: '',
      chartHeight: tableHeight(320)
    }
  },
  mounted() {
    this.chartDom = document.getElementById('thicknessChart')
    this.chart = echarts.init(this.chartDom)
    this.getChart()
    window.addEventListener('resize', () => {
      this.chartHeight = tableHeight(320)
    })
  },
  methods: {
    getChart() {
      let long = []
      for (let i = 1; i <= 21; i++) {
        long.push(i)
      }
      let wide = []
      for (let i = 1; i <= 7; i++) {
        wide.push(i)
      }
      const data = []
      for (let k = 0; k < long.length; k++) {
        for (let j = 0; j < wide.length; j++) {
          let arr = []
          arr[0] = k
          arr[1] = j
          arr[2] = parseInt(Math.random() * 80 + 470)
          data.push(arr)
        }
      }
      console.log(data)
      var option = {
        tooltip: {
          position: 'top'
        },
        grid: {
          height: '50%',
          top: '10%'
        },
        xAxis: {
          type: 'category',
          data: long,
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          data: wide,
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 470,
          max: 550,
          calculable: true,
          color: ['#FF8481', '#F9E35E', '#A6FF99', '#46EBE8', '#4572FF'],
          orient: 'horizontal',
          right: '9%',
          top: '3%'
        },
        series: [
          {
            name: 'Punch Card',
            type: 'heatmap',
            data: data,
            label: {
              show: true
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && this.chart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.thicknessDistributionChart {
  .top-table {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    ul {
      display: flex;
      flex-flow: row nowrap;
      li {
        color: rgba(0, 0, 0, 0.85);
        width: 20%;
        padding: 10px;
        border: 1px solid rgba(232, 232, 232, 1);
      }
      .red-tip {
        color: rgba(255, 78, 78, 0.85);
      }
      .blue-tip {
        color: rgba(80, 125, 215, 1);
      }
      .purple-tip {
        color: rgba(152, 83, 255, 0.85);
      }
      .green-tip {
        color: rgba(80, 187, 144, 1);
      }
      .yellow-tip {
        color: rgba(236, 180, 65, 1);
      }
    }
  }
  .title {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }
  .title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #0b58ff;
    border-radius: 1px;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>
