<template>
  <LayoutContent :breads="[{title: '退款登记'}]">
    <div class="header-container">
      <LayoutFilter 
        @on-filter="onFilter" 
        @on-clear="onClear">
        <i-form ref="filterForm" inline :model="filter">
          <i-form-item prop="uid">
            <i-input placeholder="输入UID" v-model="filter.uid"></i-input>
          </i-form-item>
          <i-form-item prop="refundStatus">
            <i-select placeholder="状态" v-model="filter.refundStatus" style="width: 100px;">
              <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="sponsorName">
            <i-input placeholder="退款发起人" v-model="filter.sponsorName"></i-input>
          </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: 280px"></i-date-picker>
          </i-form-item>
        </i-form>
      </LayoutFilter>
      <i-button type="success" icon="md-add" @click="onCreateRefund">新增退款信息</i-button>
    </div>

    <LayoutTools class="export-container">
      <i-button type="primary" icon="ios-cloud-download" @click="onExport">导出</i-button>
    </LayoutTools>

    <LayoutTable
      :page="page"
      :total="total"
      ref="applyRefundList"
      :columns="columns"
      :data="refundList"
      @on-page-change="fetchData"
      :onSelect="onSelect">
      <template slot="footer" class="btns">
        <i-button type="warning" @click="onDelete()">批量删除</i-button>
      </template>
    </LayoutTable>

    <!-- 新增退款信息 -->
    <Modal 
      v-model="addModelShow" 
      @on-cancel="handleReset('addRefundForm')"
      :footer-hide='true'>
      <Form 
        ref="addRefundForm" 
        :model="addRefundFormItem" 
        label-position="left"
        :rules="ruleValidate"
        label-width="100">
        <FormItem label="日期" prop="createDate">
          {{addRefundFormItem.createDate}}
        </FormItem>
        <FormItem label="订单编号" prop="orderCode">
          <Row>
            <Col span="10">
              <Input v-model="addRefundFormItem.orderCode" @on-blur="onOrderCodeBlur"/>
            </Col>
            <Col offset="1" span="13">
              <div>当前订单已有<span :style="{color: 'red'}">{{refundNumber}}</span>条退款记录</div>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="UID" prop="uid">
          <Row>
            <Col span="10"><Input v-model="addRefundFormItem.uid"/></Col>
          </Row>
        </FormItem>
        <FormItem label="退款说明" prop="refundDesc">
          <Input v-model="addRefundFormItem.refundDesc" />
        </FormItem>
        <FormItem label="退款类型" prop="refundType">
          <Row>
            <Col span="10">
              <Select v-model="addRefundFormItem.refundType" placeholder="退款类型">
                <Option value="0">无</Option>
                <Option value="1">补偿类</Option>
                <Option value="2">吃货类</Option>
                <Option value="3">打款类</Option>
              </Select>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="退款金额" prop="refundAmount">
          <Row>
            <Col span="10"><Input v-model="addRefundFormItem.refundAmount"/></Col>
          </Row>
        </FormItem>
        <FormItem label="退款渠道" prop="refundChannel">
          <Row>
            <Col span="10">
              <Select v-model="addRefundFormItem.refundChannel" placeholder="退款渠道">
                <Option value="1">支付宝</Option>
                <Option value="2">银行卡</Option>
              </Select>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="收款人姓名" prop="payeeName">
          <Row>
            <Col span="10"><Input v-model="addRefundFormItem.payeeName" /></Col>
          </Row>
        </FormItem>
        <FormItem label="收款人账号" prop="payeeAccount">
          <Input v-model="addRefundFormItem.payeeAccount" />
        </FormItem>
        <FormItem label="退回地址" prop="refundAddress">
          <Row>
            <Col span="10"><Input v-model="addRefundFormItem.refundAddress" /></Col>
          </Row>
        </FormItem>
        <FormItem label="处理人" v-if="operatorName">
          {{addRefundFormItem.operatorName}}
        </FormItem>
        <FormItem label="打款状态">
          {{addRefundFormItem.refundStatusName}}
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('addRefundForm')">确认</Button>
          <Button type="error" @click="handleReset('addRefundForm')" style="margin-left: 8px">取消</Button>
        </FormItem>
      </Form>
    </Modal>

  </LayoutContent>
</template>

<script>
import qs from 'qs';
import dayjs from "dayjs";
import Api from 'api/api';
const api = new Api();
import { Button } from 'iview';
import BlobUtil from 'libs/blob';

export default {
  name: 'ApplyRefund',
  data() {
    return {
      filter: {
        uid: '',
        sponsorName: '',
        refundStatus: '', 
        time: []
      },
      page: 1,
      total: 0,
      // 新增退款信息
      addModelShow: false,
      addRefundFormItem: {
        createDate: dayjs().format('YYYY/MM/DD'),
        orderCode: '',
        uid: '',
        refundDesc: '',
        refundType: '',
        refundAmount: '',
        refundChannel: '',
        payeeName: '',
        payeeAccount: '',
        refundAddress: '',
        operatorName: '',
        refundStatusName: '待退款'
      },
      // 退款次数
      refundNumber: 0,
      isEdit: false,
      selectedIds: [],
      ruleValidate: {
        uid: [{required: true, message: '请输入uid', trigger: 'blur'}],
        orderCode: [{required: true, message: '请输入订单编号', trigger: 'blur'}],
        refundDesc: [{required: true, message: '请输入退款说明', trigger: 'blur'}],
        refundType: [{required: true, message: '请选择退款类型', trigger: 'blur'}],
        refundAmount: [{required: true, message: '请输入退款金额', trigger: 'blur'}],
        refundChannel: [{required: true, message: '请选择退款渠道', trigger: 'blur'}],
        payeeName: [{required: true, message: '请输入收款人姓名', trigger: 'blur'}],
        payeeAccount: [{required: true, message: '请输入收款人账号', trigger: 'blur'}]
      },
      refundList: [],
      columns: [{
        type: 'selection',
        width: 60,
        align: 'center'
      },{
        title: '日期',
        key: 'createDate',
        width: 120,
        align: 'center'
      }, {
        title: '退款发起人',
        key: 'sponsorName',
        width: 120,
        align: 'center'
      },{
        title: '订单号',
        key: 'orderCode',
        width: 160,
        align: 'center'
      },{
        title: 'UID',
        key: 'uid',
        width: 120,
        align: 'center'
      }, {
        title: '说明',
        key: 'refundDesc',
        width: 150,
      },
      {
        title: '退款类型',
        key: 'refundTypeName',
        width: 100,
        align: 'center'
      },
      {
        title: '金额',
        key: 'refundAmount',
        width: 90,
      },
      {
        title: '退款渠道',
        key: 'refundChannelName',
        width: 100
      },{
        title: '收款人姓名',
        key: 'payeeName',
        align:'center',
        width: 90
      }, {
        title: '收款账号',
        align: 'center',
        key: 'payeeAccount',
        width: 150
      },{
        title: '商品名称',
        align: 'center',
        key: 'goodsName',
        width: 165
      },
      {
        title: '商品尺码',
        key: 'goodsSize',
        align:'center',
        width: 100
      }, {
        title: '退回地址',
        align: 'center',
        key: 'refundAddress',
        width: 150
      },{
        title: '处理人',
        aligin: 'center',
        key: 'operatorName',
        width: 90
      },{
        title: '状态',
        key: 'refundStatusName',
        align:'center',
        width: 100
      },{
        title: '备注',
        align: 'center',
        key: 'remark',
        align: 'center',
        width: 200
      }, {
        title: '操作',
        align: 'center',
        fixed: 'right',
        width: 200,
        render: (h, {row}) => {
          return (
            <div>
              {row.refundStatus == 1 ? <Button type="success" size="small" onClick={() => this.onEdit(row, true, true)}>编辑</Button> : null}
              {row.refundStatus == 1 ? <Button type="error" size="small" style="margin-left: 8px" onClick={() => this.onDelete([row.id])}>删除</Button> : null }
            </div>
          );
        }
      }]
    }
  },
  computed: {
    filterParam(vm) {
      const keys = Object.keys(vm.filter);
      const res  = Object.create(null);
      for(const key of keys) {
        if(key === 'time') {
          const [startTime, endTime] = vm.filter.time;
          if(startTime && endTime) {
            res.startTime = dayjs(startTime).format('YYYY-MM-DD');
            res.endTime = dayjs(endTime).format('YYYY-MM-DD');
          }
          continue
        }
        if(vm.filter[key]) {
          res[key] = vm.filter[key];
        }
      }
      return res;
    }
  },
  mounted(){
    this.fetchData();
  },
  methods: {
    async fetchData(page = 1) {
      this.page = page;
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/refundRecord/list', {page, ...this.filterParam});
      if (result.code === 200) {
        this.total = result.data.total;
        this.refundList = result.data.list.map(item => {
          const {refundStatus} = item;
          return {...item, _disabled: refundStatus !== 1}
        })
        this.$Loading.finish();
      } else {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    onFilter() {
      this.fetchData()
    },
    onOrderCodeBlur() {
      if(this.addRefundFormItem.orderCode) {
        this.fetchRefundCount(this.addRefundFormItem.orderCode);
      }
    },
    onClear() {
      this.$refs.filterForm.resetFields();
      this.fetchData();
    },
    onCreateRefund() {
      this.isEdit = false;
      this.refundNumber = 0;
      this.addModelShow = true;
    },
    fetchRefundCount(orderCode) {
      api._get('/ufoPlatform/refundRecord/getOrderExistedCount', {orderCode}).then(res=> {
        if(res.code === 200) {
          this.refundNumber = res.data || 0;
        }
      })
    },
    onEdit(row) {
      this.isEdit = true;
      const keys = Object.keys(this.addRefundFormItem);
      // 查询订单退款纪录
      const {orderCode} = row;
      this.fetchRefundCount(orderCode);
      for(const key of keys) {
        if(key === 'createDate') continue;
        this.addRefundFormItem[key] = `${row[key] || ''}`
      }
      this.addRefundFormItem.id = row.id;
      this.addModelShow = true;
    },
    onSelect(items) {
      this.selectedIds = items.map(item=> item.id);
    },
    onDelete(ids) {
      this.$Modal.confirm({
        render: h => {
          return h('div', {}, '确定删除?');
        },
        onOk: () => {
          this.onBatchDelete(ids)
        }
      })
    },
    onBatchDelete(ids = []) {
      if(this.selectedIds.length) {
        ids = this.selectedIds;
      }
      if(ids && !ids.length) {
        return
      }
      api._get('/ufoPlatform/refundRecord/delete', {ids:ids.join()}).then(res=> {
        if(res.code === 200) {
          this.$Message.success(res.message);
          this.fetchData();
        }else{
          this.$Message.error(res && res.message || '删除失败');
        }
      })
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid)=> {
        if (valid) {
          const {operatorName, refundStatusName, ...params}  = this.addRefundFormItem
          api._get(`/ufoPlatform/refundRecord/${this.isEdit ? 'update' : 'add'}`, params).then((res = {})=> {
            if(res && res.code === 200) {
              this.isEdit = false;
              this.fetchData(this.page);
              this.$refs[name].resetFields();
              this.addModelShow = false;
              this.$Message.success(res.message);
            }else{
              this.$Message.error(res.message);
            }
          });
        } else {
          this.$Message.error('请完善信息!');
        }
      });
    },
    handleReset(name) {
      this.addModelShow = false;
      this.isEdit = false;
      this.$refs[name].resetFields();
    },
    onExport() {
      this.$Loading.start();
      api._get('/ufoPlatform/refundRecord/export', {
        param: api._2params(this.filterParam)
      }, {
          responseType: 'blob'
      }).then(result => {
        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();
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
}
.export-container {
  display: flex;
  justify-content: flex-end;
}
</style>