<template>
  <LayoutContent :breads="[{title: '优惠券列表'}]">
    <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
      :page="page"
      :total="total"
      :columns="columns"
      :data="data"
      @on-page-change="onPageChange">
      <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 qs from 'qs';

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

const api = new Api();

export default {
  name: 'CouponPage',
  data() {
    return {
      filter: {
        id: '',
        name: '',
        status: '',
        time: ['', '']
      },
      page: 1,
      total: 0,
      data: [],
      columns: [{
        title: 'ID',
        key: 'id',
        width: 80
      }, {
        title: '券名称',
        key: 'name',
        width: 180
      },
      {
        title: 'token',
        key: 'token',
        width: 180
      }, {
        title: '数量',
        key: 'couponNum',
        width: 90
      },
      {
        title: '已发放',
        key: 'sendNum',
        width: 90
      },
      {
        title: '已使用',
        key: 'useNum',
        width: 90
      },
      {
        title: '使用期限',
        key: 'useTime',
        width: 165
      },
      {
        title: '优惠券说明',
        key: 'remark',
        align:'center',
        width: 150
      }, {
        title: '状态',
        align: 'center',
        key: 'status'
      }, {
        title: '操作',
        align: 'center',
        width: 200,
        render: (h, {row}) => {
          return (
            <div>
              <i-button type="success" size="small" onClick={() => this.onEditCoupon(row, true, true)}>查看详情</i-button>
              {(row.status === '未生效' || row.status === '生效中') ?
                (<i-button type="primary" size="small" onClick={() => this.onEditCoupon(row)}>修改</i-button>) :
                void 0}

              <i-button type="warning" size="small" onClick={() => this.onToRecord(row)}>发放记录</i-button>
            {(row.status === '未生效' || row.status === '生效中') ?
              (<i-button type="success" size="small" onClick={() => this.onSendCoupon(row)}>发券</i-button>) : void 0}
            </div>
          );
        }
      }]
    };
  },
  created() {
    this.$nextTick(() => {
      const {page, id, name, status, startTime, endTime} = qs.parse(location.search ? location.search.slice(1) : '');

      this.filter.id = id || this.filter.id;
      this.filter.name = name ? decodeURIComponent(name) : this.filter.name;
      this.filter.status = status ? parseInt(status) : this.filter.status;
      this.filter.time = (startTime && endTime) ? [dayjs(startTime), dayjs(endTime)] : this.filter.time;
      this.page = page ? parseInt(page) : 1;

      this.fetchData(this.filter, this.page);
    });
  },
  methods: {
    onToRecord({id}) {
      location.href = `send-record.html?${qs.stringify({
        id,
        param: {
          id: this.filter.id || void 0,
          name: this.filter.name || void 0,
          status: this.filter.status || void 0,
          startTime: this.filter.time[0] || void 0,
          endTime: this.filter.time[1] || void 0,
          page: this.page || void 0
        }
      })}`;
    },
    onSendCoupon({id, token}) {
      if (id && token) {
        location.href= `send-coupon.html?${qs.stringify({
          id,
          token
        })}`;
      }
    },
    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(row, readonly, allreadonly) {
      let id = row.id;
      if (row.sendNum > 0) {
        readonly = true;
      }
      this.$refs.modalCreateCoupon.show(id, readonly, allreadonly);
    },
    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.page = page;
      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;
      let curTime = dayjs().unix()

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

<style>
  button {
    margin: 5px;
  }

  .ivu-form-item-label {
    width: 90px !important;
  }
</style>