<template>
  <div style="padding: 1em; background-color: #eee">
    <el-row class="overview">
      <el-col :span="19" style="padding: 1em">
        <el-row
          :style="{
            'border-bottom': i < total.length - 1 ? '1px solid #eee' : '0',
          }"
          v-for="(v, i) in total"
          :key="i"
        >
          <el-col
            class="item"
            :span="6"
            @click="() => changeChart(item.title)"
            v-for="(item, index) in v"
            :key="i + '-' + index"
          >
            <div class="group">
              <svg
                class="inline"
                viewBox="0 0 1024 1024"
                version="1.1"
                width="32"
                height="32"
                v-html="svg[item.svg_key]"
              ></svg>
              <span class="inline">
                <h5 v-text="item.title"></h5>
                <h3 style="display: inline-block" v-text="item.num"></h3>
                <span v-text="item.unit"></span>
              </span>
            </div>
          </el-col>
        </el-row>

        <div class="head">
          {{ chart_name }}
          <span style="font-weight: 400">（近7日）</span>
        </div>
        <line-chart />

        <div class="head">热门稿件</div>
        <el-table :data="hot_table" style="width: 100%">
          <el-table-column type="index" label="排名" width="100" />
          <el-table-column prop="title" label="内容标题" />
          <el-table-column prop="chuanbo" label="传播量" width="180" />
          <el-table-column prop="zhang" label="日涨量" width="180">
            <template #default="scope"> {{ scope.row.zhang }} % </template>
          </el-table-column>
          <el-table-column label="" width="180">
            <template #default="scope">
              <div
                :class="{ up: scope.row.zhang >= 0, down: scope.row.zhang < 0 }"
              ></div>
            </template>
          </el-table-column>
        </el-table>

        <div class="head">发稿排行</div>
        <el-table :data="release_table" style="width: 100%">
          <el-table-column type="index" label="排名" width="180" />
          <el-table-column prop="title" label="中心" />
          <el-table-column prop="fagao" label="发稿量" width="180" />
          <el-table-column prop="zhang" label="日涨量" width="180">
            <template #default="scope"> {{ scope.row.zhang }} % </template>
          </el-table-column>
          <el-table-column label="" width="180">
            <template #default="scope">
              <div
                :class="{ up: scope.row.zhang >= 0, down: scope.row.zhang < 0 }"
              ></div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="5" style="padding: 1em 0;">
        <div class="head" style="text-align: center">今日直播</div>
        <el-row>
          <el-col :span="24" style="margin-bottom: .5em;">
            <h5 class="line1">
              直播 |
              《唱支山歌给党听》陕西省青少年“全家总动员”主题展演活动【榆林站】
            </h5>
          </el-col>
          <el-col :span="12" style="position: relative;">
            <img style="width: 100%;" src="data:image/jpeg;base64,[encoded data, 10104 characters]" />
            <h6 class="no_live">未直播</h6>
        </el-col>
          <el-col :span="12" style="padding: 0 .5em;position: relative;">
            <h6>部门：创新中心</h6>
            <h6 style="position: absolute;bottom: .3em;width: 100%;">作者：杨昊</h6>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="margin-bottom: .5em;">
            <h5 class="line1">
              直播 |
              《唱支山歌给党听》陕西省青少年“全家总动员”主题展演活动【榆林站】
            </h5>
          </el-col>
          <el-col :span="12" style="position: relative;">
            <img style="width: 100%;" src="data:image/jpeg;base64,[encoded data, 10104 characters]" />
            <h6 class="no_live liveing">未直播</h6>
        </el-col>
          <el-col :span="12" style="padding: 0 .5em;position: relative;">
            <h6>部门：创新中心</h6>
            <h6 style="position: absolute;bottom: .3em;width: 100%;">作者：杨昊</h6>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="margin-bottom: .5em;">
            <h5 class="line1">
              直播 |
              《唱支山歌给党听》陕西省青少年“全家总动员”主题展演活动【榆林站】
            </h5>
          </el-col>
          <el-col :span="12" style="position: relative;">
            <img style="width: 100%;" src="data:image/jpeg;base64,[encoded data, 10104 characters]" />
            <h6 class="no_live liveed">未直播</h6>
        </el-col>
          <el-col :span="12" style="padding: 0 .5em;position: relative;">
            <h6>部门：创新中心</h6>
            <h6 style="position: absolute;bottom: .3em;width: 100%;">作者：杨昊</h6>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 概览
import lineChart from './line_chart.vue';
import svg from './svg.js';
export default {
  name: 'overview',
  data() {
    return {
      hot_table: [
        {
          title: '经济日报：...................',
          chuanbo: '346.3w+',
          zhang: 35,
        },
        {
          title: '经济日报：...................',
          chuanbo: '346.3w+',
          zhang: -35,
        },
      ],
      release_table: [
        {
          title: '创新中心',
          fagao: '346.3w+',
          zhang: 35,
        },
        {
          title: '新闻中心',
          fagao: '346.3w+',
          zhang: -35,
        },
      ],
      chart_name: '总发稿量',
      svg,
      total: [
        [
          {
            title: '总发稿量',
            svg_key: 'total_release',
            num: '0',
            unit: '个',
          },
          {
            title: '总直播场次',
            svg_key: 'total_live',
            num: '0',
            unit: '次',
          },
          {
            title: '总传播量',
            svg_key: 'total_propagate',
            num: '0',
            unit: '次',
          },
          {
            title: '总内容量',
            svg_key: 'total_content',
            num: '0',
            unit: '个',
          },
        ],
        [
          {
            title: '今日发稿量',
            svg_key: 'today_release',
            num: '0',
            unit: '个',
          },
          {
            title: '今日直播场次',
            svg_key: 'today_live',
            num: '0',
            unit: '次',
          },
          {
            title: '昨日传播量',
            svg_key: 'yesterday_release',
            num: '0',
            unit: '次',
          },
          {
            title: '今日内容量',
            svg_key: 'today_content',
            num: '0',
            unit: '个',
          },
        ],
      ],
    };
  },
  mounted() {},
  methods: {
    changeChart(title) {
      this.chart_name = title;
    },
  },
  components: {
    lineChart,
  },
};
</script>
<style lang="scss">
.overview {
  $upanddownwidth: 10px;

  width: 100%;
  background-color: #fff;
  max-width: 1500px;
  margin: 0 auto;
  overflow-y: auto;

  .item {
    padding: 0.5em;

    &:not(:last-child) {
      border-right: 1px solid #eee;
    }
  }

  .group {
    cursor: pointer;
    padding: 0;
  }

  .inline {
    display: inline-block;
    vertical-align: middle;
    padding: 3px;
    white-space: nowrap;
    width: calc(100% - 38px);

    &:not(:last-child) {
      width: 32px;
    }

    h5 {
      height: 1.5em;
      line-height: 1.5em;
    }
  }

  .head {
    height: 2em;
    line-height: 2em;
    font-weight: bold;
  }

  .up::after {
    display: block;
    content: ' ';
    height: 0px;
    width: 0px;
    border: $upanddownwidth solid #fff;
    border-bottom-color: red;
    margin-top: -$upanddownwidth;
  }
  .down::after {
    display: block;
    content: ' ';
    height: 0px;
    width: 0px;
    border: $upanddownwidth solid #fff;
    border-top-color: green;
    margin-bottom: -$upanddownwidth;
  }

  .line1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.no_live{
  border-radius: 5px;
  background-color: #409eff;
  width: 6em;
  text-align: center;
  color: #fff;
  height: 1.5em;
  line-height: 1.5em;
  position: absolute;
  bottom: .3em;
  right: 0;
}

.liveing{
  background-color: #67c23a;
}

.liveed{
  background-color: #909399;
}

}
</style>
