<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 placeholder="选择状态" 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-select>
        </i-form-item>
        <i-form-item prop="time">
          <i-date-picker type="datetimerange" v-model="filter.time" 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" @click="onCreateCoupon">新增优惠券</i-button>
    </LayoutTools>
    <LayoutTable :total="total" @on-page-change="onPageChange">
      <i-table :columns="columns" :data="data"></i-table>
      <template slot="footer" class="btns">
        <i-button type="primary" icon="ios-cloud-download" @click="onExport">导出</i-button>
      </template>
    </LayoutTable>
    <ModalCreateCoupon ref="modalCreateCoupon" @on-created="onCreated"></ModalCreateCoupon>
  </LayoutContent>
</template>

<script>
import {Button} from 'iview'; //eslint-disable-line
import Api from '@/api/api';
import dayjs from 'dayjs';
import BlobUtil from 'libs/blob';

import ModalCreateCoupon from './components/modal-create-coupon';

const api = new Api();

export default {
  name: 'CouponPage',
  data() {
    return {
      filter: {
        id: '',
        name: '',
        status: '',
        time: ['', '']
      },
      total: 0,
      data: [],
      columns: [{
        title: 'ID',
        key: 'id'
      }, {
        title: '券名称',
        key: 'name'
      }, {
        title: '数量',
        key: 'amount'
      }, {
        title: '使用期限',
        key: 'useTime',
      }, {
        title: '优惠券说明',
        key: 'remark'
      }, {
        title: '状态',
        key: 'status'
      }, {
        title: '操作',
        width: 270,
        align: 'center',
        render: (h, {row}) => {
          return (
            <div>
              <i-button type="success" size="small" onClick={() => this.onEditCoupon(row, true)}>查看详情</i-button>&nbsp;
              {row.status === '待审核' ?
                (<i-button type="primary" size="small" onClick={() => this.onEditCoupon(row)}>修改</i-button>) :
                void 0}
              &nbsp;
              <i-button type="warning" size="small" onClick={() => this.onToRecord(row)}>发放记录</i-button>
            </div>
          );
        }
      }]
    };
  },
  created() {
    this.fetchData(this.filter);
  },
  methods: {
    onToRecord({id}) {
      location.href = `send-record.html?id=${id}`;
    },
    onCreated() {
      this.fetchData(this.filter);
    },
    onFilter() {
      this.fetchData(this.filter);
    },
    onClear() {
      this.$refs.filterForm.resetFields();
      this.fetchData(this.filter);
    },
    onPageChange(page) {
      this.fetchData(this.filter, page);
    },
    onCreateCoupon() {
      this.$refs.modalCreateCoupon.show();
    },
    onEditCoupon({id}, readonly) {
      this.$refs.modalCreateCoupon.show(id, readonly);
    },
    async onExport() {
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/coupon/export', {
        param: {
          method: 'coupon',
          param: api._2params(this.getParams(this.filter))
        }
      }, {
        responseType: 'blob'
      });
      if (result instanceof Blob) {
        BlobUtil.downloadBlob(result, `优惠券导出_${dayjs().format('YYYY-MM-DD')}.xlsx`);
        this.$Loading.finish();
      } else if (result) {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    async fetchData(params, page = 1) {
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/coupon/queryCoupons', Object.assign({
        page,
      }, this.getParams(params)));

      if (result.code === 200) {
        this.total = result.data.total;
        this.data = result.data.coupons;
        this.$Loading.finish();
      } else {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    getParams(params) {
      let startTime = params.time[0] ? dayjs(params.time[0]).unix() : void 0;
      let endTime = params.time[1] ? dayjs(params.time[1]).unix() : void 0;
      let status = parseInt(params.status) >= 0 ? params.status : void 0;

      return {
        id: params.id,
        name: params.name,
        status,
        startTime,
        endTime,
      };
    }
  },
  components: {ModalCreateCoupon}
};
</script>

<style>

</style>