<template>
  <div style=" width: 800px;">
    <div class="echart-box-hot">
      <EventLine
        :table-headers="TABLEHEADER['18']"
        show-btns="15"
        :is-show-lengeds="false"
        :contain-label="false"
        :is-show-data-zoom="true"
        :datas="multiData"
        :callback="hanlderEchartCallback"
        :tooltip-options="{
          trigger: 'item',
          formatter: function(params) {
            if (params.data && params.data.label && params.data.label.formatter) {
              return params.data.label.formatter;
            }
            return params.value;
          },
          rich: {
            stage: {
              fontWeight: 'bold',
              color: '#333'
            }
          },
          position: function(point, params, dom, rect, size) {
            return [point[0], point[1] - size.contentSize[1]];
          },
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#ccc',
          borderWidth: 1,
          padding: [10, 15],
          textStyle: {
            color: '#333'
          },
          confine: true,
          appendToBody: false
        }"
        @cellClick="handlerCellClick"
        @chart="handlerEchartImg"
      ></EventLine>
      <div style="height: 30px">
        <EventBar
          :datas="barDatas"
          :x-axis-max="xAxisMax"
          :callback="hanlderEchartCallback"
          @cellClick="handlerCellClick"
        >
        </EventBar>
      </div>
    </div>
    <div class="echart-box-hot">
      <EventLine
        :is-show-lengeds="false"
        :is-show-data-zoom="true"
        :lengeds="lengeds"
        grid-type="1"
        grid-left="60px"
        grid-right="60px"
        :datas="multiData2"
        :callback="hanlderEchartCallback"
        @cellClick="handlerCellClick"
        @chart="handlerEchartImg"
      ></EventLine>
    </div>
  </div>
</template>
<script>
import { EventLine, EventBar } from '@p/index.js'
import TABLEHEADER from '@u/echartTableHeader.js'
// import { values } from 'core-js/core/array'
export default {
  name: 'Events',
  components: {
    EventLine,
    EventBar
  },
  data() {
    return {
      lengeds: ['负面', '非负面'],
      xAxisMax: 23,
      barDatas: [
        {
          value: 3,
          name: '潜伏期',
          'start': '2020-04-15 00:00',
          'end': '2020-04-15 03:00'
        },
        {
          value: 2,
          name: '发酵期',
          'start': '2020-04-15 03:00',
          'end': '2020-04-15 05:00'
        },
        {
          value: 4,
          name: '爆发期',
          'start': '2020-04-15 05:00',
          'end': '2020-04-15 09:00'
        },
        {
          value: 4,
          name: '持续期',
          'start': '2020-04-15 09:00',
          'end': '2020-04-15 13:00'
        },
        {
          value: 6,
          name: '发酵期',
          'start': '2020-04-15 13:00',
          'end': '2020-04-15 19:00'
        },
        {
          value: 4,
          name: '衰退期',
          'start': '2020-04-15 19:00',
          'end': '2020-04-15 23:00'
        }
      ],
      barDatashenghe: [0, 0, 0, 0, 0, 0, 0, 0, 0, 2238],
      TABLEHEADER: TABLEHEADER,
      barMarkDataShengHe: []
    }
  },
  computed: {
    multiData() {
      const temp = {
        btime: '2020-04-15',
        etime: '2020-04-21',
        total: 84053,
        fumian: '15496',
        qbInfo: [
          [
            '2020-04-15 00:00',
            '2020-04-15 01:00',
            '2020-04-15 02:00',
            '2020-04-15 03:00',
            '2020-04-15 04:00',
            '2020-04-15 05:00',
            '2020-04-15 06:00',
            '2020-04-15 07:00',
            '2020-04-15 08:00',
            '2020-04-15 09:00',
            '2020-04-15 10:00',
            '2020-04-15 11:00',
            '2020-04-15 12:00',
            '2020-04-15 13:00',
            '2020-04-15 14:00',
            '2020-04-15 15:00',
            '2020-04-15 16:00',
            '2020-04-15 17:00',
            '2020-04-15 18:00',
            '2020-04-15 19:00',
            '2020-04-15 20:00',
            '2020-04-15 21:00',
            '2020-04-15 22:00',
            '2020-04-15 23:00'
          ],
          [
            89,
            443,
            395,
            405,
            315,
            390,
            626,
            928,
            {
              value: 1462,
              symbolSize: 4,
              label: {
                show: true,
                verticalAlign: 'top',
                formatter: '{stage|首次上榜:} 头条同城榜-南京：#南京全面取消...',
                rich: {
                  stage: {
                    fontWeight: 'bold',
                    color: '#333'
                  }
                }
              },
              tooltip: {
                show: true,
                trigger: 'item',
                formatter: function(params) {
                  return '{stage|首次上榜:}头条同城榜-南京：#南京全面取消...{stage|首次回应:}南京市房协副会长沈乡介绍今年\以...{stage|二次回应:}上海易居房地产研究院副院长严跃...'
                },
                position: function(point, params, dom, rect, size) {
                  return [point[0], point[1] - size.contentSize[1]]
                },
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: '#fff',
                borderWidth: 1,
                width: 400,
                padding: [10, 15],
                textStyle: {
                  color: '#000',
                  lineHeight: 20,
                  width: 400,
                  overflow: 'break',
                  wordBreak: 'break-all',
                  whiteSpace: 'pre-wrap'
                },
                extraCssText: 'width: 400px; white-space: pre-wrap; word-wrap: break-word;'
              }
            },
            326,
            613,
            667,
            69,
            160,
            339,
            550,
            233,
            328,
            426,
            517,
            27,
            19,
            13,
            15,
            16,
            698,
            389,
            292,
            263,
            240,
            342,
            525,
            756,
            89,
            485,
            374,
            24,
            14,
            22,
            19,
            23,
            24,
            12,
            9,
            13,
            11,
            16,
            14,
            659,
            533,
            321,
            266,
            297,
            296,
            511,
            292,
            767,
            { value: 424, symbolSize: 4, label: { show: true }},
            1471,
            1299,
            273,
            23,
            9
          ]
        ]
      }
      return {
        names: temp.qbInfo[0],
        values: [temp.qbInfo[1]]
      }
    },
    multiData2() {
      const temp = {
        btime: '2020-04-15',
        etime: '2020-04-21',
        total: 84053,
        fumian: '15496',
        qbInfo: [
          [
            '2020-04-15 00:00',
            '2020-04-15 01:00',
            '2020-04-15 02:00',
            '2020-04-15 03:00',
            '2020-04-15 04:00',
            '2020-04-15 05:00',
            '2020-04-15 06:00',
            '2020-04-15 07:00',
            '2020-04-15 08:00',
            '2020-04-15 09:00',
            '2020-04-15 10:00',
            '2020-04-15 11:00',
            '2020-04-15 12:00',
            '2020-04-15 13:00',
            '2020-04-15 14:00',
            '2020-04-15 15:00',
            '2020-04-15 16:00',
            '2020-04-15 17:00',
            '2020-04-15 18:00',
            '2020-04-15 19:00',
            '2020-04-15 20:00',
            '2020-04-15 21:00',
            '2020-04-15 22:00',
            '2020-04-15 23:00'
          ],
          [
            89,
            443,
            395,
            405,
            315,
            390,
            626,
            928,
            { value: 262, aaaa: '1111', symbolSize: 4, label: { show: true, position: 'top', formatter: '111111111111' }},
            326,
            613,
            667,
            69,
            160,
            339,
            550,
            233,
            328,
            426,
            517,
            27,
            19,
            13,
            15,
            16,
            698,
            389,
            292,
            263,
            240,
            342,
            525,
            756,
            89,
            485,
            374,
            24,
            14,
            22,
            19,
            23,
            24,
            12,
            9,
            13,
            11,
            16,
            14,
            659,
            533,
            321,
            266,
            297,
            296,
            511,
            292,
            767,
            { value: 424, symbolSize: 4, label: { show: true }},
            1471,
            1299,
            273,
            23,
            9
          ]
        ],
        zxInfo: [
          [
            '2020-04-15 00:00',
            '2020-04-15 01:00',
            '2020-04-15 02:00',
            '2020-04-15 03:00',
            '2020-04-15 04:00',
            '2020-04-15 05:00',
            '2020-04-15 06:00',
            '2020-04-15 07:00',
            '2020-04-15 08:00',
            '2020-04-15 09:00',
            '2020-04-15 10:00',
            '2020-04-15 11:00',
            '2020-04-15 12:00',
            '2020-04-15 13:00',
            '2020-04-15 14:00',
            '2020-04-15 15:00',
            '2020-04-15 16:00',
            '2020-04-15 17:00',
            '2020-04-15 18:00',
            '2020-04-15 19:00',
            '2020-04-15 20:00',
            '2020-04-15 21:00',
            '2020-04-15 22:00',
            '2020-04-15 23:00',
            '2020-04-16 00:00',
            '2020-04-16 01:00',
            '2020-04-16 02:00',
            '2020-04-16 03:00',
            '2020-04-16 04:00',
            '2020-04-16 05:00',
            '2020-04-16 06:00',
            '2020-04-16 07:00',
            '2020-04-16 08:00',
            '2020-04-16 09:00',
            '2020-04-16 10:00',
            '2020-04-16 11:00',
            '2020-04-16 12:00',
            '2020-04-16 13:00',
            '2020-04-16 14:00',
            '2020-04-16 15:00',
            '2020-04-16 16:00',
            '2020-04-16 17:00',
            '2020-04-16 18:00',
            '2020-04-16 19:00',
            '2020-04-16 20:00',
            '2020-04-16 21:00',
            '2020-04-16 22:00',
            '2020-04-16 23:00',
            '2020-04-17 00:00',
            '2020-04-17 01:00',
            '2020-04-17 02:00',
            '2020-04-17 03:00',
            '2020-04-17 04:00',
            '2020-04-17 05:00',
            '2020-04-17 06:00',
            '2020-04-17 07:00',
            '2020-04-17 08:00',
            '2020-04-17 09:00',
            '2020-04-17 10:00',
            '2020-04-17 11:00',
            '2020-04-17 12:00',
            '2020-04-17 13:00',
            '2020-04-17 14:00',
            '2020-04-17 15:00',
            '2020-04-17 16:00',
            '2020-04-17 17:00',
            '2020-04-17 18:00',
            '2020-04-17 19:00',
            '2020-04-17 20:00',
            '2020-04-17 21:00',
            '2020-04-17 22:00',
            '2020-04-17 23:00',
            '2020-04-18 00:00',
            '2020-04-18 01:00',
            '2020-04-18 02:00',
            '2020-04-18 03:00',
            '2020-04-18 04:00',
            '2020-04-18 05:00',
            '2020-04-18 06:00',
            '2020-04-18 07:00',
            '2020-04-18 08:00',
            '2020-04-18 09:00',
            '2020-04-18 10:00',
            '2020-04-18 11:00',
            '2020-04-18 12:00',
            '2020-04-18 13:00',
            '2020-04-18 14:00',
            '2020-04-18 15:00',
            '2020-04-18 16:00',
            '2020-04-18 17:00',
            '2020-04-18 18:00',
            '2020-04-18 19:00',
            '2020-04-18 20:00',
            '2020-04-18 21:00',
            '2020-04-18 22:00',
            '2020-04-18 23:00',
            '2020-04-19 00:00',
            '2020-04-19 01:00',
            '2020-04-19 02:00',
            '2020-04-19 03:00',
            '2020-04-19 04:00',
            '2020-04-19 05:00',
            '2020-04-19 06:00',
            '2020-04-19 07:00',
            '2020-04-19 08:00',
            '2020-04-19 09:00',
            '2020-04-19 10:00',
            '2020-04-19 11:00',
            '2020-04-19 12:00',
            '2020-04-19 13:00',
            '2020-04-19 14:00',
            '2020-04-19 15:00',
            '2020-04-19 16:00',
            '2020-04-19 17:00',
            '2020-04-19 18:00',
            '2020-04-19 19:00',
            '2020-04-19 20:00',
            '2020-04-19 21:00',
            '2020-04-19 22:00',
            '2020-04-19 23:00',
            '2020-04-20 00:00',
            '2020-04-20 01:00',
            '2020-04-20 02:00',
            '2020-04-20 03:00',
            '2020-04-20 04:00',
            '2020-04-20 05:00',
            '2020-04-20 06:00',
            '2020-04-20 07:00',
            '2020-04-20 08:00',
            '2020-04-20 09:00',
            '2020-04-20 10:00',
            '2020-04-20 11:00',
            '2020-04-20 12:00',
            '2020-04-20 13:00',
            '2020-04-20 14:00',
            '2020-04-20 15:00',
            '2020-04-20 16:00',
            '2020-04-20 17:00',
            '2020-04-20 18:00',
            '2020-04-20 19:00',
            '2020-04-20 20:00',
            '2020-04-20 21:00',
            '2020-04-20 22:00',
            '2020-04-20 23:00',
            '2020-04-21 00:00',
            '2020-04-21 01:00',
            '2020-04-21 02:00',
            '2020-04-21 03:00',
            '2020-04-21 04:00',
            '2020-04-21 05:00',
            '2020-04-21 06:00',
            '2020-04-21 07:00',
            '2020-04-21 08:00',
            '2020-04-21 09:00',
            '2020-04-21 10:00',
            '2020-04-21 11:00',
            '2020-04-21 12:00',
            '2020-04-21 13:00'
          ],
          [
            989,
            443,
            395,
            405,
            315,
            390,
            626,
            928,
            1326,
            1613,
            1667,
            1069,
            60,
            59,
            50,
            33,
            28,
            26,
            17,
            27,
            19,
            13,
            15,
            16,
            698,
            389,
            292,
            263,
            240,
            342,
            525,
            756,
            1089,
            1485,
            1662,
            374,
            24,
            14,
            22,
            19,
            23,
            24,
            12,
            9,
            13,
            11,
            16,
            14,
            659,
            533,
            321,
            266,
            297,
            296,
            511,
            767,
            1092,
            1424,
            1471,
            1299,
            273,
            23,
            9,
            27,
            25,
            11,
            9,
            16,
            23,
            7,
            10,
            9,
            387,
            0,
            0,
            1370,
            252,
            293,
            477,
            577,
            869,
            1002,
            1162,
            1074,
            608,
            55,
            59,
            57,
            26,
            31,
            12,
            17,
            15,
            8,
            6,
            12,
            660,
            289,
            251,
            259,
            193,
            252,
            399,
            473,
            619,
            820,
            850,
            775,
            685,
            607,
            620,
            668,
            748,
            166,
            13,
            12,
            19,
            10,
            13,
            9,
            585,
            272,
            232,
            235,
            217,
            235,
            401,
            565,
            945,
            1323,
            1418,
            1363,
            689,
            187,
            39,
            24,
            21,
            16,
            10,
            8,
            13,
            8,
            4,
            8,
            776,
            363,
            315,
            264,
            252,
            281,
            453,
            632,
            940,
            1288,
            1281,
            1039,
            965,
            73
          ]
        ]
      }
      return {
        names: temp.qbInfo[0],
        values: [temp.qbInfo[1], temp.zxInfo[1]]
      }
    }
  },
  methods: {
    handlerCellClick(params) {
      // 表格跳转 row, column  横纵参数需求什么自己拿什么
      // console.log(params)
    },
    handlerEchartImg(chart) {
      // console.log('88888',chart.getDataURL({
      //   type: 'jpeg',
      //   pixelRatio: 1
      // }))
    },
    hanlderEchartCallback(params) {
      console.log('params============', params)
      /*
        点击横坐标echart 处理方式相同
        1. 词云、柱状图可以拿到下标  dataIndex  数组的下标
        2. 多折线图  params.type === markPoint   参数都是在params.data.coord数组里获取第一个是x下标 label横坐标 lengedsIndex  下标
            params.type === xAxis 点击横坐标的时候都拿全部 加横坐标的条件
        3. 单折线图  params.type === markPoint   通过params.data.coord数组里获取第一个是x下标  拿到对应参数
            params.type === xAxis  参数 params.name
        4. 雷达图、饼图 params.name 中心跳转通过 props 参数 link=url
    */
    }
  }
}
</script>
<style>
.echart-box {
  height: 400px;
  width: 100%;
  margin: 0 auto;
  /* margin-bottom: 20px; */
}
</style>
