<template>
  <div>
    <!-- 筛选 -->
    <el-form inline>
      <!-- 选择应用 -->
      <el-form-item label="选择应用">
        <el-select
          v-model="condition.pkg"
          placeholder="请选择"
          filterable
          class="selector-apps"
          @change="selectPkgChange"
        >
          <el-option
            v-for="(item, index) in selectApps"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 投放日期 -->
      <el-form-item label="投放日期"
        ><el-date-picker
          v-model="condition.queryDate"
          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="condition.agentId">
          <el-option
            v-for="item in agentInfo"
            :key="item.agent_id"
            :value="item.agent_id"
            :label="item.agent_name"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="dataFilter" class="filter-btn"
          >筛选</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 表格组件 -->
    <div class="table-info" v-loading="loading">
      <table-info
        :income="income"
        @playVideo="playVideo"
        @detailClick="detailClick"
      />
    </div>

    <!-- 分页 -->
    <el-pagination
      v-if="paginationInfo.total > 0"
      background
      :total="paginationInfo.total"
      :page-size="paginationInfo.size"
      :current-page="paginationInfo.currentPage"
      style="text-align: right; margin-bottom: 5px"
      layout="total, prev, pager, next, sizes"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
import { getBusinIncome } from "@/api/cloud";

import TableInfo from "./TableInfo";
export default {
  props: {
    /* 便捷时间选择器 */
    pickerOptions: {
      type: Object,
      default() {
        return {};
      },
    },
    /* 获取今天日期的函数 */
    getTime: {
      type: Function,
    },
    /* 应用选择 */
    selectApps: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      condition: {
        queryDate: [], // 选择日期
        pkg: "com.ym.ddcy",
        agentId: "",
      },
      income: [], // 列表数据
      loading: false,
      /* 分页信息 */
      paginationInfo: {
        total: 0,
        currentPage: 1,
        size: 20,
      },
      agentInfo: [], // 代理商信息
    };
  },

  components: {
    TableInfo,
  },

  created() {
    /* 默认日期为今天 */
    this.condition.queryDate = [this.getTime(), this.getTime()];
    this.getIncomeData(); // 获取自投收入信息
    this.getTotalNums(); // 获取数据总条数
    this.getAgentsInfo(); // 获取代理商信息
  },

  methods: {
    /* 获取收入数据 */
    getIncomeData() {
      this.loading = true;
      let params = {
        startDate: this.condition.queryDate[0],
        endDate: this.condition.queryDate[1],
        sqlId: 1106,
        pkg: this.condition.pkg,
        page: this.paginationInfo.currentPage,
        size: this.paginationInfo.size,
        agentId: this.condition.agentId + "",
      };
      getBusinIncome(params).then((res) => {
        this.income = res.result.data;
        this.loading = false;
      });
    },

    /* 获取数据总条数 */
    getTotalNums() {
      let params = {
        startDate: this.condition.queryDate[0],
        endDate: this.condition.queryDate[1],
        sqlId: 1107,
        pkg: this.condition.pkg,
        agentId: this.condition.agentId + "",
      };
      getBusinIncome(params).then((res) => {
        this.paginationInfo.total = res.result.data[0].total_size;
      });
    },

    /* 获取代理商信息 */
    getAgentsInfo() {
      let params = {
        sqlId: 1109,
        pkg: this.condition.pkg,
      };
      getBusinIncome(params).then((res) => {
        this.agentInfo = res.result.data;
        /* 这里是为了拼接全部这个字段 */
        let allOption = {};
        let agentIdArr = [];
        res.result.data.forEach((item) => {
          agentIdArr.push(item.agent_id);
        });
        allOption.agent_id = agentIdArr.toString();
        allOption.agent_name = "全部";
        this.agentInfo.unshift(allOption);
        /*****************/
        this.condition.agentId = this.agentInfo[0].agent_id; // 默认为全部
      });
    },

    /* 选中的包改变时 */
    selectPkgChange() {
      console.log(this.condition.pkg);
      this.getAgentsInfo(); // 获取这个包下的代理商
    },

    /* 点击查询按钮 */
    dataFilter() {
      this.getIncomeData(); // 重新获取数据
      this.getTotalNums();
    },

    /* 分页 */
    // 当页面改变时触发
    handleCurrentChange(val) {
      console.log("aaa", val);
      this.paginationInfo.currentPage = val;
      this.getIncomeData();
    },

    // 当每页条数发生改变时触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.paginationInfo.size = val;
      this.getIncomeData();
    },
    /*************/

    /* 播放视频 */
    playVideo(row) {
      this.$emit("palyVideoAgent", row);
    },

    /* 详情信息 */
    detailClick(row) {
      this.$emit("detailAgentClick", row);
    },
  },
};
</script>

<style scoped>
/* .table-info {
  background-color: #fff;
  padding: 20px 0;
} */
</style>