<template>
  <div class="recharge-record card">
    <el-tabs
      v-model="activeTab"
      class="recharge-tabs"
      @tab-click="handleTabClick">
      <el-tab-pane label="支付宝充值记录" name="alipay">
        <div class="tab-content">
          <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="searchAlipay">
                  查询
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="table-wrap" v-loading="aliPayLoading">
            <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="serverTime"
                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>
      </el-tab-pane>
      <el-tab-pane label="线下充值记录" name="offline">
        <div class="tab-content">
          <div class="search">
            <el-form :model="offlineSearchForm" size="small" :inline="true">
              <el-form-item label="状态">
                <el-select
                  v-model="offlineSearchForm.status"
                  placeholder="请选择状态"
                  clearable>
                  <el-option
                    v-for="item in statusMap"
                    :key="item.code"
                    :label="item.remark"
                    :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="充值单号">
                <el-input
                  v-model="offlineSearchForm.billNo"
                  placeholder="请输入流水单号"
                  clearable />
              </el-form-item>
              <el-form-item label="充值方式">
                <el-select
                  v-model="offlineSearchForm.payType"
                  placeholder="请选择充值方式"
                  clearable
                  @change="onOfflineFilterChange">
                  <el-option
                    v-for="item in rechargeTypeList"
                    :key="item.code"
                    :label="item.remark"
                    :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="账户类型">
                <el-select
                  v-model="offlineSearchForm.accountType"
                  placeholder="请选择账户类型"
                  clearable
                  @change="onOfflineFilterChange">
                  <el-option
                    v-for="item in accountTypeList"
                    :key="item.code"
                    :label="item.remark"
                    :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="充值账户">
                <el-select
                  v-model="offlineSearchForm.account"
                  placeholder="请选择充值账户"
                  clearable
                  filterable
                  popper-class="recharge-account-select">
                  <el-option-group
                    v-for="group in accountOptionGroups"
                    :key="group.label"
                    :label="group.label">
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value" />
                  </el-option-group>
                </el-select>
              </el-form-item>
              <el-form-item label="客户编码">
                <el-input
                  v-model="offlineSearchForm.userMark"
                  placeholder="请输入客户编码"
                  clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-search"
                  @click="searchOffline">
                  查询
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="table-wrap" v-loading="offlineLoading">
            <el-table
              ref="offlineTable"
              :data="offlineRecordList"
              border
              width="100%"
              height="100%"
              :highlight-current-row="true"
              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
                label="状态"
                prop="status"
                header-align="center"
                align="center"
                min-width="80"
                fixed="left"
                :show-overflow-tooltip="true">
                <template slot-scope="{ row }">
                  {{
                    statusMap.find((item) => item.code === row.status)?.remark
                  }}
                </template>
              </el-table-column>
              <el-table-column
                label="充值单号"
                prop="billNo"
                header-align="center"
                align="center"
                min-width="140"
                fixed="left"
                :show-overflow-tooltip="true" />
              <el-table-column
                label="客户编码"
                prop="userMark"
                header-align="center"
                align="center"
                width="100"
                :show-overflow-tooltip="true" />
              <el-table-column
                label="充值方式"
                prop="payTypeName"
                header-align="center"
                align="center"
                width="100"
                :show-overflow-tooltip="true" />

              <el-table-column
                label="账户类型"
                prop="accountTypeName"
                header-align="center"
                align="center"
                width="130"
                :show-overflow-tooltip="true" />
              <el-table-column
                label="充值账户"
                prop="account"
                header-align="center"
                align="center"
                min-width="120"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column
                label="充值币种"
                prop="currency"
                header-align="center"
                align="center"
                width="90"
                :show-overflow-tooltip="true" />
              <el-table-column
                label="充值金额"
                prop="amount"
                header-align="center"
                align="right"
                width="100"
                :show-overflow-tooltip="true" />
              <el-table-column
                label="手续费"
                prop="serviceFee"
                header-align="center"
                align="right"
                width="90"
                :show-overflow-tooltip="true" />
              <el-table-column
                label="入账金额"
                prop="actualAmount"
                header-align="center"
                align="right"
                width="100"
                :show-overflow-tooltip="true" />
              <el-table-column
                label="备注"
                prop="remark"
                header-align="center"
                align="left"
                min-width="120"
                :show-overflow-tooltip="true" />
              <el-table-column
                label="水单"
                prop="billUrl"
                header-align="center"
                align="center"
                width="120">
                <template slot-scope="{ row }">
                  <span
                    v-if="row.billUrl"
                    class="bill-img-wrap"
                    @click.stop="openBillImageViewer(row.billUrl)">
                    <el-image
                      class="bill-img"
                      :src="setimgUrl(row.billUrl, { w: 80 })"
                      fit="cover" />
                  </span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column
                label="创建时间"
                prop="createdTime"
                header-align="center"
                align="center"
                width="160"
                :show-overflow-tooltip="true" />
              <el-table-column
                label="操作"
                header-align="center"
                align="center"
                width="80"
                fixed="right">
                <template slot-scope="{ row }">
                  <i
                    title="查看日志"
                    class="el-icon-document"
                    @click="getLog(row.id)"
                    style="cursor: pointer; color: orange" />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              layout="sizes, total, prev, pager, next, jumper"
              background
              :total="offlineTotal"
              :page-size="offlinePageSize"
              :current-page="offlineCurrentPage"
              @size-change="offlineSizeChange"
              @current-change="offlineOnCurrentChange" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="操作日志"
      :close-on-click-modal="false"
      :visible.sync="logVisible"
      width="700px">
      <ul style="color: #333; font-size: 14px; height: 600px; overflow: auto">
        <li v-for="(item, index) in logList" :key="index" style="height: 30px">
          ({{ index + 1 }})、{{
            item.createdTime +
            '：' +
            (item.employeeName || '') +
            item.description
          }}
        </li>
      </ul>
    </el-dialog>
    <el-image-viewer
      v-if="billImageViewerVisible"
      class="bill-image-viewer"
      :initial-index="billImageViewerIndex"
      :z-index="9999"
      :url-list="billImageViewerUrls"
      :on-close="closeBillImageViewer" />
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import {
  getUserRechargeRecordListApi,
  getSubjectListApi,
  getOfflineRechargeRecordListApi,
  getOfflineBaseProceedsAccountListApi,
  getRechargeTypeListApi,
  getOfflineAccountTypeListApi,
  getOfflineRechargeLogListApi
} from '@/common/api/user/user'

export default {
  name: 'rechargeRecord',
  components: {
    ElImageViewer
  },
  data() {
    return {
      logVisible: false,
      logList: [],
      billImageViewerVisible: false,
      billImageViewerUrls: [],
      billImageViewerIndex: 0,
      activeTab: 'alipay',
      period: [],
      subjectList: [],
      sortParmas: {},
      searchForm: {
        payStatus: '已支付'
      },
      total: 0,
      pageSize: 50,
      currentPage: 1,
      aliPayLoading: false,
      rechargeRecordList: [],
      offlineSearchForm: {},
      offlineTotal: 0,
      offlinePageSize: 50,
      offlineCurrentPage: 1,
      offlineLoading: false,
      offlineRecordList: [],
      accountTypeList: [],
      rechargeTypeList: [],
      accountList: [],
      statusMap: [
        {
          code: 'OPER_APPROVED',
          remark: '初审'
        },
        {
          code: 'FIN_APPROVED',
          remark: '复审'
        },
        {
          code: 'WAIT_UPDATE',
          remark: '待修改'
        },
        {
          code: 'SETTLED_AMOUNT',
          remark: '已入账'
        },
        {
          code: 'INVALID',
          remark: '作废'
        }
      ]
    }
  },
  computed: {},
  async created() {
    await Promise.all([
      this.getRechargeAccountList(),
      this.getRechargeTypeList(),
      this.getAccountTypeList(),
      this.getSubjectList()
    ])
    this.accountOptionGroups = this.accountTypeList.map((type) => ({
      label: type.remark,
      options: this.accountList
        .filter((item) => item.operation === type.code)
        .map((item) => ({ label: item.accountNumber, value: item.id }))
    }))
    this.loadAlipayData()
  },
  methods: {
    openBillImageViewer(billUrl) {
      if (!billUrl) return
      this.billImageViewerUrls = [this.setimgUrl(billUrl)]
      this.billImageViewerIndex = 0
      this.billImageViewerVisible = true
    },
    closeBillImageViewer() {
      this.billImageViewerVisible = false
      this.billImageViewerUrls = []
    },
    // 切换tab
    handleTabClick(tab) {
      if (tab.name === 'alipay') {
        this.loadAlipayData()
      } else if (tab.name === 'offline') {
        this.loadOfflineData()
      }
    },

    // 支付宝充值记录
    async loadAlipayData(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.aliPayLoading = 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.aliPayLoading = false
      }
    },
    // 线下充值记录
    async loadOfflineData() {
      const data = {
        ...this.offlineSearchForm,
        currentPage: this.offlineCurrentPage,
        pageSize: this.offlinePageSize
      }
      data.accountId = this.offlineSearchForm.account
      delete data.account

      this.offlineLoading = true

      try {
        const res = await getOfflineRechargeRecordListApi(data)
        if (res.code !== 200) return
        this.offlineRecordList = res.data.records
        this.offlineTotal = res.data.total
      } catch (e) {
        console.log(e)
      } finally {
        this.offlineLoading = false
      }
    },
    searchAlipay() {
      this.currentPage = 1
      this.loadAlipayData(this.sortParmas)
    },
    searchOffline() {
      this.offlineCurrentPage = 1
      this.loadOfflineData()
    },
    onCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.loadAlipayData(this.sortParmas)
    },
    offlineOnCurrentChange(currentPage) {
      this.offlineCurrentPage = currentPage
      this.loadOfflineData()
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.loadAlipayData(this.sortParmas)
    },
    offlineSizeChange(pageSize) {
      this.offlinePageSize = pageSize
      this.loadOfflineData()
    },
    sortChange({ column, prop, order }) {
      this.sortParmas = {
        field: prop,
        asc: order === 'ascending'
      }
      this.loadAlipayData(this.sortParmas)
    },
    onOfflineFilterChange() {
      if (
        this.offlineSearchForm.account &&
        !this.filteredRechargeAccountList.some(
          (item) => item.id === this.offlineSearchForm.account
        )
      ) {
        this.$set(this.offlineSearchForm, 'account', '')
      }
    },
    async getLog(id) {
      try {
        const res = await getOfflineRechargeLogListApi({ id })
        if (res.code !== 200) return
        this.logList = res.data || []
        this.logVisible = true
      } catch (error) {
        console.log(error)
      }
    },

    async getSubjectList() {
      try {
        const { data } = await getSubjectListApi()
        this.subjectList = data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取收款账户列表
    async getRechargeAccountList() {
      try {
        const res = await getOfflineBaseProceedsAccountListApi()
        if (res.code !== 200) return
        this.accountList = res.data || []
      } catch (error) {
        console.log(error)
      }
    },
    // 获取充值方式列表
    async getRechargeTypeList() {
      try {
        const res = await getRechargeTypeListApi()
        if (res.code !== 200) return
        this.rechargeTypeList = res.data || []
      } catch (error) {
        console.log(error)
      }
    },
    // 获取账户类型列表
    async getAccountTypeList() {
      try {
        const res = await getOfflineAccountTypeListApi()
        if (res.code !== 200) return
        this.accountTypeList = res.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-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-tabs {
      &__header {
        margin-bottom: 10px;
      }

      &__content {
        flex: 1;
        overflow: hidden;
      }
    }

    .el-tab-pane {
      height: 100%;
    }
  }

  .recharge-tabs {
    &,
    .tab-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .tab-content {
      .table-wrap {
        flex: 1;
        overflow: hidden;
      }

      .bill-img-wrap {
        display: inline-block;
        cursor: pointer;
        vertical-align: middle;
      }

      .bill-img {
        width: 40px;
        height: 40px;
        vertical-align: middle;
      }
    }
  }
}
</style>
