<template>
  <LayoutContent :breads="[{url: parentUrl, title: '优惠券列表'}, {title: '发放记录'}]">
    <LayoutFilter @on-filter="onFilter" @on-clear="onClear">
      <i-form ref="filterForm" inline :model="filter">
        <i-form-item prop="couponCode">
          <i-input placeholder="输入ID" v-model="filter.couponCode"></i-input>
        </i-form-item>
        <i-form-item prop="uid">
          <i-input placeholder="输入uid" v-model="filter.uid"></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-select>
        </i-form-item>
      </i-form>
    </LayoutFilter>
    <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>
    <SendRecordModalCreateCoupon ref="sendRecordModalCreateCoupon"></SendRecordModalCreateCoupon>
  </LayoutContent>
</template>

<script>
import {Button} from 'iview';
import Api from '@/api/api';
import dayjs from 'dayjs';
import BlobUtil from 'libs/blob';
import qs from 'qs';
import SendRecordModalCreateCoupon from '../coupon/components/modal-update-time-coupon';

const api = new Api();

export default {
  name: 'SendRecordPage',
  data() {
    return {
      filter: {
        couponId: 0,
        couponCode: '',
        uid: '',
        status: '',
      },
      parentUrl: '',
      page: 1,
      total: 0,
      data: [],
      columns: [{
        title: '单券号',
        key: 'couponCode'
      }, {
        title: '用户ID',
        key: 'uid'
      }, {
        title: '发放时间',
        render(h, {row}) {
          return (
            <span>{row.createTime}</span>
          );
        }
      }, {
        title: '使用状态',
        key: 'status'
      }, {
        title: '使用时间',
        render(h, {row}) {
          return (
            <span>{row.useTime || '--'}</span>
          );
        }
      },{
        title: '操作',
        align: 'center',
        width: 200,
        render: (h, {row}) => {
          return (
            <div>
            {(row.status === '未使用' || row.statusValue === '0') ?
                (<i-button type="primary" size="small" onClick={() => this.onUpdateTime(row)}>延期</i-button>) :
                void 0}
                {(row.status === '未使用' || row.statusValue === '0') ?
                (<i-button type="error" size="small" onClick={() => this.onUpDateStatus(row)}>作废</i-button>) :
                void 0}
            </div>
          );
        }
      }]
    };
  },
  created() {
    this.$nextTick(() => {
      const queryString = qs.parse(location.search ? location.search.slice(1) : '');

      this.filter.couponId = queryString.id;
      this.filter.couponCode = queryString.couponCode || this.filter.couponCode;
      this.filter.uid = queryString.uid || this.filter.uid;
      this.filter.status = queryString.status ? parseInt(queryString.status) : this.filter.status;
      this.parentUrl = `coupon.html?${qs.stringify(queryString.param)}`;
      this.page = queryString.page ? parseInt(queryString.page) : 1;

      this.fetchData(this.filter, this.page);
    });
  },
  methods: {
    onFilter() {
      this.fetchData(this.filter);
    },
    onClear() {
      this.$refs.filterForm.resetFields();
      this.fetchData(this.filter);
    },
    onPageChange(page) {
      this.fetchData(this.filter, page);
    },
    onUpdateTime(row) {
      console.log('延期==onUpdateTime')
      console.log(row)
      this.$refs.sendRecordModalCreateCoupon.show(row);
    },
    onUpDateStatus(row) {
      console.log('作废==onUpDateStatus')
      console.log(row)
      let params = {
        uid : row.uid,
        couponCode: row.couponCode
      };
      console.log(params)
      this.invalidateUserCoupon(params);
    },
    async fetchData(params, page = 1) {
      this.page = page;
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/coupon/queryUserCoupons', Object.assign({
        page,
      }, this.getParams(params)));

      if (result.code === 200) {
        this.total = result.data.total;
        this.data = result.data.userCoupons;
        this.$Loading.finish();
      } else {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    async invalidateUserCoupon(params) {
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/coupon/invalidateUserCoupon', params);

      if (result.code === 200) {
        // this.total = result.data.total;
        // this.data = result.data.userCoupons;
        this.$Loading.finish();
      } else {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    async onExport() {
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/coupon/export', {
        param: {
          method: 'userCoupon',
          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();
      }
    },
    getParams(params) {
      return {
        couponId: params.couponId,
        couponCode: params.couponCode,
        uid: params.uid,
        status: parseInt(params.status) >= 0 ? params.status : void 0,
      };
    }
  },
  components: {SendRecordModalCreateCoupon}
};
</script>

<style>
button {
    margin: 5px;
  }

</style>