<template>
  <div class="dm-wrap" v-loading="loading" style="min-height:700px">
    <template v-if="!loading">
      <p class="title">
        {{ info.name || '--' }}<span>活动时间：{{ info.beginDate || '--' }} 至 {{ info.endDate || '--' }}</span>
        <span style="color:#909399;" class="ml10">* 次日0点后更新当天营销数据统计</span>
      </p>
      <template v-if="!isHistory">
        <div class="bk f1" :class="fade">
          <div class="bl-item-01"><span>营销人次</span></div>
          <el-row>
            <el-col :span="8"><view-item text="昨日" :num="dataView.activityStat.activityMbrCntD"></view-item></el-col>
            <el-col :span="8"><view-item text="本月" :num="dataView.activityStat.activityMbrCntM"></view-item></el-col>
            <el-col :span="8"><view-item text="累计" :num="dataView.activityStat.activityMbrCntTd" numBlue run></view-item></el-col>
          </el-row>
        </div>
        <div class="bk f2" :class="fade">
          <div class="bl-item-02"><span>活动覆盖人数</span></div>
          <el-row>
            <el-col :span="8"><view-item text="昨日" :num="dataView.activityStat.activityMbrNumD"></view-item></el-col>
            <el-col :span="8"><view-item text="本月" :num="dataView.activityStat.activityMbrNumM"></view-item></el-col>
            <el-col :span="8"><view-item text="累计" :num="dataView.activityStat.activityMbrNumTd" 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="dataView.activityStat.orderCntD" :decimals="2"></view-item></el-col>
            <el-col :span="8"><view-item text="本月" :num="dataView.activityStat.orderCntM" :decimals="2"></view-item></el-col>
            <el-col :span="8"><view-item text="累计" :num="dataView.activityStat.orderCntTd" numBlue run :decimals="2"></view-item></el-col>
          </el-row>
          <p class="tips">注：活动覆盖人群在活动期间的订单计入活动相关订单</p>
        </div>
        <div class="bk f4 big mb20" :class="fade">
          <div class="bl-item-04"><span>销售额</span></div>
          <el-row>
            <el-col :span="8"><view-item text="昨日" :num="dataView.activityStat.salesAmtD" :decimals="2"></view-item></el-col>
            <el-col :span="8"><view-item text="本月" :num="dataView.activityStat.salesAmtM" :decimals="2"></view-item></el-col>
            <el-col :span="8"><view-item text="累计" :num="dataView.activityStat.salesAmtTd" numBlue run :decimals="2"></view-item></el-col>
          </el-row>
          <p class="tips">注：销售额为活动相关订单的销售额</p>
        </div>
      </template>
      <div v-else class="bk f1 big mb20" :class="fade">
        <div class="bl-item-05"><span>累计数据</span></div>
        <el-row>
          <el-col :span="6"><view-item text="总营销人次" :num="dataView.activityStat.activityMbrCntTd"></view-item></el-col>
          <el-col :span="6"><view-item text="活动总覆盖人数" :num="dataView.activityStat.activityMbrNumTd"></view-item></el-col>
          <el-col :span="6"><view-item text="累计相关订单" :num="dataView.activityStat.orderCntTd" :decimals="2"></view-item></el-col>
          <el-col :span="6"><view-item text="活动累计销售额" :num="dataView.activityStat.salesAmtTd" :decimals="2"></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="dataView.activityStat.wechatCnt" invert></view-item></div>
          <div><view-item text="短信群发计划" :num="dataView.activityStat.smsCnt" invert></view-item></div>
          <div><view-item text="卡券投放计划" :num="dataView.activityStat.cardCnt" invert></view-item></div>
          <div><view-item text="游戏营销" :num="dataView.activityStat.gameCnt" invert></view-item></div>
          <div><view-item text="智能营销-实时" :num="dataView.activityStat.ecmTruetimeCnt" invert></view-item></div>
          <div><view-item text="智能营销-定时" :num="dataView.activityStat.ecmTimingCnt" 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="dataView.activityWechat.sendSuccessCountTd"></view-item></el-col>
              <el-col :span="6"><view-item text="微信群发阅读人次" :num="dataView.activityWechat.readCountTd"></view-item></el-col>
              <el-col :span="6"><view-item text="微信群发分享人次" :num="dataView.activityWechat.redirectCountTd"></view-item></el-col>
              <el-col :span="6"><view-item text="微信群发收藏人次" :num="dataView.activityWechat.collectCountTd"></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="dataView.activitySms.sendSmsCntTd"></view-item></el-col>
              <el-col :span="6"><view-item text="短信送达人数" :num="dataView.activitySms.sendMbrCntTd"></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="dataView.activityCoup.useCnt" numBlue run></view-item></el-col>
              <el-col :span="6"><view-item text="投放张数" :num="dataView.activityCoup.volumesCnt"></view-item></el-col>
              <el-col :span="6"><view-item text="领取张数" :num="dataView.activityCoup.getCnt"></view-item></el-col>
              <el-col :span="6"><view-item text="核销订单数" :num="dataView.activityCoup.cardOrderCnt"></view-item></el-col>
            </el-row>
            <el-row style="padding-top:22px">
              <el-col :span="6"><view-item text="卡券销售额" :num="dataView.activityCoup.verificationAmt" numBlue run :decimals="2"></view-item></el-col>
              <el-col :span="6"><view-item text="投放人数" :num="dataView.activityCoup.volumesNum"></view-item></el-col>
              <el-col :span="6"><view-item text="领取人数" :num="dataView.activityCoup.getNum"></view-item></el-col>
              <el-col :span="6"><view-item text="核销人数" :num="dataView.activityCoup.useNum"></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="dataView.activityGame.gameMbrCntTd"></view-item></el-col>
              <el-col :span="6"><view-item text="游戏参与人数" :num="dataView.activityGame.gameMbrNumTd"></view-item></el-col>
              <el-col :span="6"><view-item text="游戏中奖人次" :num="dataView.activityGame.prizeMbrCntTd"></view-item></el-col>
              <el-col :span="6"><view-item text="游戏中奖人数" :num="dataView.activityGame.prizeMbrNumTd"></view-item></el-col>
            </el-row>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { formatDateTimeByType } from '@/utils/index.js';
import { activityViewData, getActivityInfo } from '@/service/api/activityApi.js';
import 'animate.css';
import viewItem from './module/item';
export default {
  name: 'data-view',
  data() {
    return {
      animate: false,
      loading: false,
      isHistory: false,
      info: {}, // 数据对话详情
      dataView: {
        activityStat: {},
        activitySms: {},
        activityCoup: {},
        activityGame: {},
        activityWechat: {}
      }, // 数据详情
      marketingActivityId: this.$route.params.id
    };
  },
  computed: {
    fade() {
      return this.animate ? 'animated fadeIn' : '';
    }
  },
  components: {
    viewItem
  },
  methods: {
    // 获取数据对话数据概览
    async getData() {
      this.loading = true;
      // 获取数据对话详情
      let info = await getActivityInfo({ marketingActivityId: this.marketingActivityId });
      const result = info.result.activityInfo || {};
      const { name, beginDate, endDate } = result;
      this.info.name = name;
      this.info.beginDate = formatDateTimeByType(beginDate, 'yyyy-MM-dd-HH-mm-ss');
      this.info.endDate = formatDateTimeByType(endDate, 'yyyy-MM-dd-HH-mm-ss');
      this.info.name = name;
      if (new Date(result.endDate) < new Date()) {
        // 历史数据
        this.isHistory = true;
        this.$store.commit('mutations_breadcrumb', [{ name: '数据对话厅', path: '/activity/list' }, { name: '历史数据概览', path: '' }]); // eslint-disable-line
      }
      activityViewData({ marketingActivityId: this.marketingActivityId })
        .then(res => {
          this.dataView = res.result || {};
          setTimeout(() => {
            this.loading = false;
            this.animate = true;
          }, 0);
        })
        .catch(() => {
          this.loading = false;
        });
    }
  },
  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
  }
};
</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;
  overflow: hidden;
  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>
