<template>
  <div class="mall-section-container">
    <div class="mall-content-section">
      <div class="mall-content-title" style="border:none">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>积分商城</el-breadcrumb-item>
          <el-breadcrumb-item>订单</el-breadcrumb-item>
          <el-breadcrumb-item>退款列表</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>
          <span>退款列表</span>
        </h3>
      </div>
      <el-tabs v-model="activeName" class="bread-content">
        <div style="height:24px;background:#f0f2f5;"></div>
        <div>
          <div class="operate-top">
            <div class="fl">
              <div class="search-item">
                <el-date-picker class="date-picker" v-model="dateValue" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </div>
              <div class="search-item">
                <el-select v-model="refundType" placeholder="退款方式" clearable class="w-140" @change="getList">
                  <el-option label="仅退款" :value="2"></el-option>
                  <el-option label="退货退款" :value="3"></el-option>
                </el-select>
              </div>
              <div class="search-item">
                <el-input class="w-340" v-model="searchValue" placeholder="请输入商品/会员/订单/退款编号进行搜索" prefix-icon="el-icon-search" clearable @keyup.enter.native="handleInputSearch(searchValue)" @clear="handleInputSearch(searchValue)"> </el-input>
              </div>
            </div>
          </div>
        </div>
        <el-tab-pane label="全部" name="first" class="goods-table-content"> </el-tab-pane>
        <el-tab-pane label="待退款" name="second" class="goods-table-content"> </el-tab-pane>
        <el-tab-pane label="'退款成功" name="third" class="goods-table-content"> </el-tab-pane>
        <el-tab-pane label="退款关闭" name="fouth" class="goods-table-content"> </el-tab-pane>
        <div class="goods-list-content">
          <el-table :data="tableData" ref="multipleTable" style="width: 100%" @sort-change="sortChange" v-loading="loading">
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column label="礼品信息" min-width="220px">
              <template slot-scope="scope">
                <div class="gift-info">
                  <img :src="scope.row.giftMainPic" />
                  <div class="info-name">
                    <p class="pro-ellipsis">{{ scope.row.giftName }}</p>
                    <p class="category-ellipsis">
                      <span v-for="(i, v) in scope.row.giftProSkuAttr" :key="v">{{ i.propName }}:{{ v.propName }}</span>
                    </p>
                    <p class="category-ellipsis">规格编码:{{ scope.row.mallProSkuCode }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="申请时间" sortable="custom" min-width="120px">
              <template slot-scope="scope">
                <p style="line-height:18px">{{ getTime(scope.row.createTime) }}</p>
                <p style="line-height:18px" class="gray-color">{{ getSeconds(scope.row.createTime) }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="orderRefundNumber" label="退款编号" min-width="120px">
              <template slot-scope="scope">
                <p>{{ scope.row.orderRefundNumber }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="definedCode" label="退款方式">
              <template slot-scope="scope">
                <p v-if="scope.row.refundType === 1">仅退款</p>
                <p v-if="scope.row.refundType === 2">退货退款</p>
              </template>
            </el-table-column>
            <el-table-column prop="definedCode" label="申请金额">
              <template slot-scope="scope">
                <p style="line-height:18px">积分：{{ scope.row.applyIntergral }}</p>
                <p style="line-height:18px">现金：￥{{ scope.row.applyPrice.toFixed(2) }}</p>
              </template>
            </el-table-column>
            <el-table-column label="会员" min-width="120px">
              <template slot-scope="scope">
                <p>{{ scope.row.memberName }}</p>
                <p>
                  <a :href="windowUrl + '/member/#/wechatmemberDetail?memberId=' + scope.row.memberId" target="_blank">{{ scope.row.cardNum }}</a>
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="complete" label="退款状态">
              <template slot-scope="scope">
                <p style="line-height:18px">待退款</p>
                <p style="line-height:18px">
                  <el-button type="text" @click="handleArgeeRefund(scope.row)">同意</el-button>
                  <el-button type="text" v-if="scope.row.refundType === 1">发货</el-button>
                  <el-button type="text" v-if="scope.row.refundType === 2" @click="handleCloseRefund(scope.row)">关闭</el-button>
                </p>
              </template>
            </el-table-column>
            <template slot="empty">
              <div class="no-data-wrap">
                <div class="no-data-icon">
                  <img src="../../../static/img/no-data_icon.png" />
                </div>
                <p>暂无数据</p>
              </div>
            </template>
          </el-table>
        </div>
        <div class="pagination-conteiner" style="background:#fff;margin:-50px 24px 0 24px">
          <div class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="total"> </el-pagination>
          </div>
        </div>
      </el-tabs>
    </div>
    <!-- 关闭退款单 -->
    <closeRefund :refundModal="refundModal" @getList="getList"></closeRefund>
    <!-- 同意退款 -->
    <agreeRefund :agreeRefundModal="agreeRefundModal" @getList="getList" v-if="agreeRefundModal.dialogVisible"></agreeRefund>
  </div>
</template>

<script>
import qs from 'qs';
import request from '../../service/request.js';
import getInputVal from '../../utils/common.js';
import closeRefund from './closeRefund';
import agreeRefund from './agreeRefund';

export default {
  data() {
    return {
      getTime: getInputVal.getTime,
      getSeconds: getInputVal.getSeconds,
      activeName: 'first',
      currentPage: 1,
      pageSizes: [20, 30, 50],
      pageSize: 20,
      total: 0,
      loading: false,
      tableData: [
        {
          integralMallProRefundId: '1561266',
          refundMoney: 10,
          refundPoint: 1,
          giftMainPic: 'https://pic01-10001430.image.myqcloud.com/dc82e122-0c0d-47fe-b32d-8fe18c561a88',
          giftName: '天天',
          refundType: 1,
          giftProSkuAttr: [{ valueId: 'ff8080816686f31b01668b69a0620009', valueName: 'S', propId: 'ff808081651745490165174edef00000', propName: '尺码' }],
          createTime: 1554878133000,
          orderRefundNumber: '0190410781099586',
          applyIntergral: 10,
          applyPrice: 100,
          definedCode: '2019010300000003',
          memberName: 'test',
          cardNum: '00213056921678',
          mallProSkuCode: '454'
        },
        {
          integralMallProRefundId: '1561266',
          refundMoney: 1,
          refundPoint: 10,
          giftMainPic: 'https://pic01-10001430.image.myqcloud.com/29765ae6-110d-4b17-843a-e1a7040abdfd',
          giftName: '天天222',
          refundType: 2,
          giftProSkuAttr: [{ valueId: 'ff8080816686f31b01668b69a0620009', valueName: 'S', propId: 'ff808081651745490165174edef00000', propName: '尺码' }],
          createTime: 15548781330211,
          orderRefundNumber: '0190410781099586',
          applyIntergral: 10,
          applyPrice: 100,
          definedCode: '2019010300000003',
          memberName: 'test',
          cardNum: '00213056921678',
          mallProSkuCode: '45234'
        }
      ],
      searchValue: '', //搜索字段
      refundType: '', //退款方式
      dateValue: [], //时间
      sortColumn: '',
      sortType: '',
      windowUrl: window.location.origin,
      //退款关闭
      refundModal: {
        dialogVisible: false,
        integralMallProRefundId: '' //退款id
      },
      // 同意退款
      agreeRefundModal: {
        dialogVisible: false,
        integralMallProRefundId: '', //退款id
        refundMoney: '',
        refundPoint: ''
      }
    };
  },
  methods: {
    // tab切换
    // handleClick(tab) {},
    // 分页
    handleSizeChange(size) {
      //设置每页条数
      this.pageSize = size;
      this.getList();
    },
    handleCurrentChange(page) {
      //设置跳到第几页
      this.currentPage = page;
      this.getList();
    },
    // 搜索
    handleInputSearch() {
      this.currentPage = 1;
      this.getList();
    },
    // 排序
    sortChange(value) {
      this.sortColumn = value.prop;
      if (value.order == 'ascending') {
        this.sortType = 'asc';
      } else if (value.order == 'descending') {
        this.sortType = 'desc';
      }
      this.getList();
    },
    //获取退款列表
    getList() {
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        beginTime: this.dateValue,
        endTime: this.dateValue,
        refundType: this.refundType,
        searchParams: this.searchValue,
        sortType: this.sortType,
        sortColumn: this.sortColumn
      };
      request.post('/api-integral-mall/page-gift', qs.stringify(params)).then(res => {
        if (res.data.errorCode === 0) {
          if (res.data.result) {
            this.tableDate = res.data.result;
            this.total = res.data.result.total;
          } else {
            this.tableDate = [];
            this.total = 0;
          }
          this.loading = false;
        } else {
          this.$message.error(res.data.message);
          this.loading = false;
        }
      });
    },
    // 关闭退款
    handleCloseRefund(item) {
      this.refundModal.dialogVisible = true;
      this.refundModal.integralMallProRefundId = item.integralMallProRefundId;
    },
    handleArgeeRefund(item) {
      this.agreeRefundModal.refundMoney = item.refundMoney;
      this.agreeRefundModal.refundPoint = item.refundPoint;
      this.agreeRefundModal.dialogVisible = true;
    }
  },
  components: {
    closeRefund,
    agreeRefund
  }
};
</script>
<style scoped>
.section {
  background: #fff;
  margin: 24px;
  padding: 24px;
}

.operate-top {
  background: #fff;
  height: 32px;
  background: #fff;
  margin: 0 25px;
  padding: 25px 25px 0 25px;
}
.goods-list-content {
  margin: 0 25px 25px 25px;
  padding: 22px 24px 24px 24px;
  background: #fff;
}
.gift-info img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-right: 5px;
}
.info-name {
  display: inline-block;
  vertical-align: top;
  width: 65%;
}
.pro-ellipsis {
  color: #303133;
  height: 36px;
  line-height: 18px;
  font-size: 14px;
}
.category-ellipsis {
  color: #909399;
  font-size: 13px;
}
.el-icon-edit {
  margin-left: 5px;
  cursor: pointer;
}
.pagination-conteiner {
  padding: 30px 16px 34px 0;
}
.w-340 {
  width: 340px;
}
.w-140 {
  width: 140px;
}
</style>
