<template>
  <div class="outer">
    <div class="grid">
      <div style="display: flex; padding: 10px">
        <div style="width: 200px">
          <div style="display: flex">
            <a-radio-group v-model:value="radio" @change="change">
              <a-radio :value="1">直播中</a-radio>
              <a-radio :value="2">未开播</a-radio>
            </a-radio-group>
          </div>
        </div>
        <div style="width: 100%; display: flex; justify-content: flex-end; margin-right: 1.5%">
          <a-button type="primary" @click="flech">刷新页面</a-button>
        </div>
      </div>

      <a-row v-if="!loading">
        <a-col :span="6" v-for="(item, index) in gloryData" :key="index">
          <a-card style="cursor: pointer" :bordered="false">
            <img :src="item.img" alt="" />
            <p style="font-weight: bold; margin-top: 5px; padding-left: 5px">{{ item.title }}</p>
            <div style="display: flex">
              <span class="name"> {{ item.id }}</span>
              <div class="hot">
                <a-icon type="fire" style="color: red; margin-left: auto" />
                <span>{{ item.hot }}</span>
              </div>
            </div>
            <div style="padding-top: 10px; float: right">
              <a-button type="primary" @click="detail(index)">查看详情</a-button>
              <a-button type="primary" style="margin-left: 10px" @click="gotoReal(index)">实时分析</a-button>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-modal v-model:open="isShow" :mask="false" title="直播详情" @ok="isShow = false" @cancel="isShow = false" style="width: 1000px">
        <div style="display: flex; padding: 20px">
          <div style="width: 250px">
            <p style="font-weight: bold">主播信息</p>

            <p>直播标题：{{ gloryData[gloryindex].title }}</p>
            <p>主播：{{ gloryData[gloryindex].id }}</p>
            <p>直播间ID：{{ gloryData[gloryindex].roomID }}</p>
            <p>热度：{{ gloryData[gloryindex].hot }}</p>
            <p>类型：{{ gloryData[gloryindex].type }}</p>
            <p>点赞数：{{ gloryData[gloryindex].history['2024-05-10'].likes }}</p>
            <p>评论数：{{ gloryData[gloryindex].history['2024-05-10'].comments }}</p>
            <p>观看人数：{{ gloryData[gloryindex].history['2024-05-10'].viewers }}</p>
            <p>收入：{{ gloryData[gloryindex].history['2024-05-10'].revenue }}</p>
          </div>
          <div style="width: 400px" class="modal">
            <span style="font-weight: bold">历史数据</span>

            <a-row :span="12" style="padding-top: 20px">
              <a-col :span="12" v-for="(item, index) in gloryData[gloryindex].history" :key="index">
                <a-card style="margin: 1px">
                  <p>日期：{{ index }}</p>
                  <p>观看人数：{{ item.viewers }}</p>
                  <p>评论数：{{ item.comments }}</p>
                  <p>点赞数：{{ item.likes }}</p>
                  <p>收入：{{ item.revenue }}</p>
                </a-card>
              </a-col>
            </a-row>
          </div>
          <div id="map1" style="width: 250px; height: 500px"> </div>
        </div>
      </a-modal>
      <a-spin v-if="loading">
        <div>正在查询中</div>
      </a-spin>
    </div>
  </div>
</template>

<script>
import pic1 from '@/assets/live/pic1.jpg';
import pic2 from '@/assets/live/pic2.jpg';
import pic3 from '@/assets/live/pic3.jpg';
import pic4 from '@/assets/live/pic4.jpg';
import pic5 from '@/assets/live/pic5.jpg';
import pic6 from '@/assets/live/pic6.jpg';
import pic7 from '@/assets/live/pic7.jpg';
import pic8 from '@/assets/live/pic8.jpg';
import pic9 from '@/assets/live/pic9.jpg';
import pic10 from '@/assets/live/pic10.jpg';
import pic11 from '@/assets/live/pic11.jpg';
import pic12 from '@/assets/live/pic12.jpg';
import pic13 from '@/assets/live/pic13.jpg';
import pic14 from '@/assets/live/pic14.jpg';
import pic15 from '@/assets/live/pic15.jpg';
import pic16 from '@/assets/live/pic16.jpg';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      isShow: false,
      gloryindex: 0,
      radio: 0,
      gloryData: [
        {
          title: 'BLG 2:1 PSG MSI胜败分组赛',
          id: '虎牙英雄联盟赛事',
          hot: '100万',
          img: pic1,
          type: '英雄联盟',
          roomID: '681518',
          history: {
            '2024-05-05': {
              viewers: 3055672,
              comments: 6064893,
              likes: 953607,
              dislikes: 56078,
              shares: 397026,
              revenue: 1972068,
            },
            '2024-05-06': {
              viewers: 3869472,
              comments: 7656893,
              likes: 1053607,
              dislikes: 66078,
              shares: 497026,
              revenue: 2972068,
            },
            '2024-05-07': {
              viewers: 4378142,
              comments: 8666893,
              likes: 1153607,
              dislikes: 76078,
              shares: 597026,
              revenue: 3972068,
            },
            '2024-05-08': {
              viewers: 3896172,
              comments: 9676893,
              likes: 1253607,
              dislikes: 86078,
              shares: 697026,
              revenue: 4972068,
            },
            '2024-05-09': {
              viewers: 4389172,
              comments: 10676893,
              likes: 1353607,
              dislikes: 96078,
              shares: 797026,
              revenue: 5972068,
            },
            '2024-05-10': {
              viewers: 5213472,
              comments: 11676893,
              likes: 1453607,
              dislikes: 106078,
              shares: 897026,
              revenue: 6972068,
            },
          },
        },
        {
          title: 'haohaodapaiwei',
          id: 'JDG.Kanavi',
          hot: '13.3万',
          img: pic2,
          type: '英雄联盟',
          roomID: '682219',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '韩一拉夫 韩服冲千分',
          id: '阿呆奥拉夫',
          hot: '22.3万',
          img: pic3,
          type: '英雄联盟',
          roomID: '679160',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '国服第一诺手!峡谷宗师冲王者!!!',
          id: '黑洞king1',
          hot: '24.5万',
          img: pic4,
          type: '英雄联盟',
          roomID: '681518',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '解说下今天的比赛~',
          id: 'kRYST4L',
          hot: '559.9万',
          img: pic5,
          type: '英雄联盟',
          roomID: '682219',
          history: {
            '2024-05-05': {
              viewers: 1355672,
              comments: 3664893,
              likes: 795367,
              dislikes: 45678,
              shares: 379726,
              revenue: 697268,
            },
            '2024-05-06': {
              viewers: 1869472,
              comments: 6656893,
              likes: 1053607,
              dislikes: 66078,
              shares: 497026,
              revenue: 2972068,
            },
            '2024-05-07': {
              viewers: 2378142,
              comments: 8666893,
              likes: 1153607,
              dislikes: 76078,
              shares: 597026,
              revenue: 3972068,
            },
            '2024-05-08': {
              viewers: 1896172,
              comments: 9676893,
              likes: 1253607,
              dislikes: 86078,
              shares: 697026,
              revenue: 4972068,
            },
            '2024-05-09': {
              viewers: 2389172,
              comments: 10676893,
              likes: 1353607,
              dislikes: 96078,
              shares: 797026,
              revenue: 5972068,
            },
            '2024-05-10': {
              viewers: 2213472,
              comments: 11676893,
              likes: 1453607,
              dislikes: 106078,
              shares: 897026,
              revenue: 6972068,
            },
          },
        },

        {
          title: '5点跟姿态队练',
          id: 'Letme严君泽',
          hot: '247.1万',
          img: pic6,
          type: '英雄联盟',
          roomID: '679160',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '勤奋天王',
          id: 'DANK1NG',
          hot: '426.7万',
          img: pic7,
          type: 'CS2',
          roomID: '289218',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '【Mr.mao】少点谩骂 多点鼓励!',
          id: 'MAX-Mrmao',
          hot: '19.1万',
          img: pic8,
          type: 'CS2',
          roomID: '281738',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '小播一会儿，新主播',
          id: '青象-矍然吖',
          hot: '4.0万',
          img: pic9,
          type: 'CS2',
          roomID: '234938',
          history: {
            '2024-05-05': {
              viewers: 104934,
              comments: 564893,
              likes: 65367,
              dislikes: 8678,
              shares: 39726,
              revenue: 8176,
            },
            '2024-05-06': {
              viewers: 186947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 237814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 189617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 238917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 221347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '【新主播】上S的第一天~',
          id: '十三月的故事',
          hot: '12.6万',
          img: pic10,
          type: 'CS2',
          roomID: '217637',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '速看 只整新奥恩大活!',
          id: '丸子头的文',
          hot: '40.7万',
          img: pic11,
          type: '英雄联盟',
          roomID: '619371',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '2024NBPL春季赛',
          id: '虎牙永劫无间赛事',
          hot: '112.3万',
          img: pic12,
          type: '永劫无间',
          roomID: '1359712',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '天人前10 书300分 接3排',
          id: '巅峰-鱼子酱KK',
          hot: '8.2万',
          img: pic13,
          type: '永劫无间',
          roomID: '1379347',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '鬼刀一开看不见看不见，迦南启动!',
          id: '终憾﹀奇星互娱',
          hot: '23.9万',
          img: pic14,
          type: '永劫无间',
          roomID: '1394712',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '苏州KSG vs 武汉eStarKPL春季赛',
          id: '虎牙王者荣耀赛事',
          hot: '591.8万',
          type: '王者荣耀',
          img: pic15,
          roomID: '2672993',
          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
        {
          title: '我来诠释发育路!',
          id: 'AzZ、口袋',
          hot: '117.1万',
          img: pic16,
          roomID: '2693712',
          type: '王者荣耀',

          history: {
            '2024-05-05': {
              viewers: 355672,
              comments: 664893,
              likes: 95367,
              dislikes: 5678,
              shares: 39726,
              revenue: 197268,
            },
            '2024-05-06': {
              viewers: 386947,
              comments: 765893,
              likes: 105367,
              dislikes: 6678,
              shares: 49726,
              revenue: 297268,
            },
            '2024-05-07': {
              viewers: 437814,
              comments: 866893,
              likes: 115367,
              dislikes: 7678,
              shares: 59726,
              revenue: 397268,
            },
            '2024-05-08': {
              viewers: 389617,
              comments: 967893,
              likes: 125367,
              dislikes: 8678,
              shares: 69726,
              revenue: 497268,
            },
            '2024-05-09': {
              viewers: 438917,
              comments: 1067893,
              likes: 135367,
              dislikes: 9678,
              shares: 79726,
              revenue: 597268,
            },
            '2024-05-10': {
              viewers: 521347,
              comments: 1167893,
              likes: 145367,
              dislikes: 10678,
              shares: 89726,
              revenue: 697268,
            },
          },
        },
      ],
      loading: false,
    };
  },
  methods: {
    goto() {
      console.log('Test');
    },
    flech() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1500);
    },
    detail(index) {
      this.gloryindex = index;
      this.isShow = true;
      setTimeout(() => {
        this.drawLine(index);
      }, 100);

    },
    drawLine(index) {
      //在map1上根据观看人数以及日期画一个折线图
      //如果map1存在图表，先销毁

      let myChart = document.getElementById('map1');
      if (myChart) {
        myChart = echarts.getInstanceByDom(myChart);
        if (myChart) {
          myChart.dispose();
        }
      }
      myChart = echarts.init(document.getElementById('map1'));
      let option = {
        title: {
          text: '观看人数',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['观看人数'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: Object.keys(this.gloryData[index].history),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '观看人数',
            type: 'line',
            stack: '总量',
            data: Object.values(this.gloryData[index].history).map((item) => item.viewers),
          },
        ],
      };
      myChart.setOption(option);
    },
    // 查看详情（转跳详情页面）
    gotoReal(index) {
      this.$router.push({
        path: '/live/realTime',
        query: { index: index },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.outer {
  padding: 30px;

  .grid {
    background-color: white;
    padding: 30px;

    /* margin: 30px; */
    width: 100%;

    // height: 1000px;
    .hot {
      padding-right: 5px;
      margin-left: auto;
      font-weight: bold;
    }

    .name {
      padding-left: 5px;
      margin-right: auto;
      font-weight: bold;
    }
  }
}
.modal {
  p {
    //取消空行
    margin: 0;
  }
}
</style>
