<template>
  <div class="statistics">
    <div class="report-module">
      <dm-sub-title>活动信息</dm-sub-title>
      <div class="mt20">
        <el-descriptions column="4">
          <el-descriptions-item label="活动名称"> {{ baseData.gameName }}</el-descriptions-item>
          <el-descriptions-item label="活动类型">盲盒</el-descriptions-item>
          <el-descriptions-item label="活动状态"><span :class="gameStatusClass[baseData.status]"></span> {{ gameStatus[baseData.status] }}</el-descriptions-item>
          <el-descriptions-item label="活动有效期">{{ baseData.gameTimeStr }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="report-module">
      <dm-sub-title title-align="space-between">
        <div>
          活动数据
          <el-button class="check-detail" @click="toDetailPage(1)">查看详情</el-button>
        </div>
      </dm-sub-title>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(el, index) in activityData" :key="index">
          <target-group :data-list="el"></target-group>
        </el-col>
      </el-row>
    </div>
    <div class="report-module">
      <dm-sub-title>
        卡券核销
      </dm-sub-title>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(el, index) in cardData" :key="index">
          <target-group :data-list="el"></target-group>
        </el-col>
      </el-row>
    </div>
    <div class="report-module">
      <dm-sub-title title-align="space-between">
        <div>
          奖品数据
          <el-button class="check-detail" @click="toDetailPage(2)">查看详情</el-button>
        </div>
      </dm-sub-title>
      <el-radio-group class="customize mt20 mb20" v-model="dimension" @change="radioChange">
        <el-radio-button label="1" value="1">卡券</el-radio-button>
        <el-radio-button label="2" value="2">积分</el-radio-button>
      </el-radio-group>
      <el-table :data="prizeList" style="width:100%" :key="dimension">
        <el-table-column v-for="v in tableHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="v.prop" :prop="v.prop" :label="v.label" :formatter="v.formatter" :sortable="v.sortable" :fixed="v.fixed">
          <template slot-scope="scope">
            <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
            <span v-else>{{ scope.row[v.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { numFormat, formatDateTimeByType } from '@/utils/index.js';
import { getGameOverview, getGameCardWriteOff, getGameDetail, getGamePrize } from '@/service/api/gameApi.js';
import TargetGroup from '@/components/target-group.vue';
const tableHead = [
  {
    label: '奖品名称',
    minWidth: '206',
    prop: 'prizeName',
    formatter: function(row) {
      return `<span class="ellipsis-l2">${row.prizeName ? row.prizeName : '- -'}</span>`;
    }
  },
  {
    label: '库存',
    prop: 'prizeTotalStock',
    minWidth: '88',
    formatter: function(row) {
      return `<span>${row.prizeTotalStock ? row.prizeTotalStock.toLocaleString() : '- -'}</span>`;
    }
  },
  {
    label: '中奖人数',
    prop: 'prizeWinningMNum',
    minWidth: '116',
    formatter: function(row) {
      return `<span>${row.prizeWinningMNum ? row.prizeWinningMNum.toLocaleString() : '- -'}</span>`;
    }
  },
  {
    label: '中奖率',
    prop: 'prizeWinningRate',
    minWidth: '120',
    formatter: function(row) {
      return `<span>${!isNaN(row.prizeWinningRate) ? row.prizeWinningRate + '%' : '- -'}</span>`;
    }
  },
  {
    label: '领取数',
    prop: 'receivedMNum',
    minWidth: '100',
    formatter: function(row) {
      return `<span>${row.receivedMNum ? row.receivedMNum.toLocaleString() : '- -'}</span>`;
    }
  },
  {
    label: '核销数量',
    prop: 'writeOffNum',
    minWidth: '120',
    formatter: function(row) {
      return `<span>${row.writeOffNum ? row.writeOffNum.toLocaleString() : '- -'}</span>`;
    }
  },
  {
    label: '核销人数',
    prop: 'writeOffMNum',
    minWidth: '120',
    formatter: function(row) {
      return `<span>${row.writeOffMNum ? row.writeOffMNum.toLocaleString() : '- -'}</span>`;
    }
  },
  {
    label: '核销率',
    prop: 'writeOffRate',
    minWidth: '100',
    formatter: function(row) {
      return `<span>${!isNaN(row.writeOffRate) ? row.writeOffRate + '%' : '- -'}</span>`;
    }
  },
  {
    label: '客单价',
    prop: 'perCustomerTransaction',
    minWidth: '100',
    formatter: function(row) {
      return `<span>${row.perCustomerTransaction ? row.perCustomerTransaction.toLocaleString() : '- -'}</span>`;
    }
  },
  {
    label: '连带率',
    prop: 'jointRate',
    minWidth: '100',
    formatter: function(row) {
      return `<span>${row.jointRate ? row.jointRate : '- -'}</span>`;
    },
    fixed: 'right'
  }
];
const pointHead = [
  {
    label: '奖品名称',
    minWidth: '206',
    prop: 'prizeName',
    formatter: function(row) {
      return `<span class="ellipsis-l2">${row.prizeName ? row.prizeName : '- -'}</span>`;
    }
  },
  {
    label: '中奖人数',
    prop: 'prizeWinningMNum',
    minWidth: '116',
    formatter: function(row) {
      return `<span>${row.prizeWinningMNum ? row.prizeWinningMNum.toLocaleString() : '- -'}</span>`;
    }
  },
  {
    label: '中奖率',
    prop: 'prizeWinningRate',
    minWidth: '120',
    formatter: function(row) {
      return `<span>${row.prizeWinningRate ? row.prizeWinningRate + '%' : '- -'}</span>`;
    }
  },
  {
    label: '累计中奖积分',
    prop: 'cumulativeIntegral',
    minWidth: '100',
    formatter: function(row) {
      return `<span>${row.cumulativeIntegral ? row.cumulativeIntegral : '- -'}</span>`;
    },
    fixed: 'right'
  }
];
export default {
  components: { TargetGroup },
  data() {
    return {
      gameStatus: {
        0: '未开始',
        1: '进行中',
        2: '已结束',
        3: '已终止'
      },
      gameStatusClass: {
        0: 'dm-status--info',
        1: 'dm-status--primary--flash',
        2: 'dm-status--info',
        3: 'dm-status--error'
      },
      baseData: {},
      dimension: '1',
      // type number:数字、time:时间、amount:金额、rate:百分比
      originActivityData: [
        [
          {
            label: '浏览人数',
            value: '',
            key: 'browseCnt',
            type: 'number'
          },
          {
            label: '参与人数',
            value: '',
            key: 'palyCnt',
            type: 'number'
          }
        ],
        [
          {
            label: '中奖人数',
            value: '',
            key: 'winCnt',
            type: 'number'
          },
          {
            label: '中奖率',
            tips: '中奖人数/参与人数',
            value: '',
            key: 'winRate',
            type: 'rate'
          }
        ],
        [
          {
            label: '分享人数',
            value: '',
            key: 'shareCnt',
            type: 'number'
          },
          {
            label: '新增会员',
            value: '',
            key: 'openCardCnt',
            type: 'number'
          }
        ],
        [
          {
            label: '总消耗积分',
            value: '',
            key: 'integralUseCnt',
            type: 'number'
          }
        ]
      ],
      activityData: [],
      originCardData: [
        [
          {
            label: '订单总金额',
            value: '',
            tips: '订单实付金额',
            key: 'orderAmount',
            type: 'number'
          },
          {
            label: '参与用户订单数',
            value: '',
            key: 'orderNum',
            type: 'number'
          }
        ],
        [
          {
            label: '领取数量',
            value: '',
            key: 'receivedNum',
            type: 'number'
          },
          {
            label: '核销数量',
            value: '',
            key: 'writeOffNum',
            type: 'number'
          }
        ],
        [
          {
            label: '核销人数',
            value: '',
            key: 'writeOffMNum',
            type: 'number'
          },
          {
            label: '新用户核销人数',
            value: '',
            key: 'newWriteOffMNum',
            type: 'number'
          }
        ],
        [
          {
            label: '核销率',
            value: '',
            key: 'writeOffRate',
            type: 'rate'
          }
        ],
        [
          {
            label: '客单价',
            value: '',
            key: 'perCustomerTransaction',
            type: 'number'
          },
          {
            label: '连带率',
            value: '',
            key: 'jointRate',
            type: 'number'
          }
        ]
      ],
      cardData: [],
      prizeList: [],
      tableHeader: [],
      gameId: this.$route.params.id
    };
  },
  mounted() {
    const gameId = this.$route.params.id;
    this.getGameOverview(gameId);
    this.getGameCardWriteOff(gameId);
    this.getGameDetail(gameId);
    this.getGamePrize(1);
  },
  computed: {},
  methods: {
    toDetailPage(type) {
      console.log(type);
      if (type == 1) {
        this.$router.push(`/game/cmh/statistics/activityDetail/${this.gameId}`);
      } else {
        this.$router.push(`/game/cmh/statistics/prizeDetail/${this.gameId}`);
      }
    },
    radioChange(data) {
      console.log(data);
      this.getGamePrize(data);
    },
    getGameOverview(gameId) {
      getGameOverview({ gameId }).then(res => {
        const { result } = res;
        this.activityData = this.handleData(this.originActivityData, result || {});
      });
    },
    getGameCardWriteOff(gameId) {
      getGameCardWriteOff({ gameId }).then(res => {
        const { result } = res;
        this.cardData = this.handleData(this.originCardData, result || {});
      });
    },
    getGameDetail(gameId) {
      getGameDetail({ gameId }).then(res => {
        const {
          result: { startDate, endDate, gameName, status }
        } = res;
        let startDateStr = formatDateTimeByType(startDate, 'yyyy-MM-dd');
        let endDateStr = formatDateTimeByType(endDate, 'yyyy-MM-dd');
        let gameTimeStr = startDateStr + ' 至 ' + endDateStr;
        this.baseData = { gameTimeStr, gameName, status };
      });
    },
    getGamePrize(prizeType) {
      if (prizeType == 1) {
        this.tableHeader = tableHead;
      } else {
        this.tableHeader = pointHead;
      }
      getGamePrize({ gameId: this.$route.params.id, prizeType }).then(res => {
        const { result } = res;
        this.prizeList = result;
      });
    },
    handleData(data, obj) {
      return data
        .map(el => {
          return el.filter(item => {
            const value = obj[item.key];
            switch (item.type) {
              case 'number':
                item.value = numFormat(value);
                break;
              case 'time':
                item.value = '--';
                if (typeof value == 'number') {
                  const h = Math.floor(value / 3600)
                    .toString()
                    .padStart(2, '0');
                  const m = Math.floor((value % 3600) / 60)
                    .toString()
                    .padStart(2, '0');
                  const s = (value % 60).toString().padStart(2, '0');
                  item.value = `${h}:${m}:${s}`;
                }
                break;
              case 'amount':
                item.value = numFormat(value);
                break;
              case 'rate':
                item.value = !isNaN(value) ? value + '%' : '- -';
                break;
            }
            return true;
            // 活动不发送挂机短信时，数据指标不展示短信发送总数和发送成功数的字段
            // 活动未开启活动分析时，数据指标展示活动费用
            //    return !((this.aiDataShow.smsFlag == 0 && item.key == 'sentMessagesNumber') || (this.aiDataShow.smsFlag == 0 && item.key == 'sentSuccessfullyNumber') || (this.aiDataShow.analyseFlag != 0 && item.key == 'activityCost'));
          });
        })
        .filter(el => el.length > 0);
    }
  }
};
</script>

<style lang="scss" scoped>
.statistics {
  background-color: #f7f8fa;
  .report-module {
    padding: 16px 20px 20px 20px;
    background-color: #fff;
    + .report-module {
      margin-top: 16px;
    }
    .title-tip {
      margin-left: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #606266;
      line-height: 17px;
    }
    .check-detail {
      margin-left: 16px;
      color: #2f54eb;
      background: #ebeffe;
      border: none;
      &:hover {
        background: #dee3fc;
      }
    }
  }
}
</style>
