<template>
  <div class="recharge-record card">
    <div class="search">
      <el-form :model="searchForm" size="small" :inline="true">
        <el-form-item label="客户">
          <el-input
            v-model="searchForm.namespace"
            placeholder="请输入客户"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="套餐版本">
          <el-select
            v-model="searchForm.subject"
            placeholder="请选择套餐版本"
            clearable>
            <el-option
              v-for="(item, index) in subjectList"
              :key="index"
              :label="item.value"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select
            v-model="searchForm.payStatus"
            placeholder="请选择支付状态"
            clearable>
            <el-option label="已支付" value="已支付"></el-option>
            <el-option label="待支付" value="待支付"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易号">
          <el-input
            v-model="searchForm.tradeNo"
            placeholder="请输入交易号"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.outTradeNo"
            placeholder="请输入订单号"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="业务类型">
          <el-input
            v-model="searchForm.businessType"
            placeholder="请输入业务类型"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="付款时间">
          <el-date-picker
            :default-time="['00:00:00', '23:59:59']"
            v-model="searchForm.daterange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            :confirm="false"
            start-placeholder="初始创建时间"
            end-placeholder="结束创建时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="search">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrap" v-loading="loading">
      <el-table
        ref="table"
        :data="rechargeRecordList"
        border
        width="100%"
        height="100%"
        :highlight-current-row="true"
        @sort-change="sortChange"
        header-row-class-name="header-row-class-name">
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
          fixed="left"
          header-align="center"></el-table-column>
        <el-table-column
          label="客户"
          prop="namespace"
          header-align="center"
          align="center"
          width="80"
          fixed="left"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="套餐版本"
          prop="subject"
          header-align="center"
          align="center"
          width="100"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="交易号"
          prop="tradeNo"
          header-align="center"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="购买数量"
          prop="month"
          header-align="center"
          align="center"
          width="100"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="交易金额"
          prop="totalAmount"
          header-align="center"
          align="center"
          width="100"
          :show-overflow-tooltip="true"></el-table-column>

        <el-table-column
          label="支付方式"
          prop="payType"
          header-align="center"
          align="center"
          width="100"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="支付状态"
          prop="payStatus"
          header-align="center"
          align="center"
          width="100"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="业务类型"
          prop="businessType"
          header-align="center"
          align="left"
          min-width="120"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="订单号"
          prop="outTradeNo"
          min-width="180"
          :show-overflow-tooltip="true"
          align="center"
          header-align="center"></el-table-column>

        <el-table-column
          label="商户原始订单号"
          prop="merchantOrderNo"
          header-align="center"
          align="center"
          width="130"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="订单标题"
          prop="subject"
          header-align="center"
          align="center"
          width="100"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="订单附加信息"
          prop="body"
          header-align="center"
          align="center"
          min-width="130"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="产品码"
          prop="productCode"
          header-align="center"
          align="center"
          min-width="220"
          :show-overflow-tooltip="true"></el-table-column>

        <el-table-column
          label="付款时间"
          sortable="custom"
          prop="clientTime"
          header-align="center"
          align="center"
          width="160"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="下单时间"
          prop="createTime"
          header-align="center"
          align="center"
          width="160"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          label="订单过期时间"
          prop="expirationTime"
          header-align="center"
          align="center"
          width="160"
          :show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        layout="sizes, total, prev, pager, next, jumper"
        background
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="sizeChange"
        @current-change="onCurrentChange"></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getUserRechargeRecordListApi,
  getSubjectListApi
} from '@/common/api/user/user'

export default {
  name: 'rechargeRecord',
  data() {
    return {
      period: [],
      subjectList: [],
      sortParmas: {},
      searchForm: {},
      total: 0,
      pageSize: 50,
      currentPage: 1,
      loading: false,
      rechargeRecordList: []
    }
  },
  async created() {
    this.loadData()
    this.getSubjectList()
  },
  methods: {
    async loadData(obj) {
      let data = {
        ...this.searchForm,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      if (this.searchForm.daterange?.length) {
        data.minTime = this.searchForm.daterange[0]
        data.maxTime = this.searchForm.daterange[1]
      }
      if (obj) {
        data = { ...data, ...obj }
      }
      this.loading = true
      try {
        const res = await getUserRechargeRecordListApi(data)
        if (res.code !== 200) return
        this.rechargeRecordList = res.data.records
        this.total = res.data.total
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    search() {
      this.currentPage = 1
      this.loadData(this.sortParmas)
    },
    onCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.loadData(this.sortParmas)
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.loadData(this.sortParmas)
    },
    sortChange({ column, prop, order }) {
      this.sortParmas = {
        field: prop,
        asc: order === 'ascending'
      }
      this.loadData(this.sortParmas)
    },
    async getSubjectList() {
      try {
        const { data } = await getSubjectListApi()
        this.subjectList = data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.recharge-record {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &::v-deep {
    .el-table .el-table__cell {
      padding: 6px 0;
    }

    .el-input__inner {
      padding: 0 4px;
    }

    .el-input--small .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    .el-icon-time:before {
      content: '';
    }

    .el-dialog__footer {
      text-align: center;

      .el-button--small {
        padding: 9px 50px;
      }
    }

    .el-dialog__body {
      padding: 10px 20px;
    }

    .el-icon-edit:before {
      color: #ff9800;
      font-weight: bold;
    }

    .el-range-editor--small .el-range-separator {
      line-height: 31px;
    }

    .header-row-class-name th {
      background-color: #f8f8f9;
    }

    .el-input-group__append {
      padding-left: 0;
    }
  }
}

.search {
  background: #fff;
}

.table-wrap {
  background: #fff;
  flex: 1;
  overflow: hidden;
}
</style>
