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


      <el-form-item label="日期">
        <el-date-picker
          v-model="condition.dataDate"
          type="daterange"
          @change="fillDate"
          unlink-panels
          range-separator="-"
          start-placeholder="起始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="应用选择">
        <el-select
          v-model="condition.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="运营" v-if="ifOpAdmin">
        <el-select
          v-model="condition.opId"
          placeholder="选择运营"
          @change="_fetchAdvCfgList"
          filterable
          clearable
        >
          <el-option
            v-for="item in opList"
            :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%"
    >
      <el-table-column align="center" label="日期" prop="datadate" width="100px"/>
      <el-table-column label="上新计划数" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.upload_plans? scope.row.upload_plans: 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="在投计划数" prop="online_plans" >
        <template slot-scope="scope">
          <span>{{ scope.row.online_plans > 0? scope.row.online_plans: 0 }}</span>
        </template>

      </el-table-column>
      <el-table-column align="center" label="有消耗计划数" prop="cost_plans" />
      <el-table-column label="点击率" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.ctr > 0? (scope.row.ctr * 100).toFixed(2) + '%': 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="转化率" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.cvr > 0? (scope.row.cvr * 100).toFixed(2) + '%': 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="消耗" prop="total_cost" />
      <el-table-column align="center" label="单计划平均消耗" prop="cost_per_plan" >
        <template slot-scope="scope">
          <span>{{ scope.row.cost_per_plan > 0? (scope.row.cost_per_plan).toFixed(2): 0 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="激活成本" prop="active_price" >
        <template slot-scope="scope">
          <span>{{ scope.row.active_price > 0? (scope.row.active_price).toFixed(2): 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="转化成本" prop="convert_price" >
        <template slot-scope="scope">
          <span>{{ scope.row.convert_price > 0? (scope.row.convert_price).toFixed(2): 0 }}</span>
        </template>
      </el-table-column>

      <el-table-column v-if="ifOpAdmin" align="center" label="收入" prop="income" />
      <el-table-column v-if="ifOpAdmin" align="center" label="ROI" prop="roi" >

        <template slot-scope="scope">
          <span>{{ scope.row.roi > 0? (scope.row.roi).toFixed(2): 0 }}</span>
        </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 { fetchCommonTable } from "@/api/common";
import { backhaul } from '@/api/report';

// import { mapState } from 'vuex'
import moment  from 'moment'
export default {
  data() {
    return {
      stat: {},
      ifOpAdmin: false,
      opList: [],
      condition: {
        dataDate: [],
        startDate: '',
        endDate: '',
        pkg: '',
        opId: '',
        operationId: '',
      },
      form: {
        pkg: '',
        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
        }
      ]

    }
  },
  created() {
    // this.condition.uid = window.localStorage.getItem('uid')
    this.condition.dataDate[0] = moment().subtract(7, "days").format("YYYY-MM-DD");
    this.condition.dataDate[1] = moment().format("YYYY-MM-DD");

    if (window.localStorage.getItem('roles').indexOf('op_manager') > 0) {
      this.ifOpAdmin = true
      this._fetchOps()
    }

    this.fillDate()
    this._fetchAppList();
    this._fetchAdvCfgList();

  },
  // computed: mapState({
  //   token: (stat) => stat.user.token,
  //   roles: (stat) => stat.user.roles,
  // }),
  watch: {
    "condition.opId"(newV, oldV) {
      console.log(newV, oldV)
      this.condition.operationId = newV + '%'
    }
  },
  methods: {
    fillDate(){
      this.condition.startDate = this.condition.dataDate[0]
      this.condition.endDate = this.condition.dataDate[1]
    },
    _fetchOps() {

      fetchCommonTable({sqlId: 1387}).then(resp => {
        this.opList = resp.result.data
        if (this.opList.length > 0) {
          this.condition.opId = this.opList[0].value
          this.condition.operationId = this.opList[0].value + '%'
        }
        this._fetchAdvCfgList()
      })


    },

    // 网络请求 获取app列表
    _fetchAppList() {
      const params = {
        platformId: 5,
        menuCode: "game.Overview,android",
      };
      getSelectApps(params).then((response) => {

        this.pkgList = response.result.data;
        if (this.ifOpAdmin) {
          this.pkgList.splice(0, 0, {label: '全部', value: ''})
        }
      });
    },

    // 网络请求 获取表格数据
    _fetchAdvCfgList() {
      this.tableData = []
      const params = {
        sqlId: 1385,
        ...this.condition,
      };
      delete params.dataDate
      fetchCommonTable(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;
    },
    // 控制视频数排序
    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>
