<template>
  <div class="tv-list">
    <div class="itemHead">
      <van-row>
        <van-col span="3" class="td"> 排名 </van-col>
        <van-col span="5" class="td"> 单位名称 </van-col>
        <van-col span="8" class="td"> 栏目 </van-col>
        <van-col span="6" class="td"> 收视率 </van-col>
        <van-col span="2" class="td"></van-col>
      </van-row>
    </div>
    <van-row
      @click="() => showPopup(o)"
      class="item"
      v-for="(v, o) in platfromData || []"
      :key="v.name"
    >
      <van-col
        span="3"
        :class="{ td: true }"
        :style="{ color: color[o] || '#000', fontWeight: 600 }"
      >
        {{ o + 1 }}
      </van-col>
      <van-col span="5" :class="{ td: true }">
        {{ v.channelname }}
      </van-col>
      <van-col span="8" :class="{ td: true }">
        {{ v.schedulename }}
      </van-col>
      <van-col span="6" :class="{ td: true }" style="color: #e1a74f">
        {{ formatNum(v.watchrate) }}%
      </van-col>
      <van-col span="2" class="td">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <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="color: #5470c6">
            返回
            <van-icon name="share-o" />
          </div>
        </van-cell>
        <div style="padding: 0 16px">
          <van-row>
            <van-col span="6" class="td"> 收视率： </van-col>
            <van-col span="6" class="td"> {{ ratios.watchrate }}% </van-col>
            <van-col span="6" class="td"> 市占率： </van-col>
            <van-col span="6" class="td">{{ ratios.occrate }}% </van-col>
          </van-row>
          <div ref="pie"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Col as vanCol,
  Row as vanRow,
  Icon as vanIcon,
  Popup as vanPopup,
  Cell as vanCell,
} from "vant";
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 {} from "../utils/tool";
import { jsonDataRanking } from "../../../api/index";

import echarts from "../../../utils/echarts";

export default {
  name: "tv-list",
  data() {
    return {
      setact: false,
      show: false,
      charts: undefined,
      ratios: [],
      platfromData: [],
      color: ["#ff0036", "#ff9b00", "#ffcc00"],
    };
  },
  props: {
    valDay: String,
  },
  watch: {
    valDay() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  computed: {},
  methods: {
    init() {
      //   初始
      if (!this.valDay) return;
      this.setact = true;
      this.getData();
    },
    formatNum(num) {
      if (isNaN(num)) return 0;
      return Number(num).toFixed(4) - 0;
    },
    showPopup(i) {
      this.show = true;
      this.ratios = this.platfromData[i] || [];
      this.$nextTick(() => {
        this.upEcharts();
      });
    },
    upEcharts() {
      if (!this.ratios.ratios || !this.ratios.ratios.length) {
        this.echarts && this.echarts.dispose && this.echarts.dispose();
        return;
      }
      if (!this.echarts) {
        const doc = document.body;
        const width = doc.offsetWidth - 32;
        this.echarts = echarts.init(
          this.$refs.pie,
          {},
          {
            width,
            height: width,
          }
        );
      }
      const key = [],
        value = [];
      let max = 0;
      this.ratios.ratios.map(v => {
        let val = (v.value * 100).toFixed(2) - 0;
        key.push(v.name);
        value.push(val);
        max < val && (max = val);
      });
      max += max * 0.2;
      max > 100 && (max = 100);
      this.echarts.setOption({
        title: {
          text: "观看时长用户分布",
          textStyle: {
            fontSize: 14,
          },
        },
        radar: {
          shape: "circle",
          center: ["50%", "50%"],
          radius: 100,
          indicator: key.map((v, i) => {
            let m = value[i] / max,
              val = max;
            m <= 0.5 ? (val = 0.5 * max) : "";
            return {
              name: v,
              max: val,
            };
          }),
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value,
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value + "%";
                  },
                },
                itemStyle: {
                  color: "#F9713C",
                },
                areaStyle: {
                  opacity: 0.1,
                },
              },
            ],
          },
        ],
      });
    },
    getData() {
      jsonDataRanking({
        url: ["tv", this.valDay].join("-"),
      })
        .then(res => {
          this.platfromData = res || [];
          this.$emit("start", {
            status: 200,
          });
        })
        .catch(err => {
          this.$emit("start", {
            status: err,
          });
        });
    },
  },
  beforeUnmount() {},
  components: {
    vanCol,
    vanRow,
    vanIcon,
    vanPopup,
    vanCell,
  },
};
</script>

<style scoped>
.tv-list {
  font-size: 15px;
  padding: 5px;
}
.td {
  text-align: center;
  line-height: 2.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item {
  overflow: hidden;
  border-radius: 3px;
  margin-top: 11px;
  background-color: #f5f6f8;
}
.itemHead {
  margin-top: 0;
  background-color: #f5f6f8;
}
.main {
  padding: 0.5em;
}
</style>
<style>
.tv-list .van-tab {
  font-size: 16px;
}
</style>
