<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="请选择代理商">
        <el-select
          v-model="condition.agentId"
          clearable
          placeholder="请选择代理商"
        >
          <el-option
            v-for="item of agentList"
            :key="item.id"
            :label="item.agentName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="请选择应用">
        <el-select v-model="condition.pkg" clearable placeholder="请选择应用">
          <el-option
            v-for="item of pkgOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

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

    <div style="margin-bottom: 20px">
      <el-switch
        v-model="condition.agent_jh"
        active-text="代理商是否聚合"
        style="margin-right: 20px"
      >
      </el-switch>
      <el-switch
        v-model="condition.pkg_jh"
        active-text="应用是否聚合"
        style="margin-right: 20px"
      >
      </el-switch>
    </div>

    <el-table
      :data="detailsList"
      v-loading="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="代理商" prop="agentName" align="center" />
      <el-table-column label="应用" prop="appName" align="center" />
      <el-table-column label="消耗（元）" prop="cost" align="center" />
      <el-table-column label="余额（元）" prop="balance" align="center" />
      <el-table-column label="转入（元）" prop="transferIn" align="center" />
      <el-table-column label="转出（元）" prop="transferOut" align="center" />
    </el-table>
  </div>
</template>

<script>
import { dataReport } from "@/api/putonDataReport";
import { putonAgent } from "@/api/agent";
const moment = require("moment");

export default {
  name: "putonDataReport",
  data() {
    return {
      detailsList: [],
      agentList: [], //代理商列表
      listLoading: true,
      defaultShow: "抱歉，暂时无数据统计数据可以展示，敬请期待",
      queryDate: [],
      pkgOption: JSON.parse(window.localStorage.getItem("pkgOption")),
      condition: {
        agentId: "", //代理商
        pkg: "", // 应用
        agent_jh: false,
        pkg_jh: false
      }
    };
  },

  created() {
    this.putonAgent();
  },

  mounted() {
    this.dataReport();
  },

  methods: {
    //获取代理商列表
    putonAgent: function() {
      putonAgent("get", {}).then(res => {
        this.listLoading = false;
        if (res.status === 200) {
          this.agentList = res.result.data;
        } else {
          alert(res.msg);
        }
      });
    },

    //获取消耗明细列表
    dataReport: function() {
      dataReport("get", { ...this.condition }).then(res => {
        this.listLoading = false;
        if (res.status === 200) {
          this.detailsList = res.result.data;
        } else {
          alert(res.msg);
        }
      });
    }
  }
};
</script>
