<template>
  <div class="data-report">
    <el-form inline>
      <el-form-item label="应用">
        <zx-app-select
          v-model="condition.pkg"
          @change="_fetchCommonTable"
          :addAllOption="true"
          menuCode="game.Overview,android"
        />
      </el-form-item>

      <el-form-item label="代理商">
        <zx-agent-select
          :pkg="condition.pkg"
          v-model="condition.agentId"
          @change="handleAgentChange"
        />
      </el-form-item>

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

    <zx-table-basis
      :data="tableData"
      :tHeader="tHeader"
      v-loading="is_loading"
    />

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="condition.page"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="condition.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total_nums"
    >
    </el-pagination>
  </div>
</template>

<script>
import { fetchCommonTable } from "@/api/common";

const tHeader = [
  { prop: "account_id", label: "账户ID", id: 1 },
  { prop: "advertiser_id", label: "广告主ID", id: 1 },
  { prop: "advertiser_name", label: "广告主名称", id: 2 },
  { prop: "appName", label: "包名", id: 3 },
  { prop: "agent_name", label: "代理商名称", id: 4 },
  { prop: "balance", label: "余额", id: 5, sortable: true },
  { prop: "cash", label: "现金余额", id: 6, sortable: true },
  { prop: "grant", label: "赠款余额", id: 7, sortable: true },
];

export default {
  data() {
    return {
      condition: {
        pkg: "",
        agentId: "",
        sqlId: 1339,
        page: 1,
        size: 50,
        OrderBy: "balance DESC"
      },
      tableData: [],
      tHeader: tHeader,
      is_loading: false,
      total_nums: 0, // 总条数
    };
  },

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

  methods: {
    _fetchCommonTable() {
      this.is_loading = true;
      fetchCommonTable(this.condition).then((res) => {
        this.is_loading = false;
        this.total_nums = parseInt(res.result.data[0].total_records);
        this.tableData = res.result.data;
      });
    },

    // 当选择代理商组件更新完毕后取到数据进行更新
    handleAgentChange() {
      this.$nextTick(() => {
        this._fetchCommonTable();
      });
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.condition.size = val;
      this._fetchCommonTable();
    },

    // 跳转到当前页
    handleCurrentChange(val) {
      this.condition.page = val;
      this._fetchCommonTable();
    },
  },
};
</script>

<style scoped>
.data-report {
  padding: 20px;
}
</style>
