<template>
  <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 important_list"
        :key="'important' + i"
        :plain="important_act !== i"
        @click="() => important_change(i)"
      >
        {{ item.text }}
      </el-button>
    </el-button-group>
    <br />
    <el-row>
      <el-col :span="12">
        <com-table
          title="软广-品牌投放Top10"
          v-if="softBrand && softBrand.length"
          :tableList="softBrand"
          :child="true"
        >
          <template #cols>
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column
              show-overflow-tooltip
              align="center"
              property="brand"
              label="品牌名称"
            >
              <template #default="scope">
                {{ scope.row.brand || '--' }}
              </template>
            </el-table-column>
            <el-table-column align="center" property="timeSize">
              <template #header>
                <span
                  :style="
                    important_list[important_act].type === 2 ? 'color: red' : ''
                  "
                >
                  时长(秒)
                </span>
              </template>
              <template #default="scope">
                {{ numFor(scope.row.timeSize) }}
              </template>
            </el-table-column>
            <el-table-column align="center" property="pinci">
              <template #header>
                <span
                  :style="
                    important_list[important_act].type === 1 ? 'color: red' : ''
                  "
                >
                  频次(次)
                </span>
              </template>
              <template #default="scope">
                {{ numFor(scope.row.pinci) }}
              </template>
            </el-table-column>
            <el-table-column align="center" property="fee" label="环比">
              <template #default="scope">
                <svg
                  t="1646702687390"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2028"
                  width="20"
                  v-if="scope.row.huanbi < 0"
                  height="20"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    d="M558.933333 853.333333V128h-42.666666v733.866667l-145.066667-145.066667-29.866667 29.866667 192 192 192-192-29.866666-29.866667-136.533334 136.533333z"
                    fill="#50b1e6"
                    p-id="2029"
                  ></path>
                </svg>
                <svg
                  t="1646702847605"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2299"
                  width="20"
                  v-if="scope.row.huanbi > 0"
                  height="20"
                >
                  <path
                    d="M507.733333 213.333333v725.333334h42.666667V204.8l145.066667 145.066667 29.866666-29.866667L533.333333 128 341.333333 320l29.866667 29.866667L507.733333 213.333333z"
                    fill="#ff5757"
                    p-id="2300"
                  ></path>
                </svg>
              </template>
            </el-table-column>
          </template>
        </com-table>
      </el-col>
      <el-col :span="12">
        <com-table
          title="硬广-品牌投放Top10"
          v-if="softMarster && softMarster.length"
          :tableList="softMarster"
          :child="true"
        >
          <template #cols>
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column
              show-overflow-tooltip
              align="center"
              property="brand"
              label="品牌名称"
            >
              <template #default="scope">
                {{ scope.row.brand || '--' }}
              </template>
            </el-table-column>
            <el-table-column align="center" property="timeSize">
              <template #header>
                <span
                  :style="
                    important_list[important_act].type === 2 ? 'color: red' : ''
                  "
                >
                  时长(秒)
                </span>
              </template>
              <template #default="scope">
                {{ numFor(scope.row.timeSize) }}
              </template>
            </el-table-column>
            <el-table-column align="center" property="pinci">
              <template #header>
                <span
                  :style="
                    important_list[important_act].type === 1 ? 'color: red' : ''
                  "
                >
                  频次(次)
                </span>
              </template>
              <template #default="scope">
                {{ numFor(scope.row.pinci) }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="环比">
              <template #default="scope">
                <svg
                  t="1646702687390"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2028"
                  width="20"
                  v-if="scope.row.huanbi < 0"
                  height="20"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    d="M558.933333 853.333333V128h-42.666666v733.866667l-145.066667-145.066667-29.866667 29.866667 192 192 192-192-29.866666-29.866667-136.533334 136.533333z"
                    fill="#50b1e6"
                    p-id="2029"
                  ></path>
                </svg>
                <svg
                  t="1646702847605"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2299"
                  width="20"
                  v-if="scope.row.huanbi > 0"
                  height="20"
                >
                  <path
                    d="M507.733333 213.333333v725.333334h42.666667V204.8l145.066667 145.066667 29.866666-29.866667L533.333333 128 341.333333 320l29.866667 29.866667L507.733333 213.333333z"
                    fill="#ff5757"
                    p-id="2300"
                  ></path>
                </svg>
              </template>
            </el-table-column>
          </template>
        </com-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
// @ is an alias to /src
// import config from "@/config/index";

import comTable from "./table.vue";
import { ImportantCustomer } from "@/api/index.js";

export default {
  name: "AdvertisingEye",
  data() {
    return {
      important_act: 0,
      important_list: [
        {
          text: "时长",
          proportionType: "timeSize",
          type: 2,
        },
        {
          text: "频次",
          proportionType: "pinci",
          type: 1,
        },
      ],
      softMarster: [],
      softBrand: [],
    };
  },
  mounted() {
    this.init();
  },
  computed: {},
  props: {
    title: String,
    industry: Number,
    industryRang: Number,
  },
  watch: {
    industryRang() {
      this.init();
    },
    industry() {
      this.init();
    },
  },
  filter: {},
  methods: {
    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;
    },
    init() {
      ImportantCustomer({
        industryId: this.industry,
        dataType: this.industryRang + 1,
        type: this.important_list[this.important_act].type,
      }).then(res => {
        let marster = (res.harddata || []).splice(0, 10),
          brand = (res.softdata || []).splice(0, 10);
        this.softMarster = marster;
        this.softBrand = brand;
      });
    },
    important_change(i) {
      this.important_act = i;
      this.init();
    },
  },
  beforeUnmount: function() {},
  components: {
    comTable,
  },
};
</script>

<style></style>
