<template>
  <div class="app-container app-container-scheduling">
    <div class="app-container_flex_auto">
      <div class="app-container_form app-container-queryform"  v-show="showSearch">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item v-if="queryShow.refundId" label="退款单号">
            <el-input
              v-model="queryParams.refundId"
              placeholder="请输入退款单号"
              clearable
              style="width: 220px;"
              @keyup.enter.native="handleQuery"
            />
            <span @click="clearQuery('refundId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
          </el-form-item>
          <el-form-item v-if="queryShow.orderId" label="原订单号">
            <el-input
              v-model="queryParams.orderId"
              placeholder="请输入原订单号"
              clearable
              style="width: 220px;"
              @keyup.enter.native="handleQuery"
            />
            <span @click="clearQuery('orderId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
          </el-form-item>
          <el-form-item v-if="queryShow.refundMobile" label="手机号码">
            <el-input
              v-model="queryParams.refundMobile"
              placeholder="请输入手机号码"
              clearable
              style="width: 220px;"
              @keyup.enter.native="handleQuery"
            />
            <span @click="clearQuery('refundMobile')" class="query_clear"><i class="el-icon-circle-close"></i></span>
          </el-form-item>
          <el-form-item v-if="queryShow.transactionId" label="支付单号">
            <el-input
              v-model="queryParams.transactionId"
              placeholder="请输入支付单号"
              clearable
              style="width: 220px;"
              @keyup.enter.native="handleQuery"
            />
            <span @click="clearQuery('transactionId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
          </el-form-item>
          <el-form-item v-if="queryShow.thirdOrderNo" label="OTA订单">
            <el-input
              v-model="queryParams.thirdOrderNo"
              placeholder="请输入OTA订单号"
              clearable
              style="width: 220px;"
              @keyup.enter.native="handleQuery"
            />
            <span @click="clearQuery('thirdOrderNo')" class="query_clear"><i class="el-icon-circle-close"></i></span>
          </el-form-item>
          <el-form-item v-if="queryShow.status" label="退款状态">
            <el-select
              v-model="queryParams.status"
              placeholder="退款状态"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="dict in statusList"
                :key="dict.id"
                :label="dict.name"
                :value="dict.value"
              />
            </el-select>
            <span @click="clearQuery('status')" class="query_clear"><i class="el-icon-circle-close"></i></span>
          </el-form-item>
          <el-form-item>
            <el-dropdown @command="openQuery">
              <el-button size="mini" type="primary" icon="el-icon-plus"></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="refundId">退款单号</el-dropdown-item>
                <el-dropdown-item command="orderId">原订单号</el-dropdown-item>
                <el-dropdown-item command="refundMobile">手机号码</el-dropdown-item>
                <el-dropdown-item command="transactionId">支付单号</el-dropdown-item>
                <el-dropdown-item command="thirdOrderNo">OTA订单号</el-dropdown-item>
                <el-dropdown-item command="status">退款状态</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="app-container_table app-container-main">
        <!-- <el-row :gutter="10" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row> -->
        <div class="app-container_table_main">
          <el-table 
            ref="tables" 
            v-loading="loading" 
            :data="dataList" 
            :summary-method="getSummaries"
            show-summary
            border 
            max-height="520px"
          >
            <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
            <el-table-column label="退款单号" align="center" prop="id" width="170" />
      <!--      <el-table-column label="原订单号" align="center" prop="orderId" />-->
            <el-table-column label="原订单号" align="center" prop="orderId" width="170" sortable="custom" >
              <template slot-scope="scope">
                <el-button type="text" @click="openDetails(scope.row, 'order')">{{ scope.row.orderId }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="手机号码" align="center" prop="refundMobile" width="100" />
            <el-table-column label="票种名称" align="center" prop="goodsName" width="140" />
            <el-table-column label="票档名称" align="center" prop="seatTypeName" width="120" />
            <el-table-column label="支付单号" align="center" prop="transactionId" width="170" />
            <el-table-column label="退款金额" align="center" prop="refundAmount">
              <template slot-scope="scope">
                <span>{{ scope.row.refundAmount === 0 ? ( '￥' + scope.row.refundAmount) : ('￥-' + scope.row.refundAmount) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="申请原因" align="center" prop="refundReason" />
            <el-table-column label="申请时间" align="center" prop="refundTime" width="160" >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.refundTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="申请状态" align="center" width="110">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 0">申请中</el-tag>
                <el-tag v-if="scope.row.status == 1" type="success">退款成功</el-tag>
                <el-tag v-if="scope.row.status == 2" type="warning">退款驳回</el-tag>
                <el-tag v-if="scope.row.status == 3" type="info">退款中</el-tag>
                <el-tag v-if="scope.row.status == 4" type="danger">退款失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="退款时间" align="center" prop="refundSuccessTime" width="160" >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.refundSuccessTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作人" align="center" prop="refundName" />
            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="openDetails(scope.row)"
                  v-hasPermi="['refundMr:refundMr:details']"
                >详情</el-button>
      <!--          <el-button-->
      <!--            size="mini"-->
      <!--            type="text"-->
      <!--            @click="openDetails(scope.row)"-->
      <!--            v-hasPermi="['refundMr:refundMr:edit']"-->
      <!--          >查看</el-button>-->
                
                <span v-hasPermi="['refundMr:refundMr:delete']" style="display: inline-block;">
                  <el-button
                    size="mini"
                    type="text"
                    style="margin-left: 10px;"
                    v-if="scope.row.status == 0 || scope.row.status == 4"
                    @click="openDetails(scope.row, 'refund')"
                  >审核</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="app-container_table_page">
        <pagination
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 详情 -->
    <details-dia ref="detailsDia" @getList="getList"></details-dia>

    <orderDetails ref="orderDetails" @getList="getList"></orderDetails>

  </div>
</template>

<script>

import { pageList } from '@/api/financeMr/refundMr'
import detailsDia from "./dialog/details.vue";
import orderDetails from "./dialog/orderDetails.vue";
export default {
  name: "RefundMr",
  dicts: ['agreement_type'],
  components: { detailsDia, orderDetails },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      dataList: null,
      // 弹出层标题
      title: "",

      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      statusList: [
        {id: 1, name: '申请中', value: 0},
        {id: 2, name: '退款成功', value: 1},
        {id: 3, name: '退款驳回', value: 2},
        {id: 4, name: '退款中', value: 3},
        {id: 5, name: '退款失败', value: 4},
      ],
      visibleStatus: false,
      newObj: {},
      visibleType: '',
      queryShow: {
        refundId: true,
        orderId: true,
        refundMobile: true,
        transactionId: true,
        thirdOrderNo: true,
        status: true
      },
      show1: false
    };
  },
  created() {
    this.getList();
  },
  activated(){
    //this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      if(this.queryParams.refundId && this.queryParams.refundId.length>19) {
        this.$message({
          type: 'error',
          message: '订单号不存在!!!'
        });
        return
      }
      this.loading = true;
      pageList(this.addDateRange(this.queryParams, this.dateRange))
      .then(response => {
          this.dataList = response?.data?.rows || [];
          this.total = response?.data?.total || 0;
          this.loading = false;
        }
      ).catch(()=>{
        this.dataList = [];
        this.total = 0;
        this.loading = false;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value)) && column.property == 'refundAmount') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = Number(sums[index].toFixed(2));
        } else {
          sums[index] = '';
        }
      });
      return sums;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.$set(this.queryParams, 'refundId', '');
      this.$set(this.queryParams, 'orderId', '');
      this.$set(this.queryParams, 'refundMobile', '');
      this.$set(this.queryParams, 'status', '');
      this.$set(this.queryParams, 'transactionId', '');
      this.$set(this.queryParams, 'thirdOrderNo', '');
      this.queryParams.pageNum = 1;
      this.handleQuery();
    },
    /** 详情按钮操作 */
    openDetails(row, type) {
      if(type == 'order') {
        this.$refs["orderDetails"].openDialog("详情", row, type);
      } else {
        this.$refs["detailsDia"].openDialog("详情", row, type);
      }
    },

    clearQuery(key) {
      this.$set(this.queryShow,key,false)
      this.$set(this.queryParams,key,'')
      if(key == 'performDate') {
        this.$set(this.queryParams,'performTimeId','')
      }
    },
    openQuery(key) {
      this.$set(this.queryShow,key,true)
    }
  }
};
</script>
<style scoped lang="scss">
.app-container-scheduling ::v-deep .el-form-item__content .query_clear{
  position: absolute;
  top: -15px;
  right: -10px;
  display: none;
  cursor: pointer;
  z-index: 99;
}
.app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
  display: block;
}
</style>