<template>
  <div class="dm-wrap" v-loading="loading" style="min-height:700px">
    <template v-if="!loading">
      <p class="title">营销活动名称<span>活动时间：2020-01-01 至 2020-03-01</span></p>
      <div class="bk f1" :class="fade">
        <div class="bl-item-01"><span>营销人次</span></div>
        <el-row>
          <el-col :span="8"><view-item text="昨日" num="43324223"></view-item></el-col>
          <el-col :span="8"><view-item text="本月" num="43"></view-item></el-col>
          <el-col :span="8"><view-item text="累计" num="54354" numBlue run></view-item></el-col>
        </el-row>
      </div>
      <div class="bk f2 big" :class="fade">
        <div class="bl-item-02"><span>活动覆盖人数</span></div>
        <el-row>
          <el-col :span="8"><view-item text="昨日" num="77"></view-item></el-col>
          <el-col :span="8"><view-item text="本月" num="43"></view-item></el-col>
          <el-col :span="8"><view-item text="累计" num="54354" numBlue run></view-item></el-col>
        </el-row>
        <p class="tips">注：不包含微信营销覆盖人群</p>
      </div>
      <div class="bk f3 big" :class="fade">
        <div class="bl-item-03"><span>相关订单</span></div>
        <el-row>
          <el-col :span="8"><view-item text="昨日" num="43324223"></view-item></el-col>
          <el-col :span="8"><view-item text="本月" num="43"></view-item></el-col>
          <el-col :span="8"><view-item text="累计" num="54354" numBlue run></view-item></el-col>
        </el-row>
        <p class="tips">注：活动覆盖人群在活动期间的订单计入活动相关订单</p>
      </div>
      <div class="bk f4 mb20" :class="fade">
        <div class="bl-item-04"><span>销售额</span></div>
        <el-row>
          <el-col :span="8"><view-item text="昨日" num="43324223"></view-item></el-col>
          <el-col :span="8"><view-item text="本月" num="43"></view-item></el-col>
          <el-col :span="8"><view-item text="累计" num="54354" numBlue run></view-item></el-col>
        </el-row>
      </div>
      <!-- <div class="bk f5 big mb20" :class="fade">
        <div class="bl-item-05"><span>累计数据</span></div>
        <el-row>
          <el-col :span="8"><view-item text="昨日" num="43324223"></view-item></el-col>
          <el-col :span="8"><view-item text="本月" num="43"></view-item></el-col>
          <el-col :span="8"><view-item text="累计" num="54354"></view-item></el-col>
        </el-row>
        <p class="tips">注：活动覆盖人数不包含微信营销覆盖人群；活动相关订单为活动覆盖人群在活动期间的订单计入活动相关订单</p>
      </div> -->
      <div class="view-content">
        <div class="left f5" :class="fade">
          <p>营销活动内容</p>
          <div><view-item text="微信群发计划" num="3" invert></view-item></div>
          <div><view-item text="短信群发计划" num="3" invert></view-item></div>
          <div><view-item text="卡券投放计划" num="43" invert></view-item></div>
          <div><view-item text="游戏营销" num="1" invert></view-item></div>
          <div><view-item text="智能营销-实时" num="23" invert></view-item></div>
          <div><view-item text="智能营销-定时" num="8" invert></view-item></div>
        </div>
        <div class="right">
          <div class="iik f5" :class="fade">
            <div class="iik-item-01"><span>微信</span></div>
            <el-row>
              <el-col :span="6"><view-item text="微信群发送达人次" num="43324223"></view-item></el-col>
              <el-col :span="6"><view-item text="微信群发阅读人次" num="43"></view-item></el-col>
              <el-col :span="6"><view-item text="微信群发分享人次" num="54354"></view-item></el-col>
              <el-col :span="6"><view-item text="微信群发收藏人次" num="54354"></view-item></el-col>
            </el-row>
          </div>
          <div class="iik f6" :class="fade">
            <div class="iik-item-02"><span>短信</span></div>
            <el-row>
              <el-col :span="6"><view-item text="短信送达人次" num="43324223"></view-item></el-col>
              <el-col :span="6"><view-item text="短信送达人数" num="43"></view-item></el-col>
            </el-row>
          </div>
          <div class="iik f7" :class="fade">
            <div class="iik-item-03"><span>卡券</span></div>
            <el-row class="card-row">
              <el-col :span="6"><view-item text="使用卡券" num="3"></view-item></el-col>
              <el-col :span="6"><view-item text="投放张数" num="3"></view-item></el-col>
              <el-col :span="6"><view-item text="领取张数" num="4"></view-item></el-col>
              <el-col :span="6"><view-item text="核销订单数" num="342" numBlue run></view-item></el-col>
            </el-row>
            <el-row style="padding-top:22px">
              <el-col :span="6"><view-item text="卡券销售额" num="342"></view-item></el-col>
              <el-col :span="6"><view-item text="投放人数" num="222"></view-item></el-col>
              <el-col :span="6"><view-item text="领取人数" num="22222"></view-item></el-col>
              <el-col :span="6"><view-item text="核销人数" num="22222" numBlue run></view-item></el-col>
            </el-row>
          </div>
          <div class="iik card f8" :class="fade">
            <div class="iik-item-04"><span>游戏</span></div>
            <el-row>
              <el-col :span="6"><view-item text="游戏参与人次" num="43324223"></view-item></el-col>
              <el-col :span="6"><view-item text="游戏参与人数" num="43"></view-item></el-col>
              <el-col :span="6"><view-item text="游戏中奖人次" num="43"></view-item></el-col>
              <el-col :span="6"><view-item text="游戏中奖人数" num="43"></view-item></el-col>
            </el-row>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import 'animate.css';
import viewItem from './module/item';
export default {
  name: 'data-view',
  data() {
    return {
      animate: false,
      loading: false
    };
  },
  computed: {
    fade() {
      return this.animate ? 'animated fadeIn' : '';
    }
  },
  components: {
    viewItem
  },
  methods: {
    getData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.animate = true;
      }, 1000);
    }
  },
  mounted() {
    document.documentElement.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    this.getData();
  },
  created() {
    this.$store.commit('aside_handler', false);
    this.$store.commit('mutations_breadcrumb', [{ name: '营销活动列表', path: '/activity/list' }, { name: '数据概览', path: '' }]); // eslint-disable-line
    // this.activityList();
  }
};
</script>

<style lang="scss" scoped>
p.title {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(48, 49, 51, 1);
  line-height: 22px;
  margin-bottom: 37px;
  span {
    margin-left: 13px;
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(96, 98, 102, 1);
    line-height: 20px;
  }
}
.fg {
  position: relative;
  cursor: pointer;
  [class^='bl-item'] {
    overflow: hidden;
  }
  &:hover [class^='bl-item']::before {
    transition: all 0.5s;
    left: 225px;
  }
  [class^='bl-item']::before {
    background: rgba(255, 255, 255, 0.1);
    z-index: 10;
    content: '';
    position: absolute;
    width: 198px;
    height: 115px;
    top: 0;
    left: -225px;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
  }
}
.bk {
  position: relative;
  padding-left: 198px;
  height: 116px;
  background: linear-gradient(270deg, rgba(251, 252, 253, 0) 0%, rgba(245, 247, 250, 1) 63%);
  margin-bottom: 32px;
  @extend .fg;
  &.big {
    height: 133px;
    p.tips {
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(144, 147, 153, 1);
      line-height: 20px;
      margin-left: 10px;
      position: absolute;
      bottom: 5px;
      left: 0;
    }
  }
  /deep/ .view-item {
    text-align: center;
    .text {
      margin-bottom: 13px;
    }
  }
  [class^='bl-item'] {
    width: 198px;
    height: 115px;
    position: absolute;
    color: white;
    left: 0;
    top: -12px;
    text-align: center;
    background-image: url('../../assets/img/activity.png');
    span {
      position: relative;
      top: 75px;
    }
  }
  /deep/ .el-row {
    padding-top: 24px;
  }
  .bl-item-01 {
    background-position: 0 -525px;
  }
  .bl-item-02 {
    background-position: 0 -400px;
  }
  .bl-item-03 {
    background-position: 0 -275px;
  }
  .bl-item-04 {
    background-position: 0 -150px;
  }
  .bl-item-05 {
    background-position: 0 -25px;
  }
}
.view-content {
  position: relative;
  display: flex;
  .left {
    height: 670px;
    width: 236px;
    padding: 25px 27px;
    background: rgba(245, 247, 250, 1);
    margin-right: 20px;
    > p {
      height: 22px;
      font-size: 16px;
      font-weight: bold;
      color: rgba(48, 49, 51, 1);
      line-height: 22px;
      margin-bottom: 27px;
    }
    > div {
      padding-top: 17px;
      padding-bottom: 18px;
      position: relative;
      &:last-child::after {
        display: none;
      }
      &::after {
        left: 0;
        bottom: 0px;
        position: absolute;
        height: 1px;
        width: 228px;
        left: 50%;
        margin-left: -100px;
        content: '';
        background: url('../../assets/img/activity.png') 0 -12px no-repeat;
      }
    }
    /deep/ .view-item {
      text-align: center;
    }
  }
  .right {
    flex: 1;
    /deep/ .view-item {
      .text {
        margin-bottom: 6px;
      }
    }
    .iik {
      padding-left: 183px;
      height: 165px;
      background: linear-gradient(270deg, rgba(251, 252, 253, 0) 0%, rgba(245, 247, 250, 1) 100%);
      margin-bottom: 20px;
      position: relative;
      /deep/ {
        .el-row {
          padding-top: 50px;
          &.card-row {
            padding-top: 16px;
            .view-item .text {
              margin-bottom: 1px;
            }
          }
        }
        .view-item {
          .text {
            margin-bottom: 6px;
          }
        }
      }
      [class^='iik-item'] {
        position: absolute;
        left: 46px;
        top: 41px;
        width: 51px;
        height: 51px;
        background: url('../../assets/img/activity.png') 0 0 no-repeat;
        span {
          font-weight: bold;
          color: rgba(96, 98, 102, 1);
          line-height: 20px;
          display: block;
          text-align: center;
          position: relative;
          top: 55px;
        }
      }
      .iik-item-01 {
        background-position: -74px -650px;
      }
      .iik-item-02 {
        background-position: -73px -709px;
      }
      .iik-item-03 {
        background-position: -73px -770px;
      }
      .iik-item-04 {
        background-position: -73px -830px;
      }
    }
  }
}
.animated {
  @for $i from 1 through 8 {
    &.f#{$i} {
      animation-delay: (150ms * $i);
    }
  }
}
</style>
