<template>
  <div class="content">
    <div class="topSearch">
      <div class="left">
        选择日期：
        <DatePicker
          v-model="date"
          format="yyyy/MM/dd"
          type="daterange"
          placement="bottom-end"
          placeholder="Select date"
          style="width: 200px"
        ></DatePicker>
        <span style="margin-left:10px">活动状态：</span>
        <Select v-model="status" style="width: 150px" placeholder="请选择">
          <Option :value="0">未开始</Option>
          <Option :value="1">进行中</Option>
          <Option :value="2">已结束</Option>
        </Select>
        <Button type="primary" @click="search">查 询</Button>
        <Button type="primary" ghost>重 置</Button>
      </div>
      <div class="right">
        <Button type="primary">导 出</Button>
      </div>
    </div>
    <Table
      :loading="$store.state.app.isLoading"
      border
      ref="selection"
      :columns="columns"
      :data="data"
    >
      <template slot-scope="{ row }" slot="activity_date">
        <span>{{ row.activity_date | format }}</span>
      </template>
      <template slot-scope="{ row }" slot="status">
        <span>{{ row.status===0 ? '未开始':row.status===1?'进行中':'已结束' }}</span>
      </template>
      <template slot-scope="{ row }" slot="created_at">
        <span>{{ row.created_at | format }}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <a @click="edit(row)">详情</a>
      </template>
    </Table>
    <Pager
      class="margin-top-10"
      :config="config"
      @on-change="handlePager"
    ></Pager>
  </div>
</template>

<script>
import { activityClocks } from "@/api/clock/activityClocks";
import { formatDate } from '@/libs/util'
import Pager from "@/view/common/Pager.vue";
export default {
  name: "categories",
  components: {
    Pager
  },
    filters: {
    format (value) {
      return formatDate(value)
    }
  },
  data() {
    return {
      config: { total: 0, size: 10, current: 1 },
      date: [],
      status: null,
      pageIndex: 1,
      pageSize: 10,
      data: [],
      columns: [
        {
          title: "活动日期",
          slot: "activity_date"
        },
        {
          title: "活动缴费金额(真我币)",
          key: "pay_amount"
        },
        {
          title: "活动状态",
          slot: "status"
        },
        {
          title: "报名人数",
          key: "apply_num"
        },
        {
          title: "签到人数",
          key: "sign_in_num"
        },
        {
          title: "本场瓜分(真我币)",
          key: "expense_amount"
        },
        {
          title: "操作",
          slot: "action"
        }
      ]
    };
  },
  methods: {
    search() {
      let params = {
        status: this.status,
        startDate: this.date[0],
        endDate: this.date[1],
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      activityClocks(params).then(res => {
        this.config.total = res.total;
        this.data = res.data
      });
    },
    handlePager(pager) {
      this.pageIndex = pager.current;
      this.pageSize = pager.size;
      this.search();
    },
    goDetail() {
      this.$router.push({ path: "/signIn/detail", query: { id: "new" } });
    }
  },
  mounted() {
    console.log(11);
    this.search();
  }
};
</script>

<style lang="less"></style>
