<template>
  <div>
    <div style="text-align: right;margin-bottom: 10px">
      <el-button @click="exportList" class="export-excel" type="primary">导出报表</el-button>
    </div>
    <div class="table">
      <el-table
        v-if="tableData.length"
        border
        style="width: 100%"
        :data="tableData"
      >
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :prop="prop"
          :label="tableHeaders[index]"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="prop === 'alipayIncome'"
              @click="clickProject(scope.row,'alipay')"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'wechatIncome'"
              @click="clickProject(scope.row,'wxpay')"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'appleIncome'"
              @click="clickProject(scope.row,'apple')"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'p'"
              @click="clickProject(scope.row,'admin_confirm')"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'alipayOutcome'"
              @click="clickProject(scope.row,'alipay_outcome')"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'gongMallOutcome'"
              @click="clickProject(scope.row,'gongmall')"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'qingtuanbaoOutcome'"
              @click="clickProject(scope.row,'qingtuanbao')"
            >{{ scope.row[prop] }}
            </el-button>
            <el-button
              type="text"
              v-else-if="prop === 'kaifabaoOutcome'"
              @click="clickProject(scope.row,'kaifabao')"
            >{{ scope.row[prop] }}
            </el-button>
            <span v-else>{{ scope.row[prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @current-change="getTableData"
        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="pageInfo.total"
      ></el-pagination>
    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      pageInfo: {
        page: 1,
        size: 20,
        total: 0,
      },
      // 列表头显示内容
      tableHeaders: [],
      // 列表头字段
      tableProps: [],
      // 列表数据
      tableData: []
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 获取列表数据
    async getTableData() {
      this.tableData = [];
      const res = await this.$post("/api/admin/ReportForm/index", {
        id: 'MonthCashTotal'
      });
      let data = res.data;
      this.tableData = data.list;
      this.pageInfo.total = Number(data.total);
      this.pageInfo.page = data.totalPage;
      this.setTitles(data.titles);
    },
    async exportList() {
      let url = window.location.host + "/api/admin/ReportForm/export?id=MonthCashTotal";
      window.location.href = "https://" + url;
    },
    setTitles(title) {
      for (let i in title) {
        this.tableProps.push(i);
        this.tableHeaders.push(title[i]);
      }
    },
    clickProject(row, channel) {
      let path = "";
      let arr = ['alipay', 'wxpay', 'apple', 'admin_confirm', 'alipay_outcome', 'gongmall','qingtuanbao','kaifabao'];
      if (!arr.includes(channel)) {
        this.$message.error('渠道不正确');
        return;
      }
      if (channel === "admin_confirm") {
        path = "/main/artificial_orders"
      }
      switch (channel) {
        case 'alipay':
        case 'wxpay':
        case 'apple':
          path = "/main/cash_form";
          break;
        case 'admin_confirm':
          path = "/main/artificial_orders";
          break;
        case 'alipay_outcome':
          path = "/main/withdraw";
          break;
        case 'gongmall':
        case 'qingtuanbao':
        case 'kaifabao':
          path = "/main/orders";
          break;
      }
      if (path === "") return;
      //2020-10-1 00:00:00
      let date = row.month;
      if (!date || date.length < 6) {
        this.$message.error('时间格式不正确');
        return;
      }
      let year = date.substring(0, 4);
      let month = date.substring(4, 6);
      let data = {
        channel: channel,
        start_time: this.beginTime(year, month),
        end_time: this.lastTime(year, month)
      };
      this.$router.push({path: path, query: data});
    },
    beginTime(year, month) {
      if (month.length <= 1) {
        let month = "0" + month;
      }
      let startTime = year + '-' + month + '-' + "01" + " 00:00:00";
      return startTime;
    },
    lastTime(year, month) {
      if (month.length <= 1) {
        let month = "0" + month;
      }
      let day = new Date(year, month, 0);
      let lastdate = year + '-' + month + '-' + day.getDate();
      let lastTime = lastdate + " 23:59:59";
      return lastTime;
    }
  }
};
</script>

<style scoped>
.table {
  height: calc(100% - 80px);
}
</style>
