<template>
  <div class="pkg-show">
    <el-form inline>
      <el-form-item label="应用选择">
        <el-select
          v-model="form.pkg"
          placeholder="应用选择"
          @change="_fetchAdvCfgList"
          filterable
          clearable
        >
          <el-option
            v-for="item in pkgList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="广告主ID">
        <el-input
          v-model="form.ader_id"
          placeholder="请输入广告主ID"
        />
      </el-form-item>

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

      <el-form-item label="用户ID">
        <el-input
          v-model="form.userId"
          placeholder="请输入用户ID"
        />
      </el-form-item>

      <el-form-item label="是否上报">
        <el-select
          v-model="form.callAction"
          placeholder="请选择是否上报"
          @change="_fetchAdvCfgList"
          filterable
          clearable
        >
          <el-option
            v-for="item in callActionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>


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

    <el-table
      :data="tableData"
      style="width: 100%"
    >s
      <el-table-column align="center" label="IDs" prop="id" width="100px" />
      <el-table-column align="center" label="平台" prop="platform" width="100px"/>
      <el-table-column align="center" label="uid" prop="uid" />
      <el-table-column align="center" label="a_id" prop="android_id" />
      <el-table-column align="center" label="广告主ID" prop="ader_id" />
      <el-table-column align="center" label="计划ID" prop="plan_id" />
      <el-table-column align="center" label="转化方式" prop="convertAction" />
      <el-table-column align="center" label="是否付费上报" :render-header="renderPayHeader" width="200px">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.if_report && scope.row.if_report > 0">已上报</el-tag>
          <el-tag type="success" v-else-if="scope.row.call_action && scope.row.call_action.indexOf('cus') > 0" >虚拟上报</el-tag>
          <el-tag type="warning" v-else >未上报</el-tag>
          <br/>
          <span style="color: #1e6abc">支付总金额: {{ scope.row.total_pay }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="付费次数" >
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.call_str" placement="top">
            <el-button>{{ scope.row.pay_pv }}</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="视频数" prop="show_pv"  :render-header="renderHeader" width="60px"/>
      <el-table-column align="center" label="预估ecpm" prop="ecpm_est" :render-header="renderecpm"/>
      <el-table-column align="center" label="arpu" prop="arpu" width="100px" :formatter="toFixed" :render-header="renderarpu"/>
      <el-table-column align="center" label="创建时间" prop="createAt" />
      <el-table-column label="操作" min-width="100" v-if="this.form.callAction == 0">
        <template slot-scope="scope">

          <span v-if="scope.row.if_report && scope.row.if_report > 0">已回传</span>
          <el-button v-else  type="primary" @click="virtualBackhaul(scope.row)">
            回传
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页数跳转 -->
    <div class="changePage" style="padding-bottom: 10px">
      <font style="font-size: 12px; color: gray">选择页数:</font>
      <el-input-number
        size="mini"
        :min="1"
        @change="_fetchAdvCfgList"
        v-model="pageInfo.page"
      ></el-input-number>
      <font style="font-size: 12px; color: gray">每页条数:</font>
      <el-select
        style="width: 66px"
        v-model="pageInfo.size"
        size="mini"
        @change="_fetchAdvCfgList"
      >
        <el-option value="10" />
        <el-option value="20" />
        <el-option value="50" />
        <el-option value="100" />
      </el-select>
    </div>
  </div>
</template>

<script>
import { getBusinIncome, getSelectApps } from "@/api/cloud";
import { backhaul } from '@/api/report';
export default {
  data() {
    return {
      form: {
        pkg: 'com.zxbw.xymh',
        ader_id: '',
        plan_id: '',
        userId: '',
        callAction: 0
      },
      pkgList: [],
      tableData: [],
      pageInfo: {
        page: 1,
        size: 10
      },
      order: 'show_pv DESC',
      callActionList: [
        {
          label: '未上报',
          value: 0
        },
        {
          label: '已上报',
          value: 1
        },
        {
          label: '虚拟上报',
          value: 2
        }
      ]

    }
  },
  created() {
    this._fetchAppList();
    // this.fetchAdvCfgList();
  },
  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;
      });
    },

    // 网络请求 获取表格数据
    _fetchAdvCfgList() {
      const params = {
        sqlId: 1348,
        pkg: this.form.pkg,
        aderId: this.form.ader_id,
        planId: this.form.plan_id,
        userId: this.form.userId,
        ...this.pageInfo,
        OrderBy: this.order,
        callAction: this.form.callAction
      };
      getBusinIncome(params).then((res)=>{
        this.tableData = res.result.data;
      })
    },
    // 虚拟回传
    virtualBackhaul(row) {
      let params = {
        id: row.id,
        action: row.actionCode
      };
      backhaul(params).then((res)=>{
        console.log(res)
        let msg = res.result.data.msg;
        this.$message.success(msg);
        this._fetchAdvCfgList();
      })
    },
    toFixed(row) {
      var newData = row.arpu.toFixed(2);
      return newData;
    },

    // 控制视频数排序
    renderPayHeader(h) {
      return(
        <div style="display:flex;justify-content:left;align-items:center;">
        <span>是否付费上报</span>
        <div style="display:flex;justify-content:center;align-items:center;flex-wrap:wrap;">
        <i class="el-icon-caret-top" style="color:#ccc; padding:0;width:100%"  onClick={()=>this.handlePayup()}></i><br/>
      <i class="el-icon-caret-bottom" style="color:#ccc; padding:0;width:100%;margin-top:-10px" onClick={()=>this.handlePaydown()}></i>
      </div>
      </div>
    )
    },
    handlePayup() {
      // this.tableData = [];
      this.order = "total_pay ASC";
      this.pageInfo.page = 1;
      let params = {
        sqlId: 1348,
        pkg: this.form.pkg,
        aderId: this.form.ader_id,
        planId: this.form.plan_id,
        OrderBy: "total_pay ASC" ,
        ...this.pageInfo
      };
      getBusinIncome(params).then((res)=>{
        this.tableData = res.result.data;
      })
    },
    handlePaydown() {
      // this.tableData = [];
      this.pageInfo.page = 1;
      this.order = "total_pay DESC";
      let params = {
        sqlId: 1348,
        pkg: this.form.pkg,
        aderId: this.form.ader_id,
        planId: this.form.plan_id,
        OrderBy: "total_pay DESC",
        ...this.pageInfo
      };
      getBusinIncome(params).then((res)=>{
        this.tableData = res.result.data;
      })
    },


    // 控制视频数排序
    renderHeader(h) {
        return(
            <div style="display:flex;justify-content:left;align-items:center;">
             <span>视频数</span>
              <div style="display:flex;justify-content:center;align-items:center;flex-wrap:wrap;">
                <i class="el-icon-caret-top" style="color:#ccc; padding:0;width:100%"  onClick={()=>this.handleup()}></i><br/>
                <i class="el-icon-caret-bottom" style="color:#ccc; padding:0;width:100%;margin-top:-10px" onClick={()=>this.handledown()}></i>
              </div>
            </div>
        )
    },
　　handleup() {
      // this.tableData = [];
      this.order = "show_pv ASC";
      this.pageInfo.page = 1;
      let params = {
        sqlId: 1348,
        pkg: this.form.pkg,
        aderId: this.form.ader_id,
        planId: this.form.plan_id,
        OrderBy: "show_pv ASC" ,
        ...this.pageInfo
      };
      getBusinIncome(params).then((res)=>{
        this.tableData = res.result.data;
      })
    },
    handledown() {
      // this.tableData = [];
      this.pageInfo.page = 1;
      this.order = "show_pv DESC";
      let params = {
        sqlId: 1348,
        pkg: this.form.pkg,
        aderId: this.form.ader_id,
        planId: this.form.plan_id,
        OrderBy: "show_pv DESC",
        ...this.pageInfo
      };
      getBusinIncome(params).then((res)=>{
        this.tableData = res.result.data;
      })
    },
    // 控制ecpm排序
    renderecpm(h) {
        return(
            <div style="display:flex;justify-content:left;align-items:center">
              <span>预估ecpm</span>
              <div style="display:flex;justify-content:center;align-items:center;flex-wrap:wrap;">
                <i class="el-icon-caret-top" style="color:#ccc; padding:0;width:100%"  onClick={()=>this.handleecpmUp()}></i><br/>
                <i class="el-icon-caret-bottom" style="color:#ccc; padding:0;width:100%;margin-top:-10px" onClick={()=>this.handleecpmDown()}></i>
              </div>
            </div>
        )
    },
　　handleecpmUp() {
      // this.tableData = [];
      this.order = "ecpm ASC";
      this.pageInfo.page = 1;
      let params = {
        sqlId: 1348,
        pkg: this.form.pkg,
        aderId: this.form.ader_id,
        planId: this.form.plan_id,
        OrderBy: "ecpm ASC" ,
        ...this.pageInfo
      };
      getBusinIncome(params).then((res)=>{
        this.tableData = res.result.data;
      })
    },
    handleecpmDown() {
      // this.tableData = [];
      this.order = "ecpm DESC";
      this.pageInfo.page = 1;
      let params = {
        sqlId: 1348,
        pkg: this.form.pkg,
        aderId: this.form.ader_id,
        planId: this.form.plan_id,
        OrderBy: "ecpm DESC",
        ...this.pageInfo
      };
      getBusinIncome(params).then((res)=>{
        this.tableData = res.result.data;
      })
    },
    // 控制arpu排序
    renderarpu(h) {
        return(
            <div style="display:flex;justify-content:left;align-items:center;">
             <span>arpu</span>
              <div style="display:flex;justify-content:center;align-items:center;flex-wrap:wrap;">
                <i class="el-icon-caret-top" style="color:#ccc; padding:0;width:100%"  onClick={()=>this.handlearpuUp()}></i><br/>
                <i class="el-icon-caret-bottom" style="color:#ccc; padding:0;width:100%;margin-top:-10px" onClick={()=>this.handlearpuDown()}></i>
              </div>
            </div>
        )
    },
　　handlearpuUp() {
      // this.tableData = [];
      this.order = "arpu ASC";
      this.pageInfo.page = 1;
      let params = {
        sqlId: 1348,
        pkg: this.form.pkg,
        aderId: this.form.ader_id,
        planId: this.form.plan_id,
        OrderBy: "arpu ASC" ,
        ...this.pageInfo
      };
      getBusinIncome(params).then((res)=>{
        this.tableData = res.result.data;
      })
    },
    handlearpuDown() {
      // this.tableData = [];
      this.order = "arpu DESC";
      this.pageInfo.page = 1;
      let params = {
        sqlId: 1348,
        pkg: this.form.pkg,
        aderId: this.form.ader_id,
        planId: this.form.plan_id,
        OrderBy: "arpu DESC",
        ...this.pageInfo
      };
      getBusinIncome(params).then((res)=>{
        this.tableData = res.result.data;
      })
    },
  }
}
</script>

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