<template>
  <div style="font-size: 0; background-color: #fff">
    <img
      v-if="date"
      :src="'https://cxzx.smcic.net/zhoubao/assets/tv' + date + '.jpg'"
      width="100%"
      class="content"
      style="margin-bottom: 1em; display: block"
      alt=""
    />
    <p
      class="content"
      :style="
        'font-weight: 700;word-break: normal;text-align: justify; padding: 0.5em 3px;font-size: ' +
        fontSize +
        'px;'
      "
      v-html="title1.desc"
    ></p>
    <div :style="'height: ' + fontSize + 'px;'"></div>
    <div class="TraditionalAndXian" :style="'font-size:' + fontSize + 'px'">
      <div class="content">
        <!-- <div class="titleTop">
        <p v-text="title.company"></p>
        <p v-text="title.name"></p>
        <p v-text="title.title"></p>
      </div> -->
        <div class="itemHead">
          <van-row>
            <van-col span="4" class="td"> 省排名 </van-col>
            <van-col span="6" class="td"> 频道 </van-col>
            <van-col span="5">
              <van-popover
                v-model="fene"
                trigger="click"
                @select="fene = !fene"
              >
                <div style="padding: 5px">
                  市场份额=本频道收视率/所有频道收视率
                </div>
                <template #reference>
                  <p class="td">市场份额</p>
                </template>
              </van-popover>
            </van-col>
            <!-- td2 :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'" -->
            <van-col span="7">
              <van-popover
                v-model="shichang"
                trigger="click"
                @select="shichang = !shichang"
              >
                <div style="padding: 5px">
                  市场份额=本频道收视率/所有频道收视率
                </div>
                <template #reference>
                  <p class="td">周人均时长(分)</p>
                </template>
              </van-popover>
            </van-col>
            <van-col span="2" class="td">
              <img
                src="../../../assets/image/shou.gif"
                width="26px"
                alt=""
                style="vertical-align: middle; transform: rotate(45deg)"
              />
            </van-col>
          </van-row>
        </div>
        <div v-for="(v, o) in platfromData1 || []" :key="v.name">
          <div
            style="border-bottom: 1px dashed #eee; margin: 11px 0 0 0"
            v-if="o === 50"
          ></div>
          <van-row
            :style="v.shanxi_channel ? 'background:	#F5DEB3' : ''"
            class="item"
            @click="() => showPopup(o, 0)"
          >
            <van-col
              span="4"
              :class="{ td: true }"
              :style="{ color: color[o] || '#000', fontWeight: 600 }"
            >
              {{ v.rank }}
            </van-col>
            <van-col
              :style="v.shanxi_channel ? 'font-weight: 600' : ''"
              span="6"
              :class="{ td: true }"
            >
              {{ v.channelname }}
            </van-col>
            <van-col span="5" :class="{ td: true }">
              {{ formatNum(v.occrate, 2) }}%
              <van-icon
                v-if="v.occrate_change !== '相等'"
                name="down"
                :color="v.occrate_change === '上升' ? '#f00' : '#04c15f'"
                :class="{ rise: v.occrate_change === '上升' }"
              />
            </van-col>
            <van-col span="7" :class="{ td: true }">
              {{ timeFormat(v.user_duration) }}
              <van-icon
                v-if="v.user_duration_change !== '相等'"
                name="down"
                :color="v.user_duration_change === '上升' ? '#f00' : '#04c15f'"
                :class="{ rise: v.user_duration_change === '上升' }"
              />
            </van-col>
            <van-col span="2" class="td" style="cursor: pointer">
              <van-icon name="arrow" />
            </van-col>
          </van-row>
        </div>
      </div>

      <p
        class="content"
        :style="
          'font-weight: 700;word-break: normal;text-align: justify; padding: 0.5em 3px;font-size: ' +
          fontSize +
          'px;'
        "
        v-html="title1.dataSource"
      ></p>
    </div>

    <img
      v-if="date"
      :src="'https://cxzx.smcic.net/zhoubao/assets/xatv' + date + '.jpg'"
      width="100%"
      class="content"
      style="margin-bottom: 1em; display: block"
      alt=""
    />

    <p
      class="content"
      :style="
        'font-weight: 700;word-break: normal;text-align: justify; padding: 0.5em 3px;font-size: ' +
        fontSize +
        'px;'
      "
      v-html="title.desc"
    ></p>
    <div class="TraditionalAndXian" :style="'font-size:' + fontSize + 'px'">
      <div class="content">
        <!-- <div class="titleTop">
        <p v-text="title.company"></p>
        <p v-text="title.name"></p>
        <p v-text="title.title"></p>
      </div> -->
        <div class="itemHead">
          <van-row>
            <van-col span="4" class="td"> 排名 </van-col>
            <van-col span="6" class="td"> 频道 </van-col>
            <van-col span="5">
              <p class="td">市场份额</p>
            </van-col>
            <!-- td2 :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'" -->
            <van-col span="7">
              <p class="td">周人均时长(分)</p>
            </van-col>
            <van-col span="2" class="td">
              <img
                src="../../../assets/image/shou.gif"
                width="26px"
                alt=""
                style="vertical-align: middle; transform: rotate(45deg)"
              />
            </van-col>
          </van-row>
        </div>
        <div v-for="(v, o) in platfromData || []" :key="v.name">
          <div
            style="border-bottom: 1px dashed #eee; margin: 11px 0 0 0"
            v-if="o === 50"
          ></div>
          <van-row
            :style="v.shanxi_channel ? 'background:	#F5DEB3' : ''"
            class="item"
            @click="() => showPopup(o, 1)"
          >
            <van-col
              span="4"
              :class="{ td: true }"
              :style="{ color: color[o] || '#000', fontWeight: 600 }"
            >
              {{ v.rank }}
            </van-col>
            <van-col
              :style="v.shanxi_channel ? 'font-weight: 600' : ''"
              span="6"
              :class="{ td: true }"
            >
              {{ v.channelname }}
            </van-col>
            <van-col span="5" :class="{ td: true }">
              {{ formatNum(v.occrate, 2) }}%
              <van-icon
                v-if="v.occrate_change !== '相等'"
                name="down"
                :color="v.occrate_change === '上升' ? '#f00' : '#04c15f'"
                :class="{ rise: v.occrate_change === '上升' }"
              />
            </van-col>
            <van-col span="7" :class="{ td: true }">
              {{ timeFormat(v.user_duration) }}
              <van-icon
                v-if="v.user_duration_change !== '相等'"
                name="down"
                :color="v.user_duration_change === '上升' ? '#f00' : '#04c15f'"
                :class="{ rise: v.user_duration_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.channelname }}
              </div>
            </van-cell>
            <van-cell-group title="视听收视新指标">
              <van-row>
                <van-col span="7" class="td" style="text-align: right">
                  收视总时长：
                </van-col>
                <van-col span="7" class="td">
                  {{ ratios.timecount }}小时
                </van-col>
                <van-col span="10" class="td" style="text-align: left">
                  环比：
                  <span
                    :style="
                      ratios.timecount_ring > 0
                        ? 'color: red'
                        : 'color: #04c15f'
                    "
                  >
                    {{ ratios.timecount_ring }}%
                    <van-icon
                      v-if="ratios.timecount_change !== '相等'"
                      name="down"
                      :class="{ rise: ratios.timecount_change === '上升' }"
                    />
                  </span>
                </van-col>
                <van-col span="7" class="td" style="text-align: right">
                  收视总次数：
                </van-col>
                <van-col span="7" class="td">
                  {{ ratios.hitcount }}
                </van-col>
                <van-col span="10" class="td" style="text-align: left">
                  环比：
                  <span
                    :style="
                      ratios.hitcount_ring > 0 ? 'color: red' : 'color: #04c15f'
                    "
                  >
                    {{ ratios.hitcount_ring }}%
                    <van-icon
                      v-if="ratios.hitcount_change !== '相等'"
                      name="down"
                      :class="{ rise: ratios.hitcount_change === '上升' }"
                    />
                  </span>
                </van-col>

                <van-col span="7" class="td" style="text-align: right">
                  周活跃户数：
                </van-col>
                <van-col span="7" class="td">
                  {{ ratios.usrcount }}
                </van-col>
                <van-col span="10" class="td" style="text-align: left">
                  环比：
                  <span
                    :style="
                      ratios.usrcount_ring > 0 ? 'color: red' : 'color: #04c15f'
                    "
                  >
                    {{ ratios.usrcount_ring }}%
                    <van-icon
                      v-if="ratios.usrcount_change !== '相等'"
                      name="down"
                      :class="{ rise: ratios.usrcount_change === '上升' }"
                    />
                  </span>
                </van-col>

                <van-col span="7" class="td" style="text-align: right">
                  周接触频次：
                </van-col>
                <van-col span="7" class="td">
                  {{ formatType1(ratios.touchfreq, 2) }}次
                </van-col>

                <van-col span="10" class="td" style="text-align: left">
                  环比：
                  <span
                    :style="
                      ratios.touchfreq_ring > 0
                        ? 'color: red'
                        : 'color: #04c15f'
                    "
                  >
                    {{ ratios.touchfreq_ring }}%
                    <van-icon
                      v-if="ratios.touchfreq_change !== '相等'"
                      name="down"
                      :class="{ rise: ratios.touchfreq_change === '上升' }"
                    />
                  </span>
                </van-col>
              </van-row>
            </van-cell-group>
            <van-cell-group title="传统指标">
              <van-row>
                <van-col span="7" class="td" style="text-align: right">
                  到达率：
                </van-col>
                <van-col span="7" class="td"
                  >{{ formatNum(ratios.reachrate, 2) }}%
                </van-col>
                <van-col span="10" class="td" style="text-align: left">
                  环比：
                  <span
                    :style="
                      ratios.reachrate_ring > 0
                        ? 'color: red'
                        : 'color: #04c15f'
                    "
                  >
                    {{ ratios.reachrate_ring }}%
                    <van-icon
                      v-if="ratios.reachrate_change !== '相等'"
                      name="down"
                      :class="{ rise: ratios.reachrate_change === '上升' }"
                    />
                  </span>
                </van-col>
                <van-col span="7" class="td" style="text-align: right">
                  周人均时长：
                </van-col>
                <van-col span="7" class="td"
                  >{{ timeFormat(ratios.user_duration, 0) }}分钟
                </van-col>
                <van-col span="10" class="td" style="text-align: left">
                  环比：
                  <span
                    :style="
                      ratios.user_duration_ring > 0
                        ? 'color: red'
                        : 'color: #04c15f'
                    "
                  >
                    {{ ratios.user_duration_ring }}%
                    <van-icon
                      v-if="ratios.user_duration_change !== '相等'"
                      name="down"
                      :class="{ rise: ratios.user_duration_change === '上升' }"
                    />
                  </span>
                </van-col>
                <van-col span="7" class="td" style="text-align: right">
                  收视率：
                </van-col>
                <van-col span="7" class="td">
                  {{ formatNum(ratios.watchrate, 2) }}%
                </van-col>
                <van-col span="10" class="td" style="text-align: left">
                  环比：
                  <span
                    :style="
                      ratios.watchrate_ring > 0
                        ? 'color: red'
                        : 'color: #04c15f'
                    "
                  >
                    {{ ratios.watchrate_ring }}%
                    <van-icon
                      v-if="ratios.watchrate_change !== '相等'"
                      name="down"
                      :class="{ rise: ratios.watchrate_change === '上升' }"
                    />
                  </span>
                </van-col>
                <van-col span="7" class="td" style="text-align: right">
                  市场占有率：
                </van-col>
                <van-col span="7" class="td"
                  >{{ formatNum(ratios.occrate, 2) }}%
                </van-col>
                <van-col span="10" class="td" style="text-align: left">
                  环比：
                  <span
                    :style="
                      ratios.occrate_ring > 0 ? 'color: red' : 'color: #04c15f'
                    "
                  >
                    {{ ratios.occrate_ring }}%
                    <van-icon
                      v-if="ratios.occrate_change !== '相等'"
                      name="down"
                      :class="{ rise: ratios.occrate_change === '上升' }"
                    />
                  </span>
                </van-col>
                <van-col span="7" class="td" style="text-align: right">
                  忠诚度：
                </van-col>
                <van-col span="7" class="td"
                  >{{ formatNum(ratios.loyalty, 2) }}%
                </van-col>
                <van-col span="10" class="td" style="text-align: left">
                  环比：
                  <span
                    :style="
                      ratios.loyalty_ring > 0 ? 'color: red' : 'color: #04c15f'
                    "
                  >
                    {{ ratios.loyalty_ring }}%
                    <van-icon
                      v-if="ratios.loyalty_change !== '相等'"
                      name="down"
                      :class="{ rise: ratios.loyalty_change === '上升' }"
                    />
                  </span>
                </van-col>
              </van-row>
            </van-cell-group>
            <div ref="pie"></div>
            <div ref="day"></div>
          </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>
        </van-popup>

        <p
          class="content"
          :style="
            'font-weight: 700; padding: 0.5em 3px;font-size: ' +
            fontSize +
            'px;'
          "
          v-html="title.dataSource"
        ></p>
      </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,
  cellGroup as vanCellGroup,
  Cell as vanCell,
  Popover as vanPopover,
} from "vant";
import "vant/lib/popover/style/index";
import "vant/lib/cell-group/style/index";
import "vant/lib/cell/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 { jsonZhouXian, jsonZhou } from "../../../api/index";
import { defaultDate } from "@/utils/tool.js";
import echarts from "../../../utils/echarts";

import report from "../mixin/index.js";

export default {
  name: "TraditionalAndXian",
  data() {
    return {
      shichang: false,
      fene: false,
      fontSize: 17,
      show: false,
      charts: undefined,
      ratios: {},
      platfromData: [],
      platfromData1: [],
      color: ["#ff0036", "#ff9b00", "#ffcc00"],
      echarts: undefined,
      dayEcharts: undefined,
      title: {},
      title1: {},
      width: document.body.offsetWidth || 0,
    };
  },
  watch: {},
  mixins: [report],
  computed: {},
  methods: {
    init() {
      this.fontSize = (document.body.offsetWidth / 24).toFixed(2) - 0;
      if (document.body.offsetWidth > 677) this.fontSize = 22;
      watermark.setWaterMark({
        w_texts: ["陕西视听大数据"],
        w_options: {
          w_opacity: "0.1",
        },
      });
      const date = defaultDate(
        "Week",
        this.$route.query.date || this.lastTimeDate.tv
      ).split("-");
      this.date = (date[2] || "").replace(/\*/g, "-");
      jsonZhouXian({
        start: date[0],
        end: date[1],
        time: Date.now(),
      })
        .then(res => {
          const title = {
            company: res.company || "",
            name: res.name || "",
            title: res.title || "",
            desc: res.desc || "",
            dataSource: res.dataSource || "",
          };
          this.title = title;
          this.platfromData = res.list || [];
          this.$emit("start", {
            status: 200,
          });
        })
        .catch(err => {
          this.$emit("start", {
            status: err,
          });
        });

      jsonZhou({
        start: date[0],
        end: date[1],
        time: Date.now(),
      })
        .then(res => {
          const title = {
            company: res.company || "",
            name: res.name || "",
            title: res.title || "",
            desc: res.desc || "",
            dataSource: res.dataSource || "",
          };
          this.title1 = title;
          this.platfromData1 = res.list || [];
          this.$emit("start", {
            status: 200,
          });
        })
        .catch(err => {
          this.$emit("start", {
            status: err,
          });
        });

      window.onresize = () => {
        const doc = document.body;
        const width = doc.offsetWidth - 32;
        let height = (width / 4) * 3;
        this.width = document.body.offsetWidth || 0;
        this.dayEcharts &&
          this.dayEcharts.resize({
            width,
            height: width,
          });
        this.echarts &&
          this.echarts.resize({
            width,
            height,
          });
      };
    },
    formatType1(num, W) {
      let N = this.formatNum(num, W || 0);
      if (N >= 100000000) {
        N = (N / 100000000).toFixed(W || 0) - 0 + "亿";
      } else if (N >= 10000) {
        N = (N / 10000).toFixed(W || 0) - 0 + "万";
      } else {
        N = Number(N).toFixed(W || 0) - 0;
      }
      return N;
    },
    formatNum(num, w) {
      if (isNaN(num)) return 0;
      return Number(num).toFixed(w || 4) - 0;
    },
    formatType(num, W) {
      let N = this.formatNum(num, 2);
      let wei = "";
      if (N >= 100000000) {
        N = (N / 100000000).toFixed(W || 2);
        wei = "亿";
      } else if (N >= 10000) {
        N = (N / 10000).toFixed(W || 2);
        wei = "万";
      }
      N = N.toString().split(".");
      return {
        N: (N[0] || 0) * 1,
        P: N[1] || 0,
        wei,
      };
    },
    timeFormat(t, w) {
      const Time = t || 0;
      let out = Time.toFixed(w || 0) - 0;
      return out;
    },
    showPopup(i, o) {
      this.show = true;
      const reaios = JSON.parse(
        JSON.stringify(
          !o ? this.platfromData1[i] || {} : this.platfromData[i] || {}
        )
      );
      reaios.hitcount = this.formatType1(reaios.hitcount, 1);
      reaios.usrcount = this.formatType1(reaios.usrcount, 1);
      reaios.timecount = this.formatType1(reaios.timecount / 60, 0);
      this.ratios = reaios;
      console.log(reaios);
      this.$nextTick(() => {
        this.upEcharts();
        this.dayEchartsFun();
      });
    },
    dayEchartsFun() {
      this.dayEcharts && this.dayEcharts.clear && this.dayEcharts.clear();
      if (!this.dayEcharts) {
        const doc = document.body;
        const width = doc.offsetWidth - 32;
        let height = (width / 4) * 3;
        if (height > 400) height = 400;
        this.dayEcharts = echarts.init(
          this.$refs.day,
          {},
          {
            width,
            height,
          }
        );
      }
      const key = [],
        value = [];
      this.ratios.detail_list.map(v => {
        let val = v.usrcount;
        key.push(v.dt);
        value.push(val);
      });
      this.dayEcharts.setOption({
        title: {
          text: "家庭户收视规模",
          subtext: this.ratios.usrcount_compare
            ? this.ratios.usrcount_compare + " 单位：户"
            : "单位：户",
          textStyle: {
            fontSize: this.fontSize * 1.05,
          },
          subtextStyle: {
            fontSize: this.fontSize,
          },
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: key,
          axisLabel: {
            interval: 0,
            rotate: 60,
          },
        },
        grid: {
          right: "5px",
          left: "40px",
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: e => {
              const T = this.formatType(e);
              let out = T.N;
              if (T.P > 0) out += "." + (T.P - 0);
              out += T.wei;
              return out;
            },
          },
        },
        series: [
          {
            type: "line",
            data: value,
          },
        ],
      });
    },
    upEcharts() {
      this.echarts && this.echarts.clear && this.echarts.clear();
      if (!this.echarts) {
        const doc = document.body;
        const width = doc.offsetWidth - 32;
        let height = width;
        if (height > 667) height = 667;
        this.echarts = echarts.init(
          this.$refs.pie,
          {},
          {
            width,
            height,
          }
        );
      }
      this.echarts.setOption({
        title: {
          text: "观看时长用户分布",
          subtext: "单位：%",
          textStyle: {
            fontSize: this.fontSize * 1.05,
          },
        },
        color: [
          "#87cefa",
          "#00bfff",
          "#1e90ff",
          "#0000ff",
          "#00008b",
          "#191970",
          "#000080",
          "#0000cd",
          "#4169e1",
          "#6495ed",
        ],
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [30, 70],
            center: ["50%", "50%"],
            emphasis: {
              //使用emphasis
              disable: false,
              scale: false, //不缩放
              scaleSize: 0, //为了防止失效直接设置未0
            },
            data: this.ratios.duration_list.map(v => {
              let bfb = (v.value * 100).toFixed(0) - 0;
              return {
                value: bfb,
                name: v.range + "\n 占比" + bfb + "%",
              };
            }),
          },
        ],
      });
    },
  },
  beforeUnmount() {},
  components: {
    vanCol,
    vanRow,
    vanIcon,
    vanPopup,
    vanCell,
    vanCellGroup,
    vanPopover,
  },
};
</script>

<style scoped>
.TraditionalAndXian {
  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;
}
.main {
  padding: 0.5em;
}
.content {
  margin: 0 auto;
  max-width: 667px;
}
.rise {
  /* 上升 */
  transform: rotate(180deg);
}
.titleTop {
  padding: 1em 0;
  font-weight: 600;
  background-image: linear-gradient(to right, #014392, #008fc4, #00428c);
  color: #fff;
  text-align: center;
}
</style>
<style>
.van-cell-group__title {
  font-size: 1.1rem;
  padding-left: 8px;
  color: #000;
  font-weight: 600;
}
</style>
