<template>
  <div class="ranking">
    <van-sticky offset-top="0">
      <van-nav-bar>
        <div slot="title" @click="showCalendar = true">
          <div class="titleMain">
            各频率频道日推数据
            <div class="tip" style="display: block;font-size: 16px;">数据来源于集团大数据平台</div>
            </div>
          <div class="body" v-if="day">
            {{ day }}
            <van-icon name="arrow-down" color="#333" />
          </div>
          <div class="tip">数据来源于集团大数据平台</div>
        </div>
      </van-nav-bar>
    </van-sticky>
    <div v-show="errorInformation.text === ''">
      <keep-alive>
        <component
          :valDay="valDay"
          :active="errorInformation.text === '' && active === 1"
          @start="comError"
          :is="tabs[active].com"
        />
      </keep-alive>
    </div>
    <van-empty
      v-show="errorInformation.text !== ''"
      :image="errorInformation.type"
      :description="errorInformation.text"
    />
    <van-tabbar v-model="active" active-color="#ee0a24" @change="change">
      <van-tabbar-item
        v-for="item in tabs"
        :key="item.icon"
        :icon="item.icon"
        >{{ item.name }}</van-tabbar-item
      >
    </van-tabbar>
    <van-calendar
      :max-date="maxDay"
      :min-date="minDay"
      :default-date="maxDay"
      v-model="showCalendar"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Tabbar as vanTabbar,
  TabbarItem as vanTabbarItem,
  Empty as vanEmpty,
  NavBar as vanNavBar,
  Sticky as vanSticky,
  Calendar as vanCalendar,
  Icon as vanIcon,
} from "vant";
import "vant/lib/icon/style/index";
import "vant/lib/calendar/style/index";
import "vant/lib/sticky/style/index";
import "vant/lib/empty/style/index";
import "vant/lib/empty/style/index";
import "vant/lib/tabbar/style/index";
import "vant/lib/nav-bar/style/index";

import dayJS from "dayjs";
import { infoDate } from "../../api/index";

import tvList from "./components/tvList.vue";
import moveClient from "./components/moveClient.vue";
import GBList from "./components/GBList.vue";

// import {} from "../utils/tool";
// import {} from "../api/index";
export default {
  name: "Ranking",

  data() {
    return {
      showCalendar: false,
      day: "",
      valDay: "",
      maxDay: new Date(),
      minDay: new Date(),
      active: window.sessionStorage
        ? sessionStorage.getItem("active") - 0 || 0
        : 0,
      tabs: [
        {
          name: "大屏排行",
          icon: "tv-o",
          com: "tvList",
        },
        {
          name: "广播排行",
          icon: "volume-o",
          com: "GBList",
        },
        {
          name: "新媒体排行",
          icon: "bar-chart-o",
          com: "moveClient",
        },
      ],
      errorInformation: {
        text: "",
        type: "search",
      },
    };
  },
  mounted() {
    infoDate().then(r => {
      this.maxDay = new Date(r.end);
      this.minDay = new Date(r.start);
      let d = new dayJS(this.maxDay);
      this.valDay = d.format("YYYYMMDD");
      this.day = d.format("YYYY-MM-DD");
    });
  },
  computed: {},
  methods: {
    change() {
      if (window.sessionStorage) sessionStorage.setItem("active", this.active);
    },
    onConfirm(e) {
      let d = new dayJS(e);
      this.valDay = d.format("YYYYMMDD");
      this.day = d.format("YYYY-MM-DD");
      this.showCalendar = false;
    },
    comError(data) {
      let p = {
        text: "",
        type: "search",
      };
      if (data.status === 200) {
        this.errorInformation = p;
        return;
      }
      p.text = data.msg || "网络错误";
      p.type = "network";
      this.errorInformation = p;
    },
  },
  beforeUnmount() {},
  components: {
    vanTabbar,
    vanTabbarItem,
    vanEmpty,
    vanNavBar,
    vanSticky,
    vanCalendar,
    vanIcon,
    GBList,
    tvList,
    moveClient,
  },
};
</script>

<style scoped>
.ranking {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 50px;
  box-sizing: border-box;
  background-color: #fff;
}
.tip {
  text-align: center;
  height: 1em;
  line-height: 1em;
  font-size: 12px;
  color: #999;
  padding-top: 5px;
}
.titleMain {
  display: none;
}
</style>
<style>
@media screen and (min-width: 900px) {
  .ranking {
    padding: 0 10%;
    margin: 0 auto;
  }
  .titleMain {
    display: block !important;
    font-size: 24px;
    font-weight: 500;
  }
  .van-sticky .van-nav-bar__content {
    height: 80px;
  }
  .body{
    font-size: 18px;
    float: right;
    margin-right: 5em;
    margin-top: -1.5em;
  }
  .tip {
    display: none;
  }
  .van-nav-bar__title,
  .van-nav-bar__title>div{
    width: 100%;
    max-width: 100%;
  }
}
</style>
