<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="应用选择">
        <el-select
          v-model="form.pkg"
          placeholder="应用选择"
          @change="_fetchAderList"
          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-select
          v-model="form.ader_id"
          placeholder="请选择广告主"
          @change="_fetchAdvCfgList"
          filterable
          clearable
        >
          <el-option
            v-for="item in aderList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="代理商">
        <el-select
          v-model="form.agentCode"
          placeholder="请选择代理商"
          @change="_fetchAdvCfgList"
          filterable
          clearable
        >
          <el-option
            v-for="item in agentList"
            :key="item.value"
            :label="item.agent_name"
            :value="item.agent_code"
          />
        </el-select>
      </el-form-item>


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

    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column align="center" label="上传日期" prop="upload_date" width="150px"/>
      <!--<el-table-column align="center" label="广告主ID" prop="advertiser_id" />
      <el-table-column align="center" label="广告主名" prop="advertiser_name" />-->
      <el-table-column align="center" label="代理商" prop="agent_name" />
      <el-table-column align="center" label="新上素材数" prop="count_videos" />
      <el-table-column align="center" label="在投素材数" prop="putin_videos" />

    </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 { fetchCommonTable } from "@/api/common";
import { backhaul } from '@/api/report';

const moment = require("moment");

export default {
  data() {
    return {
      dataDate: [],
      form: {
        pkg: '',
        ader_id: '',
        agentCode: '',
        startDate: '',
        endDate: '',

      },
      pkgList: [],
      tableData: [],
      pageInfo: {
        page: 1,
        size: 10
      },
      order: 'show_pv DESC',
      aderList: [],
      agentList: []

    }
  },
  created() {
    this.dataDate[0] = moment().subtract(1, "days").format("YYYY-MM-DD");
    this.dataDate[1] = moment().subtract(1, "days").format("YYYY-MM-DD");


    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;
      });
    },

    _fetchAderList() {

      let params = {sqlId: 1301, pkg: this.form.pkg}
      fetchCommonTable(params).then((res)=>{
        this.aderList = res.result.data;
      })

      this._fetchAgentList()

    },

    _fetchAgentList() {

      let params = {sqlId: 1109, pkg: this.form.pkg}
      fetchCommonTable(params).then((res)=>{
        this.agentList = res.result.data;
      })

    },

    // 网络请求 获取表格数据
    _fetchAdvCfgList() {
      this.form.startDate = this.dataDate[0];
      this.form.endDate = this.dataDate[1];
      const params = {
        sqlId: 1379,
        pkg: this.form.pkg,
        advertiserId: this.form.ader_id,
        planId: this.form.plan_id,
        agentCode: this.form.agentCode,
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        // ...this.pageInfo,
      };
      fetchCommonTable(params).then((res)=>{
        this.tableData = res.result.data;
        console.log(JSON.stringify(res.result.data, null, 4))
      })
    },
    // 虚拟回传
    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;
    },
    // 控制视频数排序
    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>
