<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="查询日期">
        <el-date-picker
          v-model="queryDate"
          :picker-options="pickerOptions"
          type="daterange"
          align="center"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <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.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

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

  

    <el-table
      :data="detailsList"
      v-loading="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="交易日期" prop="datadate" align="center"  width="100px"/>
      <el-table-column label="交易平台" prop="available" width="80px" align="center"> 
        <template slot-scope="scope"> 
          <span v-if="scope.row.type==1" style="color:red">头条</span>
          <span v-else-if="scope.row.type==2" style="color:green">广点通</span>
          <span v-else-if="scope.row.type==3" style="color:orange">快手</span>
        </template>
      </el-table-column>
      <el-table-column label="代理商" prop="agentName" align="center" width="100px"/>
      <el-table-column label="应用名" prop="appName" align="center"  width="150px"/>
      <el-table-column label="广告展示名" prop="displayName" align="center" />
      <el-table-column label="广告主ID" prop="advertiserId" align="center" />
      <el-table-column label="流水类型" prop="transactionType" align="center" />
      <el-table-column label="交易类型" prop="tradeDesc" align="center" />
      <el-table-column label="交易金额" prop="amount" align="center" width="100px"/>
      <el-table-column label="交易时间" prop="createTime" align="center" width="120px"/>
     
    </el-table>
    </el-table>
  </div>
</template>

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

export default {
  name: "consumptionSubsidiary",
  data() {
    return {
      detailsList: [],
      agentList: [], //代理商列表
      listLoading: true,
      defaultShow: "抱歉，暂时无数据统计数据可以展示，敬请期待",
      queryDate: [],
      pkgOption: JSON.parse(window.localStorage.getItem("pkgOption")),
      condition: {
        startDate: "", // 起始日期
        endDate: "", // 截止日期
        agentId: "", //代理商
        pkg: "", // 应用
        datadate_jh: false,
        agent_jh: false,
        pkg_jh: false
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              start = moment(start).format("YYYY-MM-DD");
              end = moment(end).format("YYYY-MM-DD");
              console.log("最近一周", start, end);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              start = moment(start).format("YYYY-MM-DD");
              end = moment(end).format("YYYY-MM-DD");
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              start = moment(start).format("YYYY-MM-DD");
              end = moment(end).format("YYYY-MM-DD");
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },

  created() {
    let beforeDay = moment()
      .subtract(7, "days")
      .format("YYYY-MM-DD");
    this.condition.startDate = beforeDay;
    this.condition.endDate = moment().format("YYYY-MM-DD");
    this.queryDate.push(beforeDay, moment().format("YYYY-MM-DD"));
    this.putonAgent();
  },

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

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

    //获取消耗明细列表
    rechargeRecord: function() {
      this.condition.startDate = this.queryDate[0];
      this.condition.endDate = this.queryDate[1];

      rechargeRecord("get", { ...this.condition }).then(res => {
        this.listLoading = false;
        if (res.status === 200) {
          this.detailsList = res.result.data;
        } else {
          alert(res.msg);
        }
      });
    }
  }
};
</script>
