<template>
  <div style="font-size: 0; background-color: #fff">
    <div class="content">
      <img
        :src="'https://cxzx.smcic.net/zhoubao/assets/moblie' + date + '.jpg'"
        width="100%"
        class="content"
        style="margin-bottom: 1em; display: block"
        alt=""
      />
      <p
        class="content"
        :style="
          ' font-weight: 700; padding: 0.5em 3px;word-break: normal;text-align: justify;font-size: ' +
          fontSize * 1.1 +
          'px;'
        "
        v-html="desc"
      ></p>
    </div>
    <div class="tv-list" :style="'font-size:' + fontSize + 'px'">
      <div class="content">
        <div class="itemHead">
          <van-row>
            <van-col span="3" class="td"> 排名 </van-col>
            <van-col span="7" class="td"> 中心 </van-col>
            <van-col span="5" class="td"> 发稿量(条) </van-col>
            <van-col span="7" class="td"> 传播量(次) </van-col>
            <!-- td2 :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'" -->
            <van-col span="2" class="td">
              <div style="width: 35px; height: 35px; overflow: hidden">
                <img
                  src="../../../assets/image/shou.gif"
                  width="30px"
                  alt=""
                  style="vertical-align: middle; transform: rotate(45deg)"
                />
              </div>
            </van-col>
          </van-row>
        </div>
        <div v-for="(v, o) in dep || []" :key="v.name">
          <div
            style="border-bottom: 1px dashed #eee; margin: 11px 0 0 0"
            v-if="o === 20"
          ></div>
          <van-row class="item" @click="() => showPopup(o)">
            <van-col
              span="3"
              :class="{ td: true }"
              :style="{ color: color[o] || '#000', fontWeight: 600 }"
            >
              {{ o + 1 }}
            </van-col>
            <van-col span="7" :class="{ td: true }">
              {{ v.name }}
            </van-col>
            <van-col span="5" :class="{ td: true }">
              {{ timeFormat(v.publish_count) }}
              <van-icon
                v-if="v.publish_change !== '相等'"
                name="down"
                :color="v.publish_change === '上涨' ? '#f00' : '#04c15f'"
                :class="{ rise: v.publish_change === '上涨' }"
              />
            </van-col>
            <van-col span="7" :class="{ td: true }">
              {{ timeFormat(v.read_count) }}
              <van-icon
                v-if="v.read_change !== '相等'"
                name="down"
                :color="v.read_change === '上涨' ? '#f00' : '#04c15f'"
                :class="{ rise: v.read_change === '上涨' }"
              />
            </van-col>
            <van-col span="2" class="td" style="cursor: pointer">
              <van-icon name="arrow" />
            </van-col>
          </van-row>
        </div>
        <van-popup
          :style="{ height: '100%', width: '100%' }"
          position="right"
          v-model="show"
        >
          <div class="main">
            <van-cell
              title-style="flex: 3"
              :title="ratios.schedulename"
              :label="ratios.channelname"
            >
              <div
                @click="show = false"
                :style="
                  'float:left;color: #5470c6;word-break: normal;text-align: justify;cursor:pointer;font-size:' +
                  fontSize +
                  'px'
                "
              >
                <van-icon name="revoke" />
                返回
              </div>
              <div
                :style="
                  'width: 100%; text-align: center;font-size:' + fontSize + 'px'
                "
              >
                {{ ratios.name }}
              </div>
            </van-cell>
            <van-row :style="'font-size: ' + fontSize * 1.1 + 'px;'">
              <van-col span="7" class="td"> 发稿量： </van-col>
              <van-col span="5" class="td">
                {{ ratios.publish_count }}
              </van-col>
              <van-col span="7" class="td"> 传播量： </van-col>
              <van-col span="5" class="td">
                {{ ratios.read_count }}
              </van-col>
            </van-row>
            <van-cell-group border title="账号矩阵">
              <div>
                <van-row class="itemHead">
                  <van-col span="4" class="td"> 平台 </van-col>
                  <van-col span="7" class="td"> 账号 </van-col>
                  <van-col
                    span="4"
                    class="td"
                    @click="() => sortFunc('发稿量')"
                  >
                    发稿量<svg
                      v-show="sortActive === '发稿量'"
                      t="1667611409259"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2536"
                      width="14"
                      height="14"
                    >
                      <path
                        d="M558.933333 853.333333V128h-42.666666v733.866667l-145.066667-145.066667-29.866667 29.866667 192 192 192-192-29.866666-29.866667-136.533334 136.533333z"
                        fill="#515151"
                        p-id="2537"
                      ></path>
                    </svg>
                    <span
                      v-show="sortActive !== '发稿量'"
                      style="display: inline-block; width: 14px; height: 14px"
                    ></span>
                  </van-col>
                  <van-col
                    span="4"
                    class="td"
                    @click="() => sortFunc('传播量')"
                  >
                    传播量<svg
                      v-show="sortActive === '传播量'"
                      t="1667611409259"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2536"
                      width="14"
                      height="14"
                    >
                      <path
                        d="M558.933333 853.333333V128h-42.666666v733.866667l-145.066667-145.066667-29.866667 29.866667 192 192 192-192-29.866666-29.866667-136.533334 136.533333z"
                        fill="#515151"
                        p-id="2537"
                      ></path>
                    </svg>
                    <span
                      v-show="sortActive !== '传播量'"
                      style="display: inline-block; width: 14px; height: 14px"
                    ></span>
                  </van-col>
                  <van-col span="5" class="td" @click="() => sortFunc('环比')">
                    环比<svg
                      v-show="sortActive === '环比'"
                      t="1667611409259"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2536"
                      width="14"
                      height="14"
                    >
                      <path
                        d="M558.933333 853.333333V128h-42.666666v733.866667l-145.066667-145.066667-29.866667 29.866667 192 192 192-192-29.866666-29.866667-136.533334 136.533333z"
                        fill="#515151"
                        p-id="2537"
                      ></path>
                    </svg>
                    <span
                      v-show="sortActive !== '环比'"
                      style="display: inline-block; width: 14px; height: 14px"
                    ></span>
                  </van-col>
                </van-row>
                <van-row
                  class="item"
                  v-for="(v, i) in ratios.detail || []"
                  :key="i + v.nick_name"
                >
                  <van-col span="4" class="td"> {{ v.platform }} </van-col>
                  <van-col span="7" class="td"> {{ v.nick_name }} </van-col>
                  <van-col span="4" class="td">
                    {{ timeFormat(v.publish_count) }}
                  </van-col>
                  <van-col span="4" class="td">
                    {{ timeFormat(v.read_count) }}
                  </van-col>
                  <van-col span="5" class="td">
                    <span
                      :style="
                        v.read_huanbi > 0
                          ? 'color:#f00'
                          : v.read_huanbi < 0
                          ? 'color:#04c15f'
                          : ''
                      "
                      >{{ formatNum(v.read_huanbi || 0, 2) }}%</span
                    >
                    <van-icon
                      v-if="v.read_huanbi != 0"
                      name="down"
                      :color="v.read_huanbi > 0 ? '#f00' : '#04c15f'"
                      :class="{ rise: v.read_huanbi > 0 }"
                    />
                  </van-col>
                </van-row>
              </div>
            </van-cell-group>
            <van-cell-group border :title="ratios.name + '热门稿件'">
              <van-cell
                v-for="(v, i) in ratios.article"
                :key="i"
                title-style="flex: 3"
                :title="i + 1 + '、' + v.title"
              >
                <template #label>
                  <van-tag size="large" color="#409efe" type="primary"
                    >传播量：{{ timeFormat(v.play_count) }}</van-tag
                  >
                  {{ v.dep_name + "-" + v.nick_name }}
                </template>
              </van-cell>
            </van-cell-group>

            <div class="bottom content">
              本数据由<span style="color: red"
                >“陕西广电融媒体集团大数据平台”</span
              >提供。
              <p>
                技术支持:
                <span style="white-space: nowrap">白帆13325452244 </span>
                <span style="white-space: nowrap">陈科18629350958。</span>
              </p>
            </div>
          </div>
        </van-popup>
        <van-cell-group border title="爆款话题">
          <p
            :style="
              ' font-weight: 700;word-break: normal;text-align: justify; padding: 0.5em 3px;font-size: ' +
              fontSize +
              'px;'
            "
            v-html="topic_desc"
          ></p>
          <van-cell
            v-for="(v, i) in topic"
            :key="i"
            title-style="flex: 3"
            :title="i + 1 + '、' + v.topic"
          >
            <template #label>
              <van-tag size="large" color="#409efe" type="primary"
                >传播量：{{ timeFormat(v.read_count) }}</van-tag
              >
              {{ v.dep + "-" + v.zhuchiren }}
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group border title="热门稿件">
          <van-cell
            v-for="(v, i) in article"
            :key="i"
            title-style="flex: 3"
            :title="i + 1 + '、' + v.title"
          >
            <template #label>
              <van-tag size="large" color="#409efe" type="primary"
                >传播量：{{ timeFormat(v.play_count) }}</van-tag
              >
              {{ v.dep_name + "-" + v.nick_name }}
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="bottom content">
        本数据由<span style="color: red">“陕西广电融媒体集团大数据平台”</span
        >提供。
        <p>
          技术支持:
          <span style="white-space: nowrap">白帆13325452244 </span>
          <span style="white-space: nowrap">陈科18629350958。</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import watermark from "watermark-package";
import {
  Col as vanCol,
  Row as vanRow,
  Icon as vanIcon,
  Popup as vanPopup,
  Cell as vanCell,
  Tag as vanTag,
  cellGroup as vanCellGroup,
} from "vant";
import "vant/lib/tag/style/index";
import "vant/lib/cell/style/index";
import "vant/lib/cell-group/style/index";
import "vant/lib/popup/style/index";
import "vant/lib/icon/style/index";
import "vant/lib/col/style/index";
import "vant/lib/row/style/index";
import { jsonZhouMobile } from "../../../api/index";

import { defaultDate } from "@/utils/tool.js";
import report from "../mixin/index.js";

export default {
  name: "Mobile",
  data() {
    return {
      active: "",
      sortActive: "传播量",
      fontSize: 17,
      show: false,
      charts: undefined,
      ratios: {},
      article: [],
      topic: [],
      dep: [],
      color: ["#ff0036", "#ff9b00", "#ffcc00"],
      echarts: undefined,
      dayEcharts: undefined,
      width: document.body.offsetWidth || 0,
      desc: "",
      topic_desc: "",
      date: "",
    };
  },
  mixins: [report],
  watch: {},
  computed: {},
  methods: {
    init() {
      this.date = this.$route.params.date !== 'auto' ? this.$route.params.date : this.lastTimeDate.new_media ? this.lastTimeDate.new_media : defaultDate("Week");
      this.fontSize = (document.body.offsetWidth / 24).toFixed(2) - 0;
      if (document.body.offsetWidth > 677) this.fontSize = 22;
      document.documentElement.style.fontSize = this.fontSize + "px";
      watermark.setWaterMark({
        w_texts: ["陕西新媒体大数据"],
        w_options: {
          w_opacity: "0.1",
        },
      });
      jsonZhouMobile({
        date: this.date,
        time: Date.now(),
      }).then(res => {
        this.article = res.article || [];
        this.dep = res.dep || [];
        this.topic = res.topic || [];
        this.desc = res.desc || "";
        this.topic_desc = res.topic_desc || "";
      });
    },
    valueDate(v) {
      let out = "";
      for (let i = 0; i < v.length; i++) {
        const item = v[i];
        if (i === 4 || i === 6 || i === 13 || i === 15) out += "/";
        out += item;
      }
      return out;
    },
    formatNum(num, w) {
      if (isNaN(num)) return 0;
      return Number(num).toFixed(w || 4) - 0;
    },
    formatType(num) {
      let N = this.formatNum(num, 2);
      let wei = "";
      if (N >= 100000000) {
        N = (N / 100000000).toFixed(1);
        wei = "亿";
      } else if (N >= 10000) {
        N = (N / 10000).toFixed(0);
        wei = "万";
      }
      N = N.toString().split(".");
      return {
        N: (N[0] || 0) * 1,
        P: N[1] || 0,
        wei,
      };
    },
    timeFormat(t) {
      let Time = t || 0;
      if (Time >= 100000000) Time = (Time / 100000000).toFixed(1) - 0 + "亿";
      else if (Time >= 10000) Time = (Time / 10000).toFixed(0) - 0 + "万";
      return Time;
    },
    showPopup(i) {
      this.show = true;
      const ratios = JSON.parse(JSON.stringify(this.dep[i] || {}));
      let publish_count = this.timeFormat(ratios.publish_count);
      ratios.publish_count = publish_count;
      let read_count = this.timeFormat(ratios.read_count);
      ratios.read_count = read_count;
      let key = "read_count";
      switch (this.sortActive) {
        case "发稿量":
          key = "publish_count";
          break;
      }
      ratios.detail = ratios.detail.sort(
        (newitem, olditem) => olditem[key] - newitem[key]
      );
      this.ratios = ratios;
      this.$nextTick(() => {});
    },
    sortFunc(text) {
      if (text === this.sortActive) return;
      this.sortActive = text;
      let key = "read_count";
      switch (text) {
        case "发稿量":
          key = "publish_count";
          break;
        case "环比":
          key = "read_huanbi";
          break;
      }
      this.ratios.detail = this.ratios.detail.sort(
        (newitem, olditem) => olditem[key] - newitem[key]
      );
    },
  },
  beforeUnmount() {},
  components: {
    vanCol,
    vanRow,
    vanIcon,
    vanPopup,
    vanCell,
    vanTag,
    vanCellGroup,
  },
};
</script>

<style scoped>
.tv-list {
  background-color: #fff;
  padding: 5px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.bottom {
  border: 4px solid #0983a8;
  background-color: #cdcdcd;
  margin-top: 1em;
  padding: 10px;
  font-size: 0.85rem;
  padding-left: 5px;
  font-weight: 600;
  overflow: hidden;
}
.td {
  text-align: center;
  line-height: 2.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.td2 {
  line-height: 1.5em;
  white-space: initial;
}
.item {
  overflow: hidden;
  border-radius: 3px;
  margin-top: 11px;
  background-color: #f5f6f8;
}
.itemHead {
  margin-top: 0;
  background-color: #f5f6f8;
}
.content {
  margin: 0 auto;
  max-width: 667px;
}
.rise {
  /* 上升 */
  transform: rotate(180deg);
}
.titleTop {
  height: 80px;
  line-height: 80px;
  background-image: linear-gradient(to right, #014392, #008fc4, #00428c);
  color: #fff;
  text-align: center;
}
</style>
<style>
.van-cell-group__title {
  font-size: 1.1rem;
  color: #000;
  font-weight: 600;
}
.van-tab,
.van-cell,
.van-cell__label,
.van-cell__title {
  font-size: 1rem;
  color: #000;
}
</style>
