<template>
  <div>
    <el-dialog title="账单还款记录" v-model="dialogVisible" width="70%" @close="reset">
      <div class="search">
        <el-form :model="query" inline label-position="left">
          <el-form-item>
            <el-input v-model="query.paymentMethod" placeholder="支付方式" style="" />
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="getTableData">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="head-container">
        <el-table v-loading="tableData.loading" :data="tableData.data">
          <el-table-column label="支付方式" prpo="paymentMethod">
            <template v-slot="scope">
              <div>{{ scope.row.paymentMethod ? scope.row.paymentMethod : "-" }}</div>
            </template>
          </el-table-column>
          <el-table-column label="支付金额" prpo="repaymentAmount">
            <template v-slot="scope">
              <div>{{ scope.row.repaymentAmount ? scope.row.repaymentAmount : "-" }}</div>
            </template>
          </el-table-column>
          <el-table-column label="备注" prpo="remark">
            <template v-slot="scope">
              <div>{{ scope.row.remark ? scope.row.remark : "-" }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作时间" prop="createTime" />
        </el-table>
      </div>
      <div class="head-container">
        <el-pagination
          :total="tableData.total"
          :current-page="query.page"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="paginationChange"
          @size-change="sizeChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import creditPayApi from "@/api/order/credit-pay-recoders";

export default {
  data() {
    return {
      dialogVisible: false,
      query: {
        creditBuyerId: "",
        paymentMethod: "",
        orderId: "",
        page: 1,
        size: 10,
      },
      resetQuery: null,
      tableData: {
        data: [],
        loading: false,
        total: 0,
      },
    };
  },
  mounted() {
    this.resetQuery = { ...this.query };
  },
  methods: {
    /**
     * 查询
     */
    async getTableData() {
      // eslint-disable-next-line no-unused-vars, prefer-const
      let params = {
        creditBuyerId: this.query.creditBuyerId,
        value: this.query.value,
        page: this.query.page,
        size: this.query.size,
        paymentMethod: this.query.paymentMethod,
      };
      if (this.query.orderId) {
        params.orderId = this.query.orderId;
      }
      // eslint-disable-next-line prefer-const
      let res = await creditPayApi.page(params);
      this.tableData.loading = false;
      this.tableData.data = res.records;
      this.tableData.total = res.totalRow * 1;
    },

    /**
     * 打开
     * @param row
     */
    show(row, orderId) {
      this.query = { ...this.resetQuery };
      this.dialogVisible = true;
      this.query.creditBuyerId = row.id;
      this.query.orderId = orderId;
      this.getTableData();
    },

    /**
     * 分页大小改变
     * @param e
     */
    sizeChange(e) {
      this.query.size = e;
      this.getTableData();
    },

    /**
     * 分页回调
     * @param e
     */
    paginationChange(e) {
      this.query.page = e;
      this.getTableData();
    },

    /**
     * 关闭
     */
    close() {
      this.dialogVisible = false;
    },

    /**
     * 重置
     */
    reset() {
      this.query.paymentMethod = "";
      this.getTableData();
    },
  },
};
</script>

<style scoped lang="scss">
.shop_list {
  display: flex;
  flex-wrap: wrap;

  .item_wrap {
    $size: 80px;

    .item {
      $radius: 4px;
      width: $size;
      height: $size;
      border-radius: $radius;
      overflow: hidden;
      position: relative;
      margin-right: 10px;
      margin-top: 10px;

      &:hover {
        cursor: pointer;
      }

      &::after {
        content: attr(data-index);
        font-size: 12px;
        height: 20px;
        display: flex;
        padding: 0 10px;
        border-radius: 0 0 $radius 0;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
      }

      &::before {
        content: "删除";
        font-size: 12px;
        width: 100%;
        height: 20px;
        display: flex;
        padding: 0 10px;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        transition: all 0.1s ease-in-out;
      }
    }

    .name {
      width: $size;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
