<template>
  <div class="AdvertisingEye">
    <el-loading></el-loading>
    <div class="titleHead" v-if="industry_list[industry_act]">
      <div class="line"></div>
      <div class="titleText" v-if="industry_act > 0">
        {{ industry_list[industry_act].industryName }}行业分析报告
      </div>
      <div class="titleText" v-else>
        电视广告大盘分析
      </div>
    </div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="2" class="colTime industrySelect">
          <span class="el-dropdown-link">
            <svg
              style="margin-top: 15px"
              t="1646296405629"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2170"
              width="32"
              height="32"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <path
                d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 476H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 760H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
                p-id="2171"
                fill="#ffffff"
              ></path>
              <path
                d="M160 228m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
                p-id="2172"
                fill="#ffffff"
              ></path>
              <path
                d="M160 512m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
                p-id="2173"
                fill="#ffffff"
              ></path>
              <path
                d="M160 796m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
                p-id="2174"
                fill="#ffffff"
              ></path>
            </svg>
          </span>
          <div class="industrySelctList">
            <div
              :class="{
                industrySelctitem: true,
                industrySelctactive: industry_act === i,
              }"
              v-for="(item, i) in industry_list"
              @click="() => selectIndustry1(i)"
              :key="'industry' + i"
            >
              {{ item.industryName }}
            </div>
          </div>
        </el-col>
        <el-col :span="22">
          <el-row>
            <el-col
              v-for="(item, i) in time_select"
              @click="() => selectIndustry(i)"
              :key="i"
              :span="colWidth"
              :class="{ colTime: true, active: active === i }"
            >
              {{ item.text }}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div v-if="industry_list && industry_list.length">
        <all
          v-if="industry_act === 0"
          :industryRang="active"
          :industry="industry_list[industry_act].industryId"
        ></all>
        <by
          v-if="industry_act > 0"
          :industryRang="active"
          :industry="industry_list[industry_act].industryId"
        ></by>
      </div>
      <el-empty v-else description="数据跑丢了"></el-empty>
    </el-card>
  </div>
</template>

<script>
// @ is an alias to /src
// import config from "@/config/index";
import { allindustryList } from "@/api/index.js";

import all from "./components/all.vue";
import by from "./components/by.vue";

export default {
  name: "AdvertisingEye",
  data() {
    return {
      currentTabComponent: "",
      industry_list: [],
      time_select: [],
      active: 0,
      soft_important_act: 0,
      hard_important_act: 0,
      industry_act: 0,
    };
  },
  mounted() {
    this.time_select = this.timeList();
    allindustryList().then(li => {
      let industry_list = [
        {
          industryId: 0,
          industryName: "全行业",
        },
        ...(li || []),
      ];
      this.industry_list = industry_list;
    });
  },
  computed: {
    colWidth() {
      return 6;
    },
  },
  filter: {},
  methods: {
    selectIndustry1(i) {
      this.industry_act = i;
    },
    selectIndustry(i) {
      this.active = i;
      i > 0 ? (this.currentTabComponent = "by") : "all";
    },
    /**
     * 距离当前之前某天日期格式
     * @param {number} clearDay
     * @returns [dateString]
     */
    dateFommat(clearDay = 0) {
      // 格式化日期 【年，月，日】
      let nowDate = new Date(new Date() - clearDay * 86400000),
        month =
          nowDate.getMonth() + 1 > 9
            ? nowDate.getMonth() + 1
            : "0" + (nowDate.getMonth() + 1),
        day =
          nowDate.getDate() > 9 ? nowDate.getDate() : "0" + nowDate.getDate();
      return [nowDate.getFullYear(), month, day];
    },
    timeList() {
      let o = this.dateFommat(1),
        time_select = [
          {
            text: "近1个月",
          },
        ];
      o[1] === 1 ? (o[0] = o[0] - 1) : "";
      o[1] > 1 ? --o[1] : (o[1] = 12);
      let lastMonth = new Date(o[0], o[1], 0);
      time_select[0].start = `${o[0]}-${o[1] > 9 ? o[1] : "0" + o[1]}-01`;
      time_select[0].end = `${o[0]}-${
        o[1] > 9 ? o[1] : "0" + o[1]
      }-${lastMonth.getDate()}`;
      let len = [3, 6];
      for (let i = 0; i < len.length; i++) {
        let v = len[i];
        var date = new Date();
        date.setMonth(date.getMonth() - v - 1);
        time_select.push({
          text: v === 3 ? "近三个月" : "近半年",
          startDate: `${date.getFullYear()}-${
            date.getMonth() > 9 ? date.getMonth() : "0" + date.getMonth()
          }-01`,
          endDate: time_select[0].end,
        });
      }
      time_select.push({
        text: `${o[0]}年`,
        startDate: `${o[0]}-01-01`,
        endDate: `${o[0]}-12-31`,
      });
      return time_select;
    },
  },
  beforeUnmount: function() {},
  components: {
    all,
    by,
  },
};
</script>

<style>
.AdvertisingEye {
  margin: 10px 15px;
  background: #fff;
}
.AdvertisingEye .headStyle .cell,
.AdvertisingEye .headStyle .cell *,
.AdvertisingEye .cell {
  color: #000;
}
.AdvertisingEye .headStyle .cell *,
.AdvertisingEye .headStyle .cell{
    font-weight: 600
}
.AdvertisingEye .el-card__body {
  padding: 0 0 20px 0;
}
.AdvertisingEye .colTime,
.AdvertisingEye .industrySelect .el-dropdown-link {
  height: 62px;
  color: #fff;
  cursor: pointer;
  font-size: 30px;
  line-height: 62px;
  text-align: center;
  background-color: rgba(25, 137, 250, 0.5);
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
.AdvertisingEye .colTime {
  border-left: 1px solid #fff;
}
.AdvertisingEye .colTime:hover,
.AdvertisingEye .active {
  background-color: rgba(25, 137, 250, 1);
}

.AdvertisingEye .industrySelect {
  position: relative;
  z-index: 100;
}

.AdvertisingEye .industrySelect .el-dropdown-link {
  background-color: rgba(0, 0, 0, 0);
}
.AdvertisingEye .industrySelect:hover {
  background-color: rgba(25, 137, 250, 0.5);
}
.AdvertisingEye .industrySelect .industrySelctList {
  display: none;
  width: 900px;
  text-align: left;
  margin-top: -5px;
  background-color: #fff;
  font-size: 14px;
  line-height: 1.5em;
  color: #000;
  box-shadow: 5px 5px 5px #ddd;
}
.AdvertisingEye .industrySelect:hover .industrySelctList {
  display: block;
}
.AdvertisingEye .industrySelctitem {
  display: inline-block;
  width: 16.6%;
  padding: 1em 2px;
  text-align: center;
  line-height: 1.5em;
}
.AdvertisingEye .industrySelctitem:hover,
.AdvertisingEye .industrySelctactive {
  color: #fff;
  background-color: #40a1f3;
}

.AdvertisingEye .titleHead {
  text-align: center;
  position: relative;
  height: 135px;
  line-height: 135px;
}
.AdvertisingEye .line{
    border-top: 1px solid #1989fa;
    position: absolute;
    width: 100%;
    top: 50%;
    z-index: 0;
}
.AdvertisingEye .titleText{
    background-color: #fff;
    color: #1989fa;
    position: relative;
    z-index: 1;
    padding: 0 10px;
    display: inline-block;
    font-weight: 700;
    font-size: 40px;
}

.AdvertisingEye .is-plain{
    background-color: #ffffff !important;
    border-color: #1989fa;
    border-right: 1px solid #1989fa !important;
    border-left: 1px solid #1989fa !important;
    color: #1989fa;
}
.AdvertisingEye .is-plain:hover{
    color: #1989fa;
    border-color: #1989fa;
}

.AdvertisingEye .darkRow:nth-child(odd) {
  background-color: #f3f3f3;
}
</style>
