<!--  -->
<template>
    <div class="pdl">
      <!-- 搜索 -->
      <div class="formSearch">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="商家ID">
            <el-input v-model="formInline.shopId" maxlength="20" placeholder="请输入商家Id" />
          </el-form-item>
          <el-form-item label="通联流水号">
            <el-input v-model="formInline.transactionId" maxlength="20" placeholder="请输入通联流水号" />
          </el-form-item>
          <el-form-item label="支付状态">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="支付" value="支付" />
              <el-option label="退款" value="退款" />
              <el-option label="提现" value="提现" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="search">查询</el-button>
            <el-button type="success" plain @click="clear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table ref="multipleTable" :data="tableData" border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
          <el-table-column label="商家id" width="220">
            <template slot-scope="scope">{{ scope.row.shopId }}</template>
          </el-table-column>
          <el-table-column label="用户id" width="220">
            <template slot-scope="scope">{{ scope.row.userId }}</template>
          </el-table-column>
          <el-table-column label="支付流水号" width="220">
            <template slot-scope="scope">{{ scope.row.transactionId }}</template>
          </el-table-column>
          <el-table-column label="订单总金额" width="220">
            <template slot-scope="scope">{{ scope.row.totalFee }}</template>
          </el-table-column>
          <el-table-column label="退款总金额" width="220">
            <template slot-scope="scope">{{ scope.row.refundFee }}</template>
          </el-table-column>
          <el-table-column label="支付状态" width="220">
            <template slot-scope="scope">{{ scope.row.state }}</template>
          </el-table-column>
          <el-table-column label="支付方式">
            <template slot-scope="scope">
							<span v-if="scope.row.paymentMode === 1">微信</span>
							<span v-else-if="scope.row.paymentMode === 2">支付宝</span>
							<span v-else-if="scope.row.paymentMode === 3">花呗分期</span>
							<span v-else-if="scope.row.paymentMode === 4">通联支付</span>
							<span v-else-if="scope.row.paymentMode === 5">平台余额支付</span>
							<span v-else-if="scope.row.paymentMode === 6">商家余额支付</span>
							<span v-else-if="scope.row.paymentMode === 7">佣金支付</span>
							<span v-else-if="scope.row.paymentMode === 8">消费金支付</span>
							<span v-else-if="scope.row.paymentMode === 9">惠市宝支付</span>
							<span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" width="180">
            <template slot-scope="scope">{{ scope.row.orderFormid }}</template>
          </el-table-column>
          <el-table-column label="创建时间" width="220">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <!-- <el-table-column prop="shopCode" label="店铺编码" />
          <el-table-column prop="withdrawalMoney" label="提现金额" />
          <el-table-column prop="state" label="处理状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">已处理</span>
              <span v-if="scope.row.state == 0">未处理</span>
            </template>
          </el-table-column> -->
        </el-table>
        <div class="fenye">
          <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
      <!-- *************对话框开始************* -->
      <!-- 提现申请查询 -->
    </div>
  </template>
  
  <script>
  // 这里可以导
  // 入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  // 例如：import 《组件名称》 from '《组件路径》';
  import { getPaymentNumber } from '@/api/withdrawal'
  import { hidden } from '@/utils/index'
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      // 这里存放数据
      return {
        formInline: {
          shopId: '', // 商家Id
          transactionId: '', // 通联流水号
          state: '', // 处理状态 1-已处理 0-未处理
          page: 1,
          pageSize: 10
        },
        total: 1,
        tableData: [],
        currentPage: 1,
      }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() { },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getAll(this.formInline)
    },
    // 方法集合
    methods: {
      handleSizeChange(val) {
        this.formInline.pageSize = val
        this.getAll()
      },
      handleCurrentChange(val) {
        this.formInline.page = val
        this.getAll()
      },
      // 查询
      search() {
        this.total = 1
        this.formInline.page = 1
        this.getAll()
      },
      // 清除
      clear() {
        this.formInline = {
          shopId: '', // 商家Id
          transactionId: '', // 通联流水号
          state: '', // 处理状态 1-已处理 0-未处理
          page: 1,
          pageSize: 10
        }
        this.getAll()
      },
      // 初始化查询所有数据
      async getAll() {
        const res = await getPaymentNumber(this.formInline)
        this.tableData = res.data.list
        this.total = res.data.total
      },
      // 弹窗关闭时间
      closeDialog() {
        this.refuse = 0
        this.handle = 0
        this.cause = ""
      }
    }
  }
  </script>
  
  <style lang='scss' scoped>
  //@import url(); 引入公共css类
  @import url("../../../styles/elDialog.scss");
  
  .pdl {
    padding: 20px;
  }
  
  .seeModel {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-size: 16px;
  
    .leftBox {
      padding: 20px;
    }
  
    .rightBox {
      padding: 20px;
    }
  
    .line {
      padding: 10px;
    }
  }
  
  .titleLIne {
    color: red;
    font-size: 16px;
    text-align: center;
  }
  
  .radio-list {
    margin-top: 30px;
  }
  
  .el-descriptions {
    width: 100%;
  }
  </style>
  