<template>
  <LayoutContent :breads="[{title: '退款管理'}]">
    <div class="header-container">
      <LayoutFilter @on-filter="fetchData" @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="refundType">
            <i-select placeholder="退款类型" v-model="filter.refundType" style="width: 100px;">
              <i-option :value="' '"></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="refundStatus">
            <i-select placeholder="状态" v-model="filter.refundStatus" style="width: 100px;">
                <i-option :value="' '"></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" 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"
      :columns="columns"
      :data="refundList"
      :onSelect="selectRow"
      @on-page-change="fetchData">
      <template slot="footer" class="btns">
<!--        <i-button type="primary" @click="onBatchReject">批量驳回</i-button>-->
        <i-button type="primary" @click="onBatchRefund">批量退款</i-button>
      </template>
    </LayoutTable>
      <Modal
              v-model="refoundShow"
              title="退款"
              width="360"
              @on-ok="refoundOk"
              @on-cancel="refoundCancel">
          <p>是否确认退款</p>
      </Modal>
      <Modal
              v-model="backShow"
              title="驳回退款"
              width="360"
              @on-ok="backOk"
              @on-cancel="backCancel">
          <div><span>备注：</span><Input v-model="remark" maxlength="100" show-word-limit type="textarea" placeholder="" style="width: 200px" /></div>
      </Modal>
      <Modal
              v-model="addShow"
              title="新增退款信息"
              :footer-hide='true'
              width="500"
              >
          <Form :model="addParam" ref="addParam" :rules="ruleValidate" label-position="left" :label-width="100">
              <FormItem label="日期">
                  {{nowDate}}
              </FormItem>
              <FormItem label="订单编号" prop="orderCode">
                  <Input v-model="addParam.orderCode"></Input>
              </FormItem>
              <FormItem label="UID"  prop="uid">
                  <Input v-model="addParam.uid"></Input>
              </FormItem>
              <FormItem label="退款说明"  prop="refundDesc">
                  <Input v-model="addParam.refundDesc"></Input>
              </FormItem>
              <FormItem label="退款类型" prop="refundType">
                  <Select v-model="addParam.refundType">
                      <Option value="1">补偿类</Option>
                      <Option value="2">吃货类</Option>
                      <Option value="3">打款类</Option>
                  </Select>
              </FormItem>
              <FormItem label="退款金额" prop="refundAmount">
                  <Input v-model="addParam.refundAmount" type="number"></Input>
              </FormItem>
              <FormItem label="退款渠道"  prop="refundChannel">
                  <Select v-model="addParam.refundChannel">
                      <Option value="1">支付宝</Option>
                      <Option value="2">银行卡</Option>
                  </Select>
              </FormItem>
              <FormItem label="收款人姓名" prop="payeeName">
                  <Input v-model="addParam.payeeName"></Input>
              </FormItem>
              <FormItem label="收款账号" prop="payeeAccount">
                  <Input v-model="addParam.payeeAccount"></Input>
              </FormItem>
              <FormItem label="回退地址" >
                  <Input v-model="addParam.refundAddress"></Input>
              </FormItem>
              <FormItem label="打款状态">
                  待打款
              </FormItem>
              <FormItem>
                  <Button type="primary" @click="addOk()">确认</Button>
                  <Button type="error" @click="addCancel()" style="margin-left: 8px">取消</Button>
              </FormItem>
          </Form>
      </Modal>
  </LayoutContent>
</template>

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

export default {
  data() {
    return {
      filter: {
        uid: '',
        refundType: '',
        refundStatus: '',
        time: []
      },
        nowDate:'',
      refoundShow:false,
        id:0,
        ids:[],
        backShow:false,
        remark:'',
        addShow:false,
        addParam:{},
      page: 1,
      total: 0,
      refundList: [],
        ruleValidate: {
            orderCode: [
                { required: true, message: '请填写订单编号', trigger: 'blur' }
            ],
            uid: [
                { required: true, message: '请填写uid', trigger: 'blur' }
            ],
            refundDesc: [
                { required: true, message: '请填写订退款说明', trigger: 'blur' }
            ],
            refundType: [
                { required: true, message: '请选择退款类型', trigger: 'change' }
            ],
            refundAmount: [
                { required: true, message: '请填写退款金额', trigger: 'blur' },
            ],
            refundChannel: [
                { required: true, message: '请选择退款渠道', trigger: 'change' }
            ],
            payeeName: [
                { required: true, message: '请填写收款人姓名', trigger: 'blur' }
            ],
            payeeAccount: [
                { required: true, message: '请填写收款人账号', trigger: 'blur' },
            ]
        },
      columns: [{
        type: 'selection',
        width: 60,
        align: 'center',
      }, {
        title: '日期',
        key: 'createDate',
        width: 140
      }, {
        title: '订单号',
        key: 'orderCode',
        width: 160
      },
      {
        title: 'UID',
        key: 'uid',
        width: 160
      }, {
        title: '说明',
        key: 'refundDesc',
        width: 140
      },
      {
        title: '退款类型',
        key: 'refundTypeName',
        width: 120
      },
      {
        title: '金额',
        key: 'refundAmount',
        width: 120
      },
      {
        title: '退款渠道',
        key: 'refundChannelName',
        width: 120
      },{
        title: '收款人姓名',
        key: 'payeeName',
        align:'center',
        width: 120
      }, {
        title: '收款账号',
        align: 'center',
        key: 'payeeAccount',
        width: 180
      },{
        title: '商品名称',
        align: 'center',
        key: 'goodsName',
        width: 165
      },
      {
        title: '商品尺码',
        key: 'goodsSize',
        align:'center',
        width: 80
      }, {
        title: '退回地址',
        align: 'center',
        key: 'refundAddress',
        width: 165
      },{
        title: '处理人',
        key: 'operatorName',
        width: 90
      },{
        title: '状态',
        key: 'refundStatusName',
        align:'center',
        width: 100
      }, {
        title: '备注',
        align: 'center',
        key: 'note',
        width: 120
      }, {
        title: '操作',
        align: 'center',
        width: 200,
        fixed: 'right',
        render: (h, {row}) => {
            let name = ''
          switch (row.refundStatus) {
              case 1:
                  name = '退款'
                  break
              case 2:
                  name = '已退款'
                  break
              case 3:
                  name = '已驳回'
                  break
              default:
                  name = ''
                  break
          }

          return (
            <div class='header-container'>
              <i-button type="success" size="small" disabled={row.refundStatus !== 1}  onClick={()=>this.goRefund(row.id)}>{name}</i-button>
            <i-button type="error" size="small" v-show={row.refundStatus === 1} onClick={()=>this.nonsuit(row.id)}>驳回</i-button>
            </div>
          );
        }
      }]
    }
  },
  computed: {
    fitlerTime(vm) {
      const [startTime, endTime] = vm.filter.time;
    }
  },
    mounted:function(){
        this.fetchData();
    },
  methods: {
    onFilter() {

    },
    onClear() {
      this.$refs.filterForm.resetFields();
    },
    onCreateRefund() {
        let data = new Date();
        this.nowDate = data.getFullYear() +'/'+ (data.getMonth()+1) +'/'+ data.getDate()
        this.addShow = true;
    },
      selectRow(param){
          let arr = [];
          if(param.length)
              for (let item of param){
                arr.push(item.id);
              }
          this.ids = arr;
      },
      goRefund(id){
        this.id = id;
        this.refoundShow = true;
      },
      async refoundOk(){
          if(this.id){
              await api._get('/ufoPlatform/refundRecord/makePaid', {ids:this.id.toString()});
              this.fetchData();
          }
          this.refoundCancel();
      },
      refoundCancel(){
          this.refoundShow = false;
          this.id = 0;
      },
      nonsuit(id){
          this.id = id;
          this.backShow = true;
      },
      async backOk(){
          await api._get('/ufoPlatform/refundRecord/reject', {ids:this.id.toString(), remark:this.remark});
          this.fetchData();
          this.backCancel();
      },
      backCancel(){
          this.remark = '';
          this.backShow = false;
          this.id = 0;
      },
       addOk(){
          this.$refs.addParam.validate(async(valid) => {
              if (valid) {
                  this.addParam.createDate = this.nowDate;
                  await api._get('/ufoPlatform/refundRecord/add', this.addParam);
                  this.fetchData();
                  this.addCancel();
                  this.$Message.success('添加成功!');
              } else {
                  this.$Message.error('有未填写的信息!');
              }
          });

      },
      addCancel(){
          this.addParam = {};
          this.$refs.addParam.resetFields();
        this.addShow = false;
      },
    async onBatchDelete() {
        if(!this.ids.length)
            this.$Message.warning('请勾选删除条目');
        await api._get('/ufoPlatform/refundRecord/delete', {ids:this.ids.toString()});
        this.fetchData();
        this.ids = [];
    },
    async onBatchReject() {
      if(!this.ids.length)
        this.$Message.warning('请勾选驳回条目');
      await api._get('/ufoPlatform/refundRecord/reject', {ids:this.ids.toString()});
      this.fetchData();
      this.ids = [];
    },
    async onBatchRefund() {
      if(!this.ids.length)
        this.$Message.warning('请勾选退款条目');
      await api._get('/ufoPlatform/refundRecord/makePaid', {ids:this.ids.toString()});
      this.fetchData();
      this.ids = [];
    },
      async onExport() {
          this.$Loading.start();
          let param = {...this.filter};
          if(param.time.length){
              param.startTime = param.time[0] && param.time[0].getFullYear() +'-'+ (param.time[0].getMonth()+1) +'-'+ param.time[0].getDate()
              param.endTime = param.time[1] && param.time[1].getFullYear() +'-'+ (param.time[1].getMonth()+1) +'-'+ param.time[1].getDate()
              delete param.time;
          }
          for (let i in param){
              if(!param[i])
                  delete param[i];
          }
          const result = await api._get('/ufoPlatform/refundRecord/export', {
              param: api._2params(param)
          }, {
              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(page = 1) {
          this.page = page;
          let param = {...this.filter};
          if(param.time.length){
              param.startTime = param.time[0] && param.time[0].getFullYear() +'-'+ (param.time[0].getMonth()+1) +'-'+ param.time[0].getDate()
              param.endTime = param.time[1] && param.time[1].getFullYear() +'-'+ (param.time[1].getMonth()+1) +'-'+ param.time[1].getDate()
              delete param.time
          }
          for (let i in param){
              if(!param[i])
                  delete param[i]
          }
          this.$Loading.start();
          const result = await api._get('/ufoPlatform/refundRecord/list', Object.assign({page},param));
          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();
          }
      },
  },
  watch: {
    'filter.time': function(newVal) {
      console.log('-------filter.time-------',newVal);
    }
  }
}
</script>

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