<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-17 11:44:43
 -->
<!--
<data-statistics-child :activeData="activeData" :barChartData="barChartData"></data-statistics-child>

import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
-->

<template>
  <div class="data-statistics">
    <div class="data-statistics-body flex">
      <div class="data-statistics-left">
        <ul class="flex flex-column flex-pack-center flex-align-center">
          <li class="flex-1 flex flex-pack-center flex-align-center">
            <div class="data-statistics-icon"><img src="../../assets/images/bgl.png" alt="" /></div>

            <div class="data-statistics-txt flex flex-column">
              <div class="font-14 color-606266 font-w-400">活动曝光量</div>
              <div class="font-22 color-303133 font-w-600 p-t-10">{{ activeData.exposure | formatThousand }}</div>
            </div>
          </li>
          <li class="flex-1 flex flex-pack-center flex-align-center">
            <div class="data-statistics-icon"><img src="../../assets/images/cyrs.png" alt="" /></div>

            <div class="data-statistics-txt flex flex-column">
              <div class="font-14 color-606266 font-w-400">参与人数</div>
              <div class="font-22 color-303133 font-w-600 p-t-10">{{ activeData.attend | formatThousand }}</div>
            </div>
          </li>
          <li class="flex-1 flex flex-pack-center flex-align-center">
            <div class="data-statistics-icon"><img src="../../assets/images/syrs.png" alt="" /></div>

            <div class="data-statistics-txt flex flex-column">
              <div class="font-14 color-606266 font-w-400">受邀人数</div>
              <div class="font-22 color-303133 font-w-600 p-t-10">{{ activeData.invited | formatThousand }}</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="data-right-wrap">
        <div class="data-right-top flex">
          <div class="data-statistics-middle flex-1 border-box m-l-20">
            <div class="font-14 color-606266">参与率</div>
            <div :class="['font-22 color-303133 p-t-5 ', activeData.attendRate]">{{ activeData.attendRate ? Number(Number(activeData.attendRate) * 100).toFixed(2) : 0 }} %</div>
            <div class="data-percentage">
              <div class="data-percentage-inner" :style="{ width: Number(Number(activeData.attendRate) * 100).toFixed(2) + '%' }"></div>
            </div>
          </div>
          <div class="data-statistics-right flex-1 border-box m-l-20">
            <div class="font-14 color-606266">传播系数</div>
            <div class="font-22 color-303133 p-t-5">{{ activeData.spread }}</div>
            <ul class="spread-ul">
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
              <li>
                <div class="gray"></div>
                <div :class="['blue', 'blue' + activityId]" style="width: 0px;"></div>
              </li>
            </ul>
            <!-- <div
              v-if="activeData.spread < 10"
              class="data-percentage"
            >
              <template v-for="(child, key) in Math.floor(activeData.spread)">
                <i
                  class="iconfont icon-xiaoren font-22 color-2F54EB"
                  :key="key + 'xrbg'"
                ></i>
              </template>
              <svg
                v-if="(Math.floor(activeData.spread) < activeData.spread) && (activeData.spread >= Math.floor(activeData.spread) + 0.5)"
                class="icon"
                aria-hidden="true"
                :key="key + 'xrbg'"
              >
                <use xlink:href="#icon-banxiaoren"></use>
              </svg>
              <template v-for="(child, key) in 10 - Math.ceil(activeData.spread)">
                <i
                  class="iconfont icon-xiaoren font-22 icon-xiaoren-opacity"
                  :key="key + 'xr'"
                ></i>
              </template>
            </div>
            <div
              v-if="activeData.spread >= 10"
              class="data-percentage"
            >
              <template v-for="(child, key) in 10">
                <i
                  class="iconfont icon-xiaoren font-22 color-2F54EB"
                  :key="key + 'xrbg'"
                ></i>
              </template>
            </div> -->
          </div>
        </div>
        <div class="data-right-bottom">
          <bar-chart :barChartData="barChartData" :charHeight="charHeight"></bar-chart>
        </div>
        <!--<div class="chart-title font-12 color-000 text-center">- 近15天趋势图 -</div>-->
      </div>
    </div>
  </div>
</template>
<script>
import barChart from '@/components/active/bar-chart.vue';
export default {
  name: 'data-statistics',
  props: {
    activeData: {
      type: [Object, Array],
      default() {
        return {
          exposure: 0,
          attend: 0,
          invited: 0,
          attendRate: 0,
          spread: 0
        };
      }
    },
    activityId: {
      type: String,
      default() {
        return '';
      }
    },
    barChartData: {
      type: [Array, Object],
      default() {
        return {};
      }
    }
  },
  components: { barChart },
  data() {
    return {
      charHeight: '220px'
    };
  },
  methods: {
    diagram(num) {
      let arr = document.getElementsByClassName('blue' + this.activityId);
      for (let i = 0; i < arr.length; i++) {
        if (i + 1 <= num) {
          arr[i].style.width = '17px';
        } else if (i + 1 == Math.ceil(num)) {
          arr[i].style.width = (parseInt(num * 10 - parseInt(num) * 10) / 10) * 17 + 'px';
        } else {
          arr[i].style.width = '0px';
        }
      }
      this.$forceUpdate();
    }
  },
  watch: {
    activeData(newData, oldData) {
      const that = this;
      if (newData) {
        that.$nextTick(() => {
          that.diagram(newData.spread);
        });
      }
    }
  },
  mounted() {
    const that = this;
    that.$nextTick(() => {
      that.activeData.hasOwnProperty('spread') ? that.diagram(that.activeData.spread) : '';
    });
  }
};
</script>
<style lang="less" scoped>
.icon {
  width: 1em;
  height: 1em;
  font-size: 22px;
  margin-left: -5px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.data-statistics {
  width: 100%;
  min-height: 300px;
  background: #fff;
  .data-statistics-body {
    position: relative;
    width: 100%;
    min-height: 300px;
    &::after {
      overflow: hidden;
    }
    .data-statistics-left {
      min-width: 164px;
      min-height: 300px;
      ul {
        min-height: 300px;
        li {
          min-height: 100px;
        }
      }
      .data-statistics-icon {
        width: 38px;
        height: 34px;
      }
    }

    .data-right-wrap {
      width: 100%;
      .data-right-bottom {
        margin-top: 40px;
      }
      .chart-title {
        height: 34px;
        margin-top: -36px;
      }
    }
    .data-statistics-middle {
      position: relative;
      min-width: 216px;
      height: 85px;
      background: #f3f6f9;
      padding: 10px 20px 0 20px;
      background-image: url(../../assets/images/cyl-bg.png);
      background-repeat: no-repeat;
      background-position: top right;
      .data-percentage {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 17px;
        background: rgba(227, 242, 253, 1);
        .data-percentage-inner {
          height: 17px;
          background: linear-gradient(90deg, rgba(53, 195, 255, 1) 0%, rgba(47, 84, 235, 1) 100%);
        }
      }
    }
    .data-statistics-right {
      position: relative;
      min-width: 216px;
      height: 85px;
      padding: 10px 20px 0 20px;
      background: #f3f6f9;
      background-image: url(../../assets/images/cbxs-bg.png);
      background-repeat: no-repeat;
      background-position: top right;
      .data-percentage {
        position: absolute;
        left: 20px;
        right: 0;
        bottom: 6px;
        .icon-xiaoren {
          font-size: 22px;
          margin-left: -5px;
        }
        .icon-xiaoren-opacity {
          color: rgba(47, 84, 235, 0.15);
        }
      }
      .spread-ul {
        width: 100%;
        overflow: hidden;
        li {
          float: left;
          position: relative;
          margin-left: 0px;
          .gray {
            display: block;
            width: 17px;
            height: 29px;
            background: url(../../assets/images/blue-opacity.png) no-repeat;
            background-size: contain;
          }
          .blue {
            width: 17px;
            height: 29px;
            background: url(../../assets/images/blue.png) no-repeat;
            background-size: cover;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }
  }
}
</style>
