<!-- 投放归因页面的表格数据处理部分 -->
<template>
  <ve-line :data="chartData" :settings="chartSettings" :extend="chartExtend">
    <div v-if="chartData.rows.length == 0" class="data-empty">没有数据😂</div>
  </ve-line>
</template>

<script>
import VeLine from "v-charts/lib/line.common";
import { getAttributeGraphApi } from "@/api/report";

export default {
  data() {
    this.chartExtend = {
      legend: {
        selected: { 展示: false, 点击: false }
      }
    };
    this.chartSettings = {
      metrics: [
        "show_pv",
        "click",
        "cost",
        "convert_num",
        "convert_price",
        "ecpm"
      ],
      dimension: ["hours"],
      axisSite: { right: ["convert_price"] },
      yAxisName: ["数值", "转化成本"],
      labelMap: {
        show_pv: "展示",
        click: "点击",
        cost: "消耗金额",
        convert_num: "转化",
        convert_price: "转化成本",
        ecpm: "eCPM"
      }
    };
    return {
      chartData: {
        columns: [
          "hours",
          "datadate",
          "show_pv",
          "click",
          "cost",
          "convert_num",
          "convert_price",
          "ecpm" //这个是手动算出来的
          //下面数据没有用到
          // "agent_method",
          // "id",
          // "pkg",
          // "update_at"
        ],
        rows: []
      } //表格数据对象
    };
  },
  components: {
    VeLine
  },
  methods: {
    /**
     *  @method getChartsData
     *  父组件调用此方法，传递过来参数请求图表数据
     *    参数说明：
     *    @param {Array} queryDate 数组接收开始-结束时间，时间格式YYYY-MM-DD
     *    @param {String} agentMethod   投放方式
     *    @param {String} pkg   投放包名（APP名称）
     *    @return
     */
    getChartsData(queryDate, agentMethod, pkg) {
      //这两个参数需要调整，默认是""，但是查询全部需要替换为"#ALL#"
      agentMethod = agentMethod === "" ? "#ALL#" : agentMethod;
      pkg = pkg === "" ? "#ALL#" : pkg;
      let params = {
        pkg: pkg,
        agentMethod: agentMethod,
        startDate: queryDate[0]
      };
      //判断查询的是一天的还是一天以上的数据
      if (queryDate[0] === queryDate[1]) {
        //按小时查询
        params["sqlId"] = 1034;
        this.setChartsData(params);
      } else {
        //按天查询
        params["sqlId"] = 1033;
        params["endDate"] = queryDate[1];
        this.setChartsData(params);
      }
    },

    /**
     * @method setChartsData
     *      可通过参数params.sqlId 来区分按小时（1034）还是按天（1033）查询
     *      @param {Object} params 请求参数
     */
    setChartsData(params) {
      getAttributeGraphApi(params)
        .then(res => {
          //请求结果响应判断
          if (res.status != 200) {
            this.$message.error(`响应出错，错误代码：${res.status}`);
            console.log("响应错误：", res);
            return;
          }
          //请求数据是否为空
          if (res.result.data.length == 0) {
            this.$message.info("没有查询到数据！");
            this.chartData.rows = [];
            return;
          }
          //判断是按天还是还小时查询
          if (params.sqlId == 1034) {
            this.isOneDay(res.result.data);
          } else if (params.sqlId == 1033) {
            //修改维度是按天
            this.chartSettings.dimension = ["datadate"];
            this.chartData.rows = res.result.data;
          }
        })
        .catch(err => {
          this.$message.error(`请求错误：${err}`);
          console.log(err);
        });
    },

    /**
     * 一天数据的展示按小时展示
     * @method isOneDay
     *  @param res 请求接口返回的图表所需的数据
     */
    isOneDay(res) {
      //设置列维度
      this.chartSettings.dimension = ["hours"];
      //引用对象转化
      this.chartData.rows = res;
      let temp = this.chartData.rows;
      //传递过来的数据并不是按小时排好序的，在这里进行排序
      temp.sort((a, b) => a.hours - b.hours);
      //遍历对当天每个小时间隔的变化计算，拿到数据是当天累积量，需要从第二个开始每个做差值
      for (let i = temp.length - 1; i > 0; i--) {
        temp[i].show_pv -= temp[i - 1].show_pv;
        temp[i].click -= temp[i - 1].click;
        temp[i].cost -= temp[i - 1].cost;
        temp[i].convert_num -= temp[i - 1].convert_num;
        //转换成本= 消耗金额/转化  四舍五入保留两位
        if (temp[i].convert_num > 0) {
          temp[i].convert_price =
            Math.round((temp[i].cost * 100) / temp[i].convert_num) / 100;
        } else {
          temp[i].convert_price = 0;
        }
        temp[i]["ecpm"] = temp[i].show_pv
          ? parseInt((temp[i].cost / temp[i].show_pv) * 100000) / 100
          : 0;
      }
      //当天第一个数据无需做差值，需要计算转化成本
      if (temp[0].convert_num > 0) {
        temp[0].convert_price =
          Math.round((temp[0].cost * 100) / temp[0].convert_num) / 100;
      } else {
        temp[0].convert_price = 0;
      }
      temp[0]["ecpm"] = temp[0].show_pv
        ? parseInt((temp[0].cost / temp[0].show_pv) * 100000) / 100
        : 0;
      //不够23小时补充到23小时
      let endHours = Number(temp[temp.length - 1].hours) + 1;
      for (let i = endHours; i < 24; i++) {
        temp.push({ hours: i });
      }
    }
  }
};
</script>

<style scoped>
.data-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  color: #888;
  font-size: 14px;
}
</style>
