<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form ref="queryForm" :model="listQuery" label-width="100px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="统计时间:">
              <el-date-picker
                v-model="listQuery.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeTime"
                placeholder="请选择统计时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="统计方式:" class="wayMsg">
              <span
                v-for="(item,index) in way"
                :key="index"
                :class="{active:isactive==item.label}"
                @click="changeWay(item.label)"
              >{{item.label}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="float:right;text-align:right">
            <el-button class="filter-item" type="primary" v-waves @click="handleFilter">导出为Excel</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        :key="tableKey"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" label="时间">
          <template scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="普通会员购买量">
          <template scope="scope">
            <span>{{scope.row.no}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="支付金额(普通会员)">
          <template scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="黄金会员购买量">
          <template scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="支付金额(普通会员)">
          <template scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="支付金额(黄金会员)">
          <template scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="钻石会员购买量">
          <template scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="支付金额(钻石会员)">
          <template scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="总支付金额">
          <template scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  created() {},
  data() {
    return {
      // 统计时间筛选
      listQuery: {
        time: "null"
      },
      //统计方式筛选
      way: [
        {
          label: "全部",
          id: "0"
        },
        {
          label: "日统计",
          id: "1"
        },
        {
          label: "周统计",
          id: "2"
        },
        {
          label: "月统计",
          id: "3"
        }
      ],
      isactive: "全部"
    };
  },
  methods: {
    //统计时间筛选
    changeTime() {
      console.log("----");
    },
    //统计方式筛选
    changeWay(val) {
      this.isactive = val;
    },
    //导出
    handleFilter() {}
  }
};
</script>
<style>
.wayMsg span {
  margin: 10px;
  cursor: pointer;
}
.active {
  color: #409eff;
  font-weight: bold;
}
</style>