<template>
  <div class="pkg-show">
    <el-form inline>

      <el-form-item label="日期">
        <el-date-picker
          v-model="dataDate"

          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="起始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>


        <el-form-item label="App名称" >
        <el-select
          v-model="pkg"
          filterable
          @change="dataFilter"
        >
          <el-option
            v-for="(item, index) in pkgList"
            :key="index"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="">
        <el-button type="primary" @click="dataFilter">筛选</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="income"
      style="width: 100%"
    >
      <el-table-column
        label="文案"
        sortable
        prop="title"
        align="left"
      />
      <el-table-column
        label="曝光数"
        prop="show_pv"
        sortable
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        label="点击数"
        sortable
        prop="click"
        align="center"
        width="140"
      />
      <el-table-column
        label="消耗"
        prop="cost"
        sortable
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        label="转化数"
        sortable
        prop="convert_pv"
        align="center"
        width="140"
      />
      <el-table-column
        label="点击率"
        sortable
        prop="click_ratios"
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        label="转化价格"
        sortable
        prop="convert_price"
        align="center"
        width="140"
      />

    </el-table>
  </div>
</template>

<script>
// 数据获取
import { getBusinIncome } from "@/api/cloud";
import { menuSelectApps } from "@/api/report";
const moment = require("moment");
export default {
  data (){
    return {
      dataDate:[],
      pkg:"",
      pkgList:[],
      income:[],
      startDate:'',
      endDate:''
    }
  },
  created(){
    this.dataDate[0] = moment().subtract(7, "days").format("YYYY-MM-DD");
    this.dataDate[1] = moment().format("YYYY-MM-DD");
    this.getAppData();
  },
  methods : {
    dataFilter (){
      this.getTableData();
    },
    // 获取表格信息
    getTableData(){
      console.log("dataDate", this.dataDate);
      this.startDate = this.dataDate[0];
      this.endDate = this.dataDate[1];
      let params = {
        sqlId: 1343,
        pkg: this.pkg,
        startDate: this.startDate,
        endDate: this.endDate
      };
      getBusinIncome(params).then(res=>{
        this.income = res.result.data;
        for(var i = 0; i < this.income.length; i++){
          this.income[i].convert_price = this.income[i].convert_price.toFixed(2);
          this.income[i].click_ratios = (this.income[i].click_ratios*100).toFixed(2)+'%';
        }
      });
    },

    // 获取包信息
    getAppData(){
      let params = {
        platformId: 4,
        menuCode: "putin.apps",
      };
      menuSelectApps(params).then((res) => {
        this.pkgList = res.result.data;
      })
    }
  }
}
</script>

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