<template>
  <section style="background-color: #f0f2f5">
    <!-- 数据统计 -->
    <div class="base" v-loading="loading">
      <div class="page-tip">卡券统计报表数据每隔 3 小时更新一次</div>
      <div>
        <p class="title">基础数据统计 {{ cardInfo.cardName ? `—— ${cardInfo.cardName}` : '' }}</p>
        <ul class="clearfix">
          <li><span>投放卡券数</span>{{ baseData.volumesCnt | fnumber }}</li>
          <li><span>投放人数</span>{{ baseData.volumesNum | fnumber }}</li>
          <li><span>领取卡券数</span>{{ baseData.getCnt | fnumber }}</li>
          <li><span>领取人数</span>{{ baseData.getNum | fnumber }}</li>
          <li><span>领取率</span>{{ ((baseData.getCnt * 100) / baseData.volumesCnt) | fnumber | famount }}%</li>
          <li>
            <span>{{ cardInfo.cardType == 3 ? '核销卡券数' : '使用卡券数' }}</span>
            {{ baseData.useCnt | fnumber }}
          </li>
          <li v-if="cardInfo.cardType != 3"><span>核销订单数</span>{{ baseData.cardOrderCnt | fnumber }}</li>
          <li>
            <span>{{ cardInfo.cardType == 3 ? '核销人数' : '使用人数' }}</span>
            {{ baseData.useNum | fnumber }}
          </li>
          <li><span>核销率</span>{{ ((baseData.useCnt * 100) / baseData.getCnt) | fnumber | famount }}%</li>
          <li v-if="cardInfo.cardType != 3"><span>销售额</span>{{ baseData.verificationAmt | fnumber | famount }}</li>
          <li v-if="cardInfo.cardType == 3"><span>核销额</span>{{ baseData.wirteOffPrice | fnumber | famount }}</li>
          <li v-if="cardInfo.cardType != 3"><span>客单价</span>￥{{ (baseData.verificationAmt / baseData.cardOrderCnt) | fnumber | famount }}</li>
        </ul>
      </div>
      <div v-if="cardInfo.giveFlag" style="border-top: 1px solid #DCDFE6;padding-top:28px">
        <p class="title">转赠数据统计 {{ cardInfo.cardName ? `—— ${cardInfo.cardName}` : '' }}</p>
        <ul class="clearfix">
          <li><span>转赠出卡券数</span>{{ transferData.transferCnt | fnumber }}</li>
          <li><span>转赠出人数</span>{{ transferData.transferNum | fnumber }}</li>
          <li><span>转赠率</span>{{ ((transferData.transferCnt * 100) / transferData.getCnt) | fnumber | famount }}%</li>
          <li><span>受赠卡券数</span>{{ transferData.receiveCnt | fnumber }}</li>
          <li><span>受赠人数</span>{{ transferData.receiveNum | fnumber }}</li>
          <li><span>转赠领取率</span>{{ ((transferData.receiveCnt * 100) / transferData.transferCnt) | fnumber | famount }}%</li>
          <li><span>受赠使用卡券数</span>{{ transferData.receiveUseCnt | fnumber }}</li>
          <li><span>受赠使用核销订单数</span>{{ transferData.receiveOrderCnt | fnumber }}</li>
          <li><span>受赠使用人数</span>{{ transferData.receiveUseNum | fnumber }}</li>
          <li><span>受赠使用率</span>{{ ((transferData.receiveUseCnt * 100) / transferData.receiveCnt) | fnumber | famount }}%</li>
          <li><span>受赠销售额</span>￥{{ transferData.receiveVerifiAmt | fnumber | famount }}</li>
          <li><span>受赠销售客单价</span>￥{{ (transferData.receiveVerifiAmt / transferData.receiveOrderCnt) | fnumber | famount }}</li>
        </ul>
      </div>
    </div>
    <!-- 渠道分析 -->
    <div class="dm-form__wrap">
      <dm-sub-title title-align="space-between" class="mb10">
        <div>
          渠道分析
          <span class="ml20" style="color:#606266;font-size:13px;"><i class="el-icon-info" style="color:#2f54eb;margin-right:4px"></i>数据均来自于统计时间段内</span>
        </div>
        <div>
          <el-checkbox v-model="flag" label="查看全部" border @change="cardChannelStatistics"></el-checkbox>
          <el-date-picker class="ml10" :disabled="flag" :clearable="false" v-model="dateTime2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="cardChannelStatistics"></el-date-picker>
        </div>
      </dm-sub-title>
      <el-table tooltipEffect="light" :data="tableList" style="width:100%" v-loading="loading2">
        <el-table-column :show-overflow-tooltip="true" min-width="120" fixed="left" align="left" label="渠道名称">
          <template slot-scope="scope">
            <p>{{ scope.row.channelName }}</p>
            <p class="fz12 regular-font-color" v-if="scope.row.cardChannel == 'RECEIVE_006'">消耗积分：{{ scope.row.useIntegral }}</p>
          </template>
        </el-table-column>
        <el-table-column min-width="100" align="left" prop="volumesCnt" label="投放卡券数"></el-table-column>
        <el-table-column min-width="100" align="left" prop="getCnt" label="领取卡券数"></el-table-column>
        <el-table-column min-width="100" align="left" prop="useCnt" :label="cardInfo.cardType == 3 ? '核销卡券数' : '使用卡券数'"></el-table-column>
        <el-table-column v-if="cardInfo.cardType == 3" min-width="100" align="left" prop="wirteOffPrice" label="核销额"></el-table-column>
        <template v-if="cardInfo.cardType != 3">
          <el-table-column min-width="100" align="left" prop="cardOrderCnt" label="核销订单数"></el-table-column>
          <el-table-column min-width="100" align="left" prop="verificationAmt" label="销售额"></el-table-column>
          <el-table-column :show-overflow-tooltip="true" min-width="120" fixed="right" align="left" label="客单价">
            <template slot-scope="scope"> ￥{{ (scope.row.verificationAmt / scope.row.cardOrderCnt).toFixed(2) | fnumber }} </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </section>
</template>
<script>
import { cardbaseAnalysis, cardChannelStatistics, getCardDetail } from '@/service/api/cardApi.js';
import { formatDateTimeByType } from '@/utils/index.js';

export default {
  name: 'card-analysis',
  data() {
    return {
      formatDateTimeByType,
      dateTime2: [Date.now() - 30 * 24 * 60 * 60 * 1000, Date.now()],
      loading: false,
      loading2: false,
      tableList: [],
      coupCardId: this.$route.params.id,
      baseData: {}, // 基础统计数据
      transferData: {}, // 转赠数据统计
      cardInfo: {}, // 卡券详情
      flag: false
    };
  },
  filters: {
    fnumber(s) {
      if (s == Infinity || isNaN(s) || !s) {
        return 0;
      }
      return s;
    },
    famount(s) {
      // 保留两位小数
      var str = s ? s.toFixed(2) : '0';
      // var reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
      // return str.replace(reg, '$1,');
      return str;
    }
  },
  mounted() {
    this.getCardDetail();
    this.cardbaseAnalysis();
    this.cardChannelStatistics();
  },
  methods: {
    getCardDetail() {
      getCardDetail({ coupCardId: this.coupCardId }).then(res => {
        this.cardInfo = res.result.card || {};
      });
    },
    // 基础统计和转赠统计
    cardbaseAnalysis() {
      this.loading = true;
      cardbaseAnalysis({ coupCardId: this.coupCardId })
        .then(res => {
          this.baseData = res.result.baseData || {};
          this.transferData = res.result.transferData || {};
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 渠道分析
    cardChannelStatistics() {
      let params = {
        coupCardId: this.coupCardId,
        beginTime: '',
        endTime: '',
        flag: Number(this.flag)
      };
      if (this.dateTime2 && !this.flag) {
        params.beginTime = formatDateTimeByType(this.dateTime2[0], 'yyyy-MM-dd');
        params.endTime = formatDateTimeByType(this.dateTime2[1], 'yyyy-MM-dd');
      } else {
        delete params.beginTime;
        delete params.endTime;
      }
      this.loading2 = true;
      cardChannelStatistics(params)
        .then(res => {
          this.loading2 = false;
          this.tableList = res.result || [];
        })
        .catch(() => {
          this.loading2 = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.base {
  background: white;
  padding: 20px;
  p.title {
    height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(48, 49, 51, 1);
    line-height: 22px;
    margin-bottom: 30px;
  }
  ul {
    li {
      width: 16.6%;
      float: left;
      font-size: 22px;
      font-weight: 500;
      color: rgba(48, 49, 51, 1);
      line-height: 25px;
      margin-bottom: 30px;
      span {
        display: block;
        margin-bottom: 15px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(96, 98, 102, 1);
        line-height: 20px;
      }
    }
  }
}
</style>
