<template>
  <div style="margin-top: 30px">
    <el-card class="box-card">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">

        <el-form-item label="创建时间">
          <!--          <el-date-picker-->
          <!--            v-model="dateRange"-->
          <!--            style="width: 400px"-->
          <!--            size="medium"-->
          <!--            value-format="yyyy-MM-dd"-->
          <!--            type="datetimerange"-->
          <!--            range-separator="至"-->
          <!--            start-placeholder="开始日期"-->
          <!--            end-placeholder="结束日期"-->
          <!--          ></el-date-picker>-->
          <el-date-picker
            v-model="beginTime"
            style="width: 140px"
            type="date"
            placeholder="开始日期">
          </el-date-picker>
          至
          <el-date-picker
            v-model="endTime"
            style="width: 140px"
            type="date"
            placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="queryParams.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="优惠类型" prop="favType">
          <el-input v-model="queryParams.favType"></el-input>
        </el-form-item>
        <el-form-item label="优惠来源" prop="favFrom">
          <el-input v-model="queryParams.favFrom"></el-input>
        </el-form-item>
        <el-form-item label="消费类型" prop="favConsumptionType">
          <el-input v-model="queryParams.favConsumptionType"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<!--          <el-button type="primary" icon="el-icon-plus" @click = "exportExcelCashier()">导出订单</el-button>-->

        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div class="box-gang">
        <div class="box">
          <div class="size-hui">总优惠笔数</div>
          <div class="size-bole">{{ count.count || 0 }}笔</div>
        </div>
        <div class="box">
          <div class="size-hui">总优惠金额</div>
          <div class="size-bole">{{ count.allMoney || 0 }}元</div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="wgang">
        <div>交易明细分析列表</div>
      </div>
      <div class="table-box">
        <el-table
          :data="list"
          style="width: 100%">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column prop="orderNo" align="center" label="订单号" width="220"> </el-table-column>
          <el-table-column prop="favType" align="center" label="优惠类型" width="220"> </el-table-column>
          <el-table-column prop="favFrom" align="center" label="优惠来源"> </el-table-column>
          <el-table-column prop="favMoney" align="center" label="优惠金额"> </el-table-column>
          <el-table-column prop="favConsumptionType" align="center" label="消费类型"> </el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间"> </el-table-column>
        </el-table>
      </div>
      <!--      <div class="pagination-box">-->
      <!--        <el-pagination-->
      <!--          background-->
      <!--          v-show="total>0"-->
      <!--          layout="prev, pager, next"-->
      <!--          :total="total"-->
      <!--          :page.sync="queryParams.page"-->
      <!--          :limit.sync="queryParams.pageSize"-->
      <!--          @current-change="getList">-->
      <!--        </el-pagination>-->
      <!--      </div>-->

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </el-card>
  </div>
</template>

<script>

import {getCount, getFavourableList} from "@/api/favourable/favourable";

export default {
  name: "reconciliation-favourable",
  data(){
    return {
      total:0,
      list:[],
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
      },
      // 日期范围
      dateRange: [],
      beginTime:"",
      endTime:"",
      count:{}
    }
  },
  created() {
    this.getList();
  },
  methods:{
    getList(){
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      getFavourableList(this.addDateRange(this.queryParams,dateRange)).then(res => {
        this.list = res.data.records
        this.total = res.data.total
      })
      this.getCount()
    },
    getCount(){
      getCount(this.addDateRange(this.queryParams)).then(res => {
        this.count = res.data
      })
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime = ""
      this.endTime = ""
      this.handleQuery();
    },
    exportExcelCashier() {
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      // exportExcelTradingApi(this.addDateRange(this.queryParams, dateRange)).then(res=>{
      //   const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      //   this.$download.saveAs(blob,'交易明细统计.xLsx')
      // })
    },
  }
}
</script>

<style lang="scss" scoped>

.box-card{
  width: 100%;
  margin-bottom: 15px;
}
.box-gang{
  width: 100%;
  display: flex;
  align-items: center;
}
.box{
  width: 200px;
  box-sizing: border-box;
  padding: 10px;
  background: #f9f9f9;
  height: 86px;
  margin-right: 10px;
}
.size-hui{
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.size-bole{
  font-weight: bold;
}
</style>
