<template>
  <LayoutContent>
    <LayoutFilter @on-filter="onFilter" @on-clear="onClear">
      <i-form ref="filterForm" inline :model="filter">
        <i-form-item prop="id">
          <i-input placeholder="输入ID" v-model="filter.id"></i-input>
        </i-form-item>
        <i-form-item prop="name">
          <i-input placeholder="输入券名称" v-model="filter.name"></i-input>
        </i-form-item>
        <i-form-item prop="status">
          <i-select v-model="filter.status" style="width: 100px;">
            <i-option :value="0">全部</i-option>
            <i-option :value="1">未生效</i-option>
            <i-option :value="2">生效中</i-option>
            <i-option :value="3">已过期</i-option>
            <i-option :value="4">已作废</i-option>
          </i-select>
        </i-form-item>
        <i-form-item prop="time">
          <i-date-picker type="datetimerange" v-model="filter.time" width="300" placeholder="开始-结束时间" format="yyyy-MM-dd HH:mm" style="width: 250px"></i-date-picker>
        </i-form-item>
      </i-form>
    </LayoutFilter>
    <LayoutTools>
      <i-button type="success" icon="md-add">新增优惠券</i-button>
    </LayoutTools>
    <LayoutTable>
      <i-table :columns="columns" :data="data"></i-table>
      <template slot="footer" class="btns">
        <i-button type="primary" icon="ios-cloud-download">导出</i-button>
      </template>
    </LayoutTable>
  </LayoutContent>
</template>

<script>
import {Button} from 'iview'
import Api from '@/api/api'

const api = new Api()

export default {
  name: 'CouponPage',
  data() {
    return {
      filter: {
        id: '',
        name: '',
        status: 0,
        time: ['', '']
      },
      data: [{}],
      columns: [{
        title: 'ID',
        key: 'id'
      }, {
        title: '券名称',
        key: 'id'
      }, {
        title: '数量',
        key: 'id'
      }, {
        title: '使用期限',
        key: 'id'
      }, {
        title: '优惠券说明',
        width: 300,
        key: 'id'
      }, {
        title: '状态',
        key: 'id'
      }, {
        title: '操作',
        width: 270,
        render() {
          return (
            <div>
              <i-button type="success" size="small">查看详情</i-button>&nbsp;
              <i-button type="primary" size="small">修改</i-button>&nbsp;
              <i-button type="error" size="small">作废</i-button>&nbsp;
              <i-button type="warning" size="small">发放记录</i-button>
            </div>
          );
        }
      }]
    }
  },
  methods: {
    onFilter() {
      this.fetchData(this.filter)
    },
    onClear() {
      this.$refs.filterForm.resetFields()
      this.fetchData(this.filter)
    },
    fetchData(params) {
      api._post('/ufoPlatform/coupon/queryCoupons', {
        id: params.id || void 0,
        name: params.name || void 0,
        status: params.status || void 0,
        startTime: params.time[0] || void 0,
        endTime: params.time[1] || void 0,
      }, true)
    }
  }
}
</script>

<style>

</style>