<template>
  <div class="hardAdvertisement">
    <el-loading></el-loading>
    <div class="titleHead" v-if="channleList[channel_act]">
      <div class="line"></div>
      <div class="titleText">
        {{ channleList[channel_act].channelName }}硬广分析报告
      </div>
    </div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="2" class="colTime channelSelect">
          <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="channelSelctList">
            <div
              :class="{
                channelSelctitem: true,
                channelSelctactive: channel_act === i,
              }"
              v-for="(item, i) in channleList"
              @click="() => selectChannel1(i)"
              :key="'channel' + i"
            >
              {{ item.channelName }}
            </div>
          </div>
        </el-col>
        <el-col :span="22">
          <el-row>
            <el-col
              v-for="(item, i) in timeSelect"
              @click="() => selectChannel(i)"
              :key="i"
              :span="colWidth"
              :class="{ colTime: true, active: active === i }"
            >
              {{ item.text }}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <br />
      <el-card style="margin: 0 1em;">
        <div class="title_card">投放分析</div>
        <br />
        <el-button-group style="margin-left: 1.5em">
          <el-button
            size="small"
            type="primary"
            v-for="(item, i) in launch_list"
            :key="'launch' + i"
            :plain="launch_act !== i"
            @click="() => launch_change(i)"
          >
            {{ item.text }}
          </el-button>
        </el-button-group>
        <br />
        <div ref="launch" id="launch"></div>
      </el-card>
      <br />
      <el-card style="margin: 0 1em;">
        <div class="title_card">时段走势</div>
        <br />
        <el-button-group style="margin-left: 1.5em">
          <el-button
            size="small"
            type="primary"
            v-for="(item, i) in launch_list"
            :key="'trend' + i"
            :plain="trend_act !== i"
            @click="() => trend_change(i)"
          >
            {{ item.text }}
          </el-button>
        </el-button-group>
        <br />
        <div ref="trend"></div>
      </el-card>
      <br />
      <el-card style="margin: 0 1em;">
        <div class="title_card">行业占比</div>
        <el-row class="proportion">
          <el-col :span="10">
            <br />
            <el-button-group style="margin-left: 1.5em">
              <el-button
                size="small"
                type="primary"
                v-for="(item, i) in launch_list"
                :key="'launch' + i"
                :plain="proportion_act !== i"
                @click="() => proportion_change(i)"
              >
                {{ item.text }}
              </el-button>
            </el-button-group>
            <div ref="pieProportion"></div>
          </el-col>
          <el-col :span="14">
            <el-table
              :data="proportionData"
              header-row-class-name="headStyle"
              row-class-name="darkRow"
              border
              style="width: 100%"
              align="center"
            >
              <el-table-column
                align="center"
                type="index"
                label="序号"
                width="50"
              />
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="industry"
                label="大行业名称"
              />
              <!-- 逗号 .replace(/(?=(\B)(\d{3})+\.)/g, ",") -->
              <el-table-column align="center" label="费用（万元）">
                <template #default="scope">
                  <span>{{ (scope.row.fee / 10000).toFixed(2) }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="时长（秒）">
                <template #default="scope">
                  <span>{{ (scope.row.timeSize / 1000).toFixed(2) }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="pinci" label="频次（次）">
                <template #default="scope">
                  <span>{{ scope.row.pinci.toFixed(0) }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="品牌数（个）">
                <template #default="scope">
                  <span>{{ scope.row.customer.toFixed(0) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
      <br />
      <el-card style="margin: 0 1em;">
        <div class="title_card">客户投放详情</div>
        <br />
        <div>
          <el-button-group style="margin-left: 1.5em">
            <el-button
              size="small"
              type="primary"
              v-for="(item, i) in customer_list"
              :key="'customer' + i"
              :plain="customer_act !== i"
              @click="() => customer_change(i)"
            >
              {{ item.text }}
            </el-button>
          </el-button-group>
        </div>
        <el-row>
          <el-col :span="12" v-if="customerData.now && customerData.now.length">
            <div class="customer_list">
              <div class="customer_list_head">
                {{ customerData.now[0].dts }}至{{
                  customerData.now[0].dte
                }}
                单位（{{ customer_list[customer_act].company }}）
              </div>
              <div
                style="position: relative;height: 400px;overflow-y: auto;    "
                ref="left"
              >
                <div
                  class="customer_list_act"
                  :style="'top:' + hoverList[0] + 'px'"
                ></div>
                <table style="width: 100%">
                  <tbody>
                    <tr
                      class="tr"
                      v-for="(item, i) in customerData.now"
                      :key="item"
                      @mouseenter="() => hoverTableLeft(item, i)"
                    >
                      <td class="td" v-text="i + 1"></td>
                      <td class="td" v-text="item.brand"></td>
                      <td class="td">
                        <span
                          v-if="
                            customer_list[customer_act].customerType === 'fee'
                          "
                          >{{ (item.fee / 10000).toFixed(2) }}</span
                        >
                        <span
                          v-if="
                            customer_list[customer_act].customerType ===
                              'timeSize'
                          "
                          >{{ (item.timeSize / 60000).toFixed(2) }}</span
                        >
                        <span
                          v-if="
                            customer_list[customer_act].customerType === 'pinci'
                          "
                          >{{ item.pinci.toString() }}</span
                        >
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </el-col>
          <el-col
            :span="12"
            v-if="customerData.before && customerData.before.length"
          >
            <div class="customer_list">
              <div class="customer_list_head">
                {{ customerData.before[0].dts }}至{{
                  customerData.before[0].dte
                }}
                单位（{{ customer_list[customer_act].company }}）
              </div>

              <div
                style="position: relative;height: 400px;overflow-y: auto;"
                ref="right"
              >
                <div
                  class="customer_list_act"
                  :style="'top:' + hoverList[1] + 'px'"
                ></div>
                <table style="width: 100%">
                  <tbody>
                    <tr
                      class="tr"
                      v-for="(item, i) in customerData.before"
                      :key="item"
                      @mouseenter="() => hoverTableRight(item, i)"
                    >
                      <td class="td" v-text="i + 1"></td>
                      <td class="td" v-text="item.brand"></td>
                      <td class="td">
                        <span
                          v-if="
                            customer_list[customer_act].customerType === 'fee'
                          "
                          >{{ (item.fee / 10000).toFixed(2) }}</span
                        >
                        <span
                          v-if="
                            customer_list[customer_act].customerType ===
                              'timeSize'
                          "
                          >{{ (item.timeSize / 60000).toFixed(2) }}</span
                        >
                        <span
                          v-if="
                            customer_list[customer_act].customerType === 'pinci'
                          "
                          >{{ item.pinci.toString() }}</span
                        >
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <br />
      <el-card style="margin: 0 1em;">
        <div class="title_card">
          优势客户Top10（本频道有投放其他频道无投放）
        </div>
        <el-table
          :data="advantageous"
          border
          header-row-class-name="headStyle"
          row-class-name="darkRow"
          style="width: 100%"
          align="center"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="brand"
            label="品牌名称"
          />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="pruducter"
            label="厂商名称"
          />
          <el-table-column align="center" prop="customer" label="产品数量" />
          <el-table-column align="center" prop="fee">
            <template #header>
              <down
                :act="advantage_act === 1"
                title="费用（万元）"
                @click="() => advantageSort(1)"
              ></down>
            </template>
            <template #default="scope">
              <span>{{ (scope.row.fee / 10000).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="timeSize">
            <template #header>
              <down
                :act="advantage_act === 2"
                title="时长（秒）"
                @click="() => advantageSort(2)"
              ></down>
            </template>
            <template #default="scope">
              <span>{{ (scope.row.timeSize / 1000).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="pinci">
            <template #header>
              <down
                :act="advantage_act === 3"
                title="频次（次）"
                @click="() => advantageSort(3)"
              ></down>
            </template>
            <template #default="scope">
              <span>{{ scope.row.pinci.toFixed(0) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <br />
      <el-card style="margin: 0 1em;">
        <div class="title_card">潜在客户Top10</div>
        <el-table
          :data="potentialData"
          border
          header-row-class-name="headStyle"
          row-class-name="darkRow"
          style="width: 100%"
          align="center"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="brand"
            label="品牌名称"
          />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="pruducter"
            label="厂商名称"
          />
          <el-table-column align="center" prop="fee">
            <template #header>
              <down
                :act="potential_act === 1"
                title="费用（万元）"
                @click="() => potentialSort(1)"
              ></down>
            </template>
            <template #default="scope">
              <span>{{ (scope.row.fee / 10000).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="timeSize">
            <template #header>
              <down
                :act="potential_act === 2"
                title="时长（秒）"
                @click="() => potentialSort(2)"
              ></down>
            </template>
            <template #default="scope">
              <span>{{ (scope.row.timeSize / 1000).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="pinci">
            <template #header>
              <down
                :act="potential_act === 3"
                title="频次（次）"
                @click="() => potentialSort(3)"
              ></down>
            </template>
            <template #default="scope">
              <span>{{ scope.row.pinci.toFixed(0) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="投放频道数">
            <template #default="scope">
              <span>{{ scope.row.customer.toFixed(0) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <br />
      <el-card style="margin: 0 1em;">
        <div class="title_card">频道饱和度</div>
        <br />
        <div ref="saturation"></div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
// @ is an alias to /src
let launch_chart = undefined,
  trend_chart = undefined,
  proportion_chart = undefined,
  saturation_chart = undefined;
import {
  adChannelList,
  launchList,
  trendList,
  proportionList,
  customerList,
  advantageousList,
  potentialList,
  saturationList,
} from "@/api/index.js";
// import config from "@/config/index";
import down from "./components/down.vue";
import * as echarts from "echarts";
export default {
  name: "hardAdvertisement",
  data() {
    return {
      channleList: [],
      hoverList: [0, 0],
      active: 0,
      timeSelect: [],
      channel_act: 0,
      proportion_act: 0,
      customer_act: 0,
      launch_act: 0,
      trend_act: 0,
      advantage_act: 1,
      potential_act: 1,
      launch_list: [
        {
          text: "费用",
          proportionType: "fee",
          type: 3,
          unit: "元",
        },
        {
          text: "时长",
          proportionType: "timeSize",
          type: 2,
          unit: "分",
        },
        {
          text: "频次",
          proportionType: "pinci",
          type: 1,
          unit: "次",
        },
        {
          text: "客户量",
          proportionType: "customer",
          type: 4,
          unit: "个",
        },
      ],
      customer_list: [
        {
          text: "费用",
          customerType: "fee",
          company: "万元",
          type: 3,
        },
        {
          text: "时长",
          customerType: "timeSize",
          company: "分",
          type: 2,
        },
        {
          text: "频次",
          customerType: "pinci",
          company: "次",
          type: 1,
        },
      ],

      proportionData: [],
      advantageous: [],
      potentialData: [],
      customerData: { before: [], now: [] },
    };
  },
  mounted() {
    this.timeSelect = this.timeList();
    this.init();
  },
  computed: {
    colWidth() {
      return 6;
    },
  },
  filter: {},
  methods: {
    selectChannel1(i) {
      this.channel_act = i;
      this.init();
    },
    selectChannel(i) {
      this.active = i;
      this.init();
    },
    init() {
      adChannelList().then(r => {
        this.channleList = r || [];
        let sel = this.timeSelect[this.active];
        launchList({
          channelId: this.channleList[this.channel_act].channelId,
          start: sel.startDate,
          end: sel.endDate,
        }).then(launch => {
          this.launchChart(launch);
        });

        trendList({
          channelId: this.channleList[this.channel_act].channelId,
          start: sel.startDate,
          end: sel.endDate,
        }).then(trend => {
          this.trendChart(trend);
        });

        proportionList({
          channelId: this.channleList[this.channel_act].channelId,
          start: sel.startDate,
          end: sel.endDate,
          order: this.launch_list[this.proportion_act].type,
        }).then(proportion => {
          let pro = proportion.sort((a, b) => {
            return (
              b[this.launch_list[this.proportion_act].proportionType] -
              a[this.launch_list[this.proportion_act].proportionType]
            );
          });
          this.proportionData = pro || [];
          this.proportionChart();
        });

        customerList({
          channelId: this.channleList[this.channel_act].channelId,
          start: sel.startDate,
          end: sel.endDate,
          order: this.customer_list[this.customer_act].type,
        }).then(customer => {
          this.customerData = customer || { before: [], now: [] };
        });

        advantageousList({
          channelId: this.channleList[this.channel_act].channelId,
          start: sel.startDate,
          end: sel.endDate,
          order: this.advantage_act,
        }).then(advantageous => {
          this.advantageous = advantageous || [];
        });

        potentialList({
          channelId: this.channleList[this.channel_act].channelId,
          start: sel.startDate,
          end: sel.endDate,
        }).then(potential => {
          this.potentialData = potential || [];
        });

        saturationList({
          channelId: this.channleList[this.channel_act].channelId,
          start: sel.startDate,
          end: sel.endDate,
        }).then(saturation => {
          this.saturationChart(saturation);
        });
      });
    },
    /**
     * 距离当前之前某天日期格式
     * @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),
        oldT = this.dateFommat(7),
        timeSelect = [
          {
            text: "最近7天",
            startDate: oldT.join("-"),
            endDate: o.join("-"),
          },
        ];

      for (let i = 1; i <= 3; i++) {
        let T = this.dateFommat(30 * i),
          lastDay = new Date(T[0], T[1], 0);
        timeSelect.push({
          text: `${T[0]}年${T[1]}月`,
          startDate: `${T[0]}-${T[1]}-01`,
          endDate: `${T[0]}-${T[1]}-${lastDay.getDate()}`,
        });
      }
      return timeSelect;
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 !== 0) return "darkRow";
      return "";
    },
    customer_change(i) {
      this.customer_act = i;
      let sel = this.timeSelect[this.active];
      customerList({
        channelId: this.channleList[this.channel_act].channelId,
        start: sel.startDate,
        end: sel.endDate,
        order: this.customer_list[this.customer_act].type,
      }).then(customer => {
        this.customerData = customer || { before: [], now: [] };
      });
    },
    launch_change(i) {
      this.launch_act = i;
      let sel = this.timeSelect[this.active];
      launchList({
        channelId: this.channleList[this.channel_act].channelId,
        start: sel.startDate,
        end: sel.endDate,
      }).then(launch => {
        this.launchChart(launch);
      });
    },
    trend_change(i) {
      this.trend_act = i;
      let sel = this.timeSelect[this.active];
      trendList({
        channelId: this.channleList[this.channel_act].channelId,
        start: sel.startDate,
        end: sel.endDate,
      }).then(trend => {
        this.trendChart(trend);
      });
    },
    proportion_change(i) {
      this.proportion_act = i;
      let sel = this.timeSelect[this.active];
      proportionList({
        channelId: this.channleList[this.channel_act].channelId,
        start: sel.startDate,
        end: sel.endDate,
        order: this.launch_list[this.proportion_act].type,
      }).then(proportion => {
        this.proportionData = proportion || [];
        this.proportionChart();
      });
    },
    getDate(date, i) {
      const org = new Date(date);
      const d = new Date(org + i * 86400000);
      let m = d.getMonth() + 1,
        day = d.getDate();
      m > 9 ? "" : (m = "0" + m);
      day > 9 ? "" : (day = "0" + day);
      return [d.getFullYear(), m, day].join("-");
    },
    launchtrendData(list = { before: [], now: [] }, keyName) {
      const org = list;
      let old = org.before || [];
      let now = org.now || [];
      let len = Math.max(old.length, now.length),
        key = this.launch_list[this[keyName + "_act"]].proportionType;
      let keys = [],
        realKey = [[], []],
        value = [[], []],
        lendata = [];
      for (let i = 0; i < len; i++) {
        let o = old[i] || {},
          n = now[i] || {},
          realItem = n.dt ? n : o;
        if (keyName === "launch") keys.push(this.getDate(realItem.dt, i));
        if (keyName === "trend") {
          let eT = Number(realItem.hour) + 1;
          eT > 9 ? "" : (eT = "0" + eT);
          keys.push(realItem.hour + ":00~" + eT + ":00");
        }
        o.dt && realKey[0].push(o.dt);
        n.dt && realKey[1].push(n.dt);
        o[key] >= 0 &&
          value[0].push(
            key === "timeSize" ? (o[key] / 60000).toFixed(2) - 0 : o[key]
          );
        n[key] >= 0 &&
          value[1].push(
            key === "timeSize" ? (n[key] / 60000).toFixed(2) - 0 : n[key]
          );
      }

      if (old && old.length) {
        if (old[0].dts && old[0].dts === old[old.length - 1].dte)
          lendata.push(`${old[0].dt}`);
        else
          lendata.push(
            `${old[0].dts || old[0].dt}到${old[old.length - 1].dte ||
              old[old.length - 1].dt}`
          );
      }
      if (now && now.length) {
        if (now[0].dts && now[0].dts === now[now.length - 1].dte)
          lendata.push(`${now[0].dt}`);
        else
          lendata.push(
            `${now[0].dts || now[0].dt}到${now[now.length - 1].dte ||
              now[now.length - 1].dt}`
          );
      }
      return {
        keys,
        realKey,
        lendata,
        value,
      };
    },
    saturationData(list = []) {
      const org = list;
      let keys = [],
        value = [];
      for (let i = 0; i < org.length; i++) {
        let o = org[i] || {};
        let eT = Number(o.hour) + 1;
        eT > 9 ? "" : (eT = "0" + eT);
        if (o.hour === "平均值") {
          keys.push(o.hour);
        } else keys.push(o.hour + ":00~" + eT + ":00");
        value.push((o.timeSize * 100).toFixed(2) - 0);
      }
      return {
        keys,
        value,
      };
    },
    numFor(num) {
      if (!num) return 0;
      if (isNaN(num)) return 0;
      if (num >= 100000000) return (num / 100000000).toFixed(2) - 0 + "亿";
      if (num >= 10000) return (num / 10000).toFixed(2) - 0 + "万";
      return Number(num).toFixed(2) - 0;
    },
    launchChart(list) {
      if (!this.$refs.launch) return;
      if (launch_chart && launch_chart.dispose) {
        launch_chart.dispose();
        launch_chart = undefined;
      }
      launch_chart = echarts.init(this.$refs.launch);
      let chartData = this.launchtrendData(list, "launch");
      launch_chart.resize({
        height: (this.$refs.launch.offsetWidth * 6) / 16,
      });
      var option = {
        legend: {
          show: true,
          data: chartData.lendata,
        },
        xAxis: {
          type: "category",
          data: chartData.keys,
          boundaryGap: false,
          axisLabel: {
            formatter: arr => {
              return arr.split(" ")[0];
            },
          },
        },
        yAxis: {
          type: "value",
          name: "单位：" + this.launch_list[this.launch_act].unit,
          scale: true,
          axisLabel: {
            formatter: arr => {
              return this.numFor(arr);
            },
          },
        },
        color: ["#1b9ade", "#fd5555"],
        tooltip: {
          confine: true,
          trigger: "axis",
          textStyle: {
            color: "#000000",
          },
          backgroundColor: "rgba(255,255,255,.8)",
          borderColor: "#1b9ade",
          borderWidth: 1,
          formatter: item => {
            let s = item[0] && item[0].color === "#1b9ade" ? item[0] || {} : item[1] || {},
              e = item[0] && item[0].color === "#1b9ade" ? item[1] || {} : item[0] || {};
            let bf = list.before || [],
              no = list.now || [];
            let vb = this.numFor(s.value || 0),
              vn = this.numFor(e.value || 0),
              launch_list = this.launch_list[this.launch_act] || {};
            let out = `${launch_list.text}`;
            if (s.dataIndex >= 0) {
              let dt = bf[s.dataIndex] ? bf[s.dataIndex].dt : "";
              out += ` <br /> <div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: #1b9ade' ></div> ${dt}： ${vb +
                launch_list.unit}`;
            }
            if (e.dataIndex >= 0) {
              let dt = no[e.dataIndex] ? no[e.dataIndex].dt : "";
              out += `<br /> <div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: #fd5555' ></div> ${dt}： ${vn +
                launch_list.unit}`;
            }

            return out;
          },
        },
        grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
        series: chartData.value.map((data, i) => {
          return {
            name: chartData.lendata[i],
            data,
            type: "line",
            smooth: true,
            showSymbol: false,
            itemStyle: {
              emphasis: {
                borderWidth: 3,
                borderColor: i === 0 ? "#1b9ade" : "#fd5555",
                color: i === 0 ? "#1b9ade" : "#fd5555",
                shadowColor:
                  i === 0
                    ? "rgba(27, 154, 222, 0.5)"
                    : "rgba(253, 85, 85, 0.5)",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          };
        }),
      };
      option && launch_chart.setOption(option);
    },
    trendChart(list) {
      if (!this.$refs.trend) return;
      if (trend_chart && trend_chart.dispose) {
        trend_chart.dispose();
        trend_chart = undefined;
      }
      trend_chart = echarts.init(this.$refs.trend);
      let chartData = this.launchtrendData(list, "trend");
      trend_chart.resize({
        height: (this.$refs.trend.offsetWidth * 6) / 16,
      });
      var option = {
        legend: {
          show: true,
          data: chartData.lendata,
        },
        xAxis: {
          type: "category",
          data: chartData.keys,
          axisLabel: {
            rotate: 30, // 旋转30度
          },
          nameTextStyle: {
            align: "right",
          },
        },
        tooltip: {
          confine: true,
          trigger: "item",
          textStyle: {
            color: "#000000",
          },
          backgroundColor: "rgba(255,255,255,.9)",
          borderColor: "#1b9ade",
          borderWidth: 1,
          formatter: item => {
            let s = item || {};
            let vb = this.numFor(s.value || 0),
              sele = this.launch_list[this.trend_act];
            return `${sele.text} <br />${s.name} ${vb + (sele.unit || "")}`;
          },
        },
        yAxis: {
          type: "value",
          name: "单位：" + this.launch_list[this.trend_act].unit,
          scale: true,
          axisLabel: {
            formatter: arr => {
              return this.numFor(arr);
            },
          },
        },
        color: ["#1b9ade", "#fd5555"],
        grid: [{ left: 100, top: "10%", buttom: 0, right: 100 }],
        series: chartData.value.map((v, i) => {
          return {
            name: chartData.lendata[i],
            data: v,
            type: "bar",
            smooth: true,
          };
        }),
      };

      option && trend_chart.setOption(option);
    },
    saturationChart(list) {
      if (!this.$refs.saturation) return;
      if (saturation_chart && saturation_chart.dispose) {
        saturation_chart.dispose();
        saturation_chart = undefined;
      }
      saturation_chart = echarts.init(this.$refs.saturation);
      let chartData = this.saturationData(list);
      saturation_chart.resize({
        height: (this.$refs.saturation.offsetWidth * 6) / 16,
      });
      let obj = this.timeSelect[this.active] || {};
      var option = {
        title: {
          text: "饱和度(%) " + obj.startDate + "到" + obj.endDate,
          left: "center",
        },
        xAxis: {
          type: "category",
          data: chartData.keys,
          axisLabel: {
            rotate: 30, // 旋转30度
          },
        },
        tooltip: {
          confine: true,
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          formatter: item => {
            let key = item.name + ": ";
            return key + (item.value.toFixed(2) - 0) + "%";
          },
        },
        yAxis: {
          type: "value",
          name: "单位：%",
          scale: true,
          axisLabel: {
            formatter: arr => {
              return this.numFor(arr);
            },
          },
        },
        grid: [{ left: 50, top: "10%", buttom: 0, right: 100 }],
        color: ["#1b9ade", "#fd5555"],
        series: [
          {
            name: "饱和度",
            data: chartData.value,
            type: "bar",
            smooth: true,
            markLine: {
              data: [
                {
                  name: "平均值",
                  yAxis: chartData.value[chartData.value.length - 1] || 0,
                },
              ],
            },
          },
        ],
      };

      option && saturation_chart.setOption(option);
    },
    proportionChart() {
      if (!this.$refs.pieProportion) return;
      if (proportion_chart && proportion_chart.dispose) {
        proportion_chart.dispose();
        proportion_chart = undefined;
      }
      proportion_chart = echarts.init(this.$refs.pieProportion);
      let chartData = this.proportionData;
      proportion_chart.resize({
        height: 40 * chartData.length,
      });
      var option = {
        tooltip: {
          confine: true,
          trigger: "item",
          formatter: "{b} {d}%",
        },
        legend: {
          left: "center",
          bottom: 10,
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: chartData.map(v => {
              return {
                value: v[this.launch_list[this.proportion_act].proportionType],
                name: v.industry,
              };
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && proportion_chart.setOption(option);
    },
    advantageSort(type) {
      let sel = this.timeSelect[this.active];
      this.advantage_act = type;
      advantageousList({
        channelId: this.channleList[this.channel_act].channelId,
        start: sel.startDate,
        end: sel.endDate,
        order: this.advantage_act,
      }).then(advantageous => {
        this.advantageous = advantageous || [];
      });
    },
    potentialSort(type) {
      let sel = this.timeSelect[this.active];
      this.potential_act = type;
      potentialList({
        channelId: this.channleList[this.channel_act].channelId,
        start: sel.startDate,
        end: sel.endDate,
        order: this.potential_act,
      }).then(potential => {
        this.potentialData = potential || [];
      });
    },
    hoverTableLeft(row, thisIndex) {
      let ortherList = this.customerData.before || [];
      let ortherIndex = ortherList.findIndex(item => {
        return item.brand === row.brand;
      });

      let left = { item: this.customerData.now || {}, index: thisIndex },
        right = { item: this.customerData.before || {}, index: ortherIndex };

      this.hoverList = this.linkScroll(left, right);

      this.$refs.right.scrollTop = this.hoverList[1] - 100;
    },
    hoverTableRight(row, thisIndex) {
      let ortherList = this.customerData.now || [];
      let ortherIndex = ortherList.findIndex(item => {
        return item.brand === row.brand;
      });

      let left = { item: this.customerData.now || {}, index: ortherIndex },
        right = { item: this.customerData.before || {}, index: thisIndex };

      this.hoverList = this.linkScroll(left, right);
      this.$refs.left.scrollTop = this.hoverList[0] - 100;
    },
    linkScroll(left, right) {
      let scrollTop = [];
      scrollTop[0] = this.$refs.left.querySelectorAll("tr")[
        left.index
      ].offsetTop;
      scrollTop[1] = this.$refs.right.querySelectorAll("tr")[
        right.index
      ].offsetTop;
      return scrollTop;
    },
  },
  beforeUnmount: function() {
    launch_chart.dispose();
    trend_chart.dispose();
    proportion_chart.dispose();
    saturation_chart.dispose();
    launch_chart = undefined;
    trend_chart = undefined;
    proportion_chart = undefined;
    saturation_chart = undefined;
  },
  components: {
    down,
  },
};
</script>

<style>
.hardAdvertisement {
  margin: 10px 15px;
  background: #fff;
}
.hardAdvertisement .headStyle .cell,
.hardAdvertisement .headStyle .cell * {
  color: #000;
  font-weight: 600;
}
.hardAdvertisement .el-card__body {
  padding: 0 0 20px 0;
}
.hardAdvertisement .colTime,
.hardAdvertisement .channelSelect .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;
}
.hardAdvertisement .colTime:not(:first-child) {
  border-left: 1px solid #fff;
}
.hardAdvertisement .colTime:hover,
.hardAdvertisement .active {
  background-color: rgba(25, 137, 250, 1);
}

.hardAdvertisement .channelSelect {
  position: relative;
  z-index: 100;
}

.hardAdvertisement .channelSelect .el-dropdown-link {
  background-color: rgba(0, 0, 0, 0);
}
.hardAdvertisement .channelSelect:hover {
  background-color: rgba(25, 137, 250, 0.5);
}
.hardAdvertisement .channelSelect .channelSelctList {
  display: none;
  width: 600px;
  margin-top: -5px;
  background-color: #fff;
  font-size: 14px;
  line-height: 1.5em;
  color: #000;
  box-shadow: 5px 5px 5px #ddd;
}
.hardAdvertisement .channelSelect:hover .channelSelctList {
  display: block;
}
.hardAdvertisement .channelSelctitem {
  display: inline-block;
  width: 16.6%;
  padding: 1em 2px;
  line-height: 1.5em;
}
.hardAdvertisement .channelSelctitem:hover,
.hardAdvertisement .channelSelctactive {
  color: #fff;
  background-color: #40a1f3;
}
.hardAdvertisement .title_card {
  font-weight: 600;
  background-color: #1989fa;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  padding-left: 12px;
}
.hardAdvertisement .darkRow:nth-child(odd) {
  background-color: #f3f3f3;
}
.hardAdvertisement .customer_list {
  width: 437px;
  margin: 30px auto;
  border: 1px solid #d2e7fc;
  border-top: 3px solid #40a1f3;
}
.hardAdvertisement .customer_list_act {
  position: absolute;
  border: 2px solid #65aaff;
  width: 405px;
  z-index: 1;
  height: 47px;
  top: 42px;
  left: 16px;
  transition: all 0.2s;
}
.hardAdvertisement .customer_list_head {
  line-height: 42px;
  height: 42px;
  color: #378ee8;
  border-bottom: none;
  font-family: "Microsoft YaHei";
  text-align: center;
  font-size: 18px;
  background-color: #d9efff;
}
.hardAdvertisement .headStyle .cell,
.hardAdvertisement .cell {
  color: #000;
}
.hardAdvertisement .headStyle .cell {
  font-weight: 600;
}
.hardAdvertisement .titleHead {
  text-align: center;
  position: relative;
  height: 135px;
  line-height: 135px;
}
.hardAdvertisement .line {
  border-top: 1px solid #1989fa;
  position: absolute;
  width: 100%;
  top: 50%;
  z-index: 0;
}
.hardAdvertisement .titleText {
  background-color: #fff;
  color: #1989fa;
  position: relative;
  z-index: 1;
  padding: 0 10px;
  display: inline-block;
  font-weight: 700;
  font-size: 40px;
}

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

.hardAdvertisement .tr {
  border-bottom: 1px solid rgb(128, 128, 128);
}
.hardAdvertisement .td {
  padding: 12px 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: center;
  color: #439ff4;
}
</style>
