<template>
  <div class="divBox" style="background: #F0F2F5;">
    <DayData :tableData="tableData.data" class="mb15" />
    <el-card>
        <el-form size="small" inline :model="tableFrom" ref="searchForm" label-width="85px">
        <el-form-item label="时间选择：">
          <el-date-picker
            v-model="timeVal"
            value-format="yyyy/MM/dd"
            format="yyyy/MM/dd"
            size="small"
            type="daterange"
            placement="bottom-end"
            placeholder="自定义时间"
            style="width: 280px;"
            :picker-options="pickerOptions"
            @change="onchangeTime"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getList(1)">搜索</el-button>
          <el-button size="small" @click="searchReset()">重置</el-button> 
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        size="small"
        class="table"
        align="center"
      >
        <el-table-column label="id" min-width="130" prop="id"></el-table-column>
        <el-table-column label="时间" min-width="130" prop="date"></el-table-column>
        <el-table-column label="新增用户(人)" min-width="130" prop="reg_count"></el-table-column>
        <el-table-column label="活跃人数(人)" min-width="130" prop="active_count"></el-table-column>
        <el-table-column label="累计用户(人)" min-width="130" prop="user_count"></el-table-column>
        <el-table-column label="支付人数(人)" min-width="130" prop="pay_count"></el-table-column>
        <el-table-column label="支付订单数(单)" min-width="130" prop="order_count"></el-table-column>
        <el-table-column label="实付订单金额(含运费/元)" min-width="130" prop="order_amount"></el-table-column>
        <el-table-column label="折扣使用数量" min-width="130" prop="order_coupon"></el-table-column>
        <el-table-column label="退订单退款金额(元)" min-width="130" prop="refund_amount"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import DayData from './components/DayData'
import {statisticsDayApi} from '@/api/home'
import timeOptions from '@/utils/timeOptions';
export default {
    name: 'dailyStatistics',
    components: { DayData },
    data() {
        return {
            listLoading: true,
            timeVal: [],
            pickerOptions: timeOptions,
            tableData:{},
            tableFrom: {
                date: "",
                page: 1,
                limit: 30,
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
            // 具体日期
        onchangeTime(e) {
        this.timeVal = e;
        console.log(e);
        this.tableFrom.date = e ? this.timeVal.join("-") : "";
        this.tableFrom.page = 1;
        this.getList(1);
        },
            /**重置 */
        searchReset(){
            this.timeVal = []
            this.tableFrom.date = ""
            this.$refs.searchForm.resetFields()
            this.getList(1)
        },
        // 列表
        getList(num) {
            this.listLoading = true;
            this.tableFrom.page = num ? num : this.tableFrom.page;
            statisticsDayApi(this.tableFrom)
                .then((res) => {
                this.tableData.data = res.data.list;
                this.tableData.total = res.data.count;
                this.listLoading = false;
                })
                .catch((res) => {
                this.$message.error(res.message);
                this.listLoading = false;
                });
        },
        pageChange(page) {
            this.tableFrom.page = page;
            this.getList('');
        },
        handleSizeChange(val) {
            this.tableFrom.limit = val;
            this.getList('');
        },
    }
}
</script>

<style scoped lang="scss">

</style>