<template>
  <div class="pkg-show">
    <el-form inline>
      <el-form-item label="日期">
        <el-date-picker
          v-model="dataDate"
          type="date"
          unlink-panels
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          @change="getData()"
        >
        </el-date-picker>
      </el-form-item>

       <el-form-item label="应用选择">
        <el-select
          v-model="pkg"
          placeholder="应用选择"
          @change="getData()"
          filterable
          clearable
        >
          <el-option
            v-for="item in pkgList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="计划ID">
        <el-input
          v-model="plan_id"
          placeholder="请输入计划ID"
        />
      </el-form-item>


      <el-button type="primary" @click="getData(plan_id)">查询</el-button>
    </el-form>

    <div ref="eChart" :style="{ height: '360px', width: '100%' }"></div>


    <el-table
      :data="datas"
      style="width:100%"
      border
    >
      <el-table-column align="center" label="小时" prop="hour"></el-table-column>
      <el-table-column align="center" label="预算" prop="budget"></el-table-column>
      <el-table-column align="center" label="出价" prop="cpa_bid"></el-table-column>
      <el-table-column align="center" label="新增消耗" prop="cost"></el-table-column>
      <el-table-column align="center" label="人均视频数" prop="video_per_uv"></el-table-column>
      <el-table-column align="center" label="预估ecpm" prop="ecpm"></el-table-column>
      <el-table-column align="center" label="预估arpu" prop="arpu"></el-table-column>
      <el-table-column align="center" label="新增用户数" prop="new_uv"></el-table-column>
      <el-table-column align="center" label="新增成本" prop="cost_price"></el-table-column>
      <el-table-column align="center" label="激活成本" prop="active_price"></el-table-column>
      <el-table-column align="center" label="新增转化数" prop="conv"></el-table-column>
      <el-table-column align="center" label="新增转化成本" prop="convert_price"></el-table-column>
      <el-table-column align="center" label="昨日新增实时次留率" prop="k1_ratios" ></el-table-column>
      <el-table-column align="center" label="关键行为转化率" prop="conv_ratios"></el-table-column>
    </el-table>

  </div>
</template>

<script>
import { getBusinIncome, getSelectApps } from "@/api/cloud";
import echarts from "echarts";
import moment from "moment";

export default {
  data() {
    return {
      datas: [],
      dataDate: '',
      pkg: '',
      pkgList: [],
      plan_id: '',
      json: [],
      jsonList: [],
      chart: null,
      chartData: [],
      option: {
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: [
                '预算',
                '出价',
                '新增消耗',
                '人均视频数',
                '预估ecpm',
                '预估arpu',
                '新增成本',
                '激活成本',
                '新增转化数',
                '新增转化成本',
                '昨日新增实时次流率',
                '关键行为转化率',
                '新增用户数'
              ],
              selectedMode: 'single'
          },
          selected: {
            // 选中'系列1'
            '预估arpu': true,
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
                  name: '预算',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '出价',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '新增消耗',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '人均视频数',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '预估ecpm',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '预估arpu',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '新增成本',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '激活成本',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '新增转化数',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '新增转化成本',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '昨日新增实时次流率',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '关键行为转化率',
                  type: 'line',
                  stack: '总量',
                  data: []
              },
              {
                  name: '新增用户数',
                  type: 'line',
                  stack: '总量',
                  data: []
              }
          ]
      }
    }
  },
  created() {
    this.dataDate = moment()
      .subtract(0, "days")
      .format("YYYY-MM-DD");
    this._fetchAppList();
  },
  mounted() {
    this.chart = echarts.init(this.$refs.eChart); //这里是为了获得容器所在位置
    this.chart.setOption(this.option);
  },
  methods: {
    // 网络请求 获取app列表
    _fetchAppList() {
      const params = {
        platformId: 5,
        menuCode: "game.Overview,android",
      };
      getSelectApps(params).then((response) => {
        if (response.result.data[0].value == "") {
          response.result.data.splice(0, 1);
        }
        this.pkgList = response.result.data;
      });
    },

    

    // 将json字符串转为json对象
    getData(val) {
      this.startDate = this.dataDate;
      this.endDate = this.dataDate;
      let params = {
        sqlId: 1350,
        pkg: this.pkg,
        startDate: this.startDate,
        endDate: this.endDate,
      };
      getBusinIncome(params).then(res=>{
        let arpu_60 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let arpu_120 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let arpu_180 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let ecpm_60 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let uv = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let budget = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let cpa_bid = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let cost = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let video_per_uv = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let ecpm = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let arpu = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let cost_price = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let active_price = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let conv = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let convert_price = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let k1_ratios = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let conv_ratios = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        let new_uv = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        for(var i=0;i<res.result.data.length;i++){
          let value =  eval("(" + res.result.data[i].value + ")");
          let hour = res.result.data[i].hour;

          for(var j = 0;j<value.length;j++) {
            if(value[j].plan_id == val){
              arpu_60[Number(hour)] = value[j].arpu_60;
              arpu_120[Number(hour)] = value[j].arpu_120;
              arpu_180[Number(hour)] = value[j].arpu_180;
              ecpm_60[Number(hour)] = value[j].ecpm_60;
              uv[Number(hour)] = value[j].uv;
              budget[Number(hour)] = value[j].budget;
              cpa_bid[Number(hour)] = value[j].cpa_bid
              cost[Number(hour)] = value[j].cost;
              video_per_uv[Number(hour)] = value[j].video_per_uv;
              ecpm[Number(hour)] = value[j].ecpm;
              arpu[Number(hour)] = value[j].arpu;
              cost_price[Number(hour)] = value[j].cost_price;
              active_price[Number(hour)] = value[j].active_price;
              conv[Number(hour)] = value[j].conv;
              convert_price[Number(hour)] = value[j].convert_price;
              k1_ratios[Number(hour)] = value[j].k1_ratios;
              conv_ratios[Number(hour)] = value[j].conv_ratios;
              new_uv[Number(hour)] = value[j].new_uv;
            }
          }
           this.option.series[0].data = budget;
           this.option.series[1].data = cpa_bid;
           this.option.series[2].data = cost;
           this.option.series[3].data = video_per_uv;
           this.option.series[4].data = ecpm;
           this.option.series[5].data = arpu;
           this.option.series[6].data = cost_price;
           this.option.series[7].data = active_price;
           this.option.series[8].data = conv;
           this.option.series[9].data = convert_price;
           this.option.series[10].data = k1_ratios;
           this.option.series[11].data = conv_ratios;
           this.option.series[12].data = new_uv;

        this.chart = echarts.init(this.$refs.eChart); //这里是为了获得容器所在位置
        this.chart.setOption(this.option); // 先填数据，最后再渲染
        }
        let datas = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
          for(var i=0;i<budget.length;i++) {
            datas[i].hour = i;
            datas[i].budget = budget[i];
            datas[i].cpa_bid = cpa_bid[i];
            datas[i].cost = cost[i];
            datas[i].video_per_uv = video_per_uv[i];
            datas[i].ecpm = ecpm[i];
            datas[i].arpu = arpu[i];
            datas[i].cost_price = cost_price[i];
            datas[i].active_price = active_price[i];
            datas[i].conv = conv[i];
            datas[i].convert_price = convert_price[i];
            datas[i].k1_ratios = k1_ratios[i];
            datas[i].conv_ratios = conv_ratios[i];
            datas[i].new_uv = new_uv[i];
          }
          console.log(datas);
          this.datas = datas;
          this.datas.map((item) => {
            Object.keys(item).map((key) => {
              if ( key == "conv_ratios" || key == "k1_ratios"){
                return (item[key] = (item[key] * 100).toFixed(2) + "%");
              }else if(key == 'arpu' || key == 'ecpm'){
                return (item[key] = item[key].toFixed(2));
              }else if(key == 'convert_price'){
                return (item[key] = item[key].toFixed(2));
              }else if(key == 'cost_price'){
                return (item[key] = item[key].toFixed(2));
              }else if(key == 'video_per_uv'){
                return (item[key] = item[key].toFixed(2));
              }else if(key == 'active_price'){
                return (item[key] = item[key].toFixed(2));
              }
            })
          })
      });
    },
  }
}
</script>

<style scoped>
  .pkg-show {
    padding: 25px;
  }
</style>
