<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <!-- 财务对账 -->
  <div class="Mall4j table">
    <div
      v-if="paySettlementType!==1"
      class="search-bar"
    >
      <el-form
        :inline="true"
        :model="params"
        @submit.prevent
      >
        <el-form-item :label="$t('multishop.shopWalletLog.withdrawalStatus') + '：'">
          <el-select
            v-model="params.status"
            clearable
            :placeholder="$t('multishop.shopWalletLog.withdrawalStatus')"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit(true)"
          >
            {{ $t('table.search') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-table
        :data="tableData"
        header-cell-class-name="table-header"
        row-class-name="table-row"
        style="width: 100%"
      >
        <el-table-column
          width="80"
          type="index"
          :label="$t('table.id')"
          align="center"
        />
        <el-table-column
          prop="createTime"
          :label="$t('multishop.shopWalletLog.withdrawalTime')"
          align="center"
        />
        <el-table-column
          prop="amount"
          :label="$t('multishop.shopWalletLog.withdrawAmount')"
          align="center"
        >
          <template #default="scope">
            <span>{{ centToYuan(scope.row.amount) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paySettlementType!==1"
          prop="supplierRemarks"
          :label="$t('multishop.shopWalletLog.withdrawalStatus')"
          align="center"
        >
          <template #default="scope">
            <span>{{ status[scope.row.status+1].label }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="paySettlementType===1"
          prop="amount"
          label="提现金额"
          align="center"
        />
        <el-table-column
          prop="operation"
          :label="$t('table.actions')"
          align="center"
        >
          <template #default="scope">
            <el-button
              v-permission="['shop:shopCash:cashInfo']"
              link
              type="primary"
              @click.prevent="clickDetail(scope.row)"
            >
              {{ $t('table.detail') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <withdrawal-detail
      v-if="isShowDetail"
      ref="detailRef"
    />
    <!-- 分页条 -->
    <pagination
      v-model:current-page="params.pageNum"
      v-model:page-size="params.pageSize"
      style="text-align: right"
      :total="total"
      @size-change="onPagination"
      @current-change="onPagination"
    />
  </div>
</template>

<script setup>

import { withdrawCashList, withdrawCashBankInfo } from '@/api/multishop/shop_wallet_log'
import { useAllinpayStore } from '@/stores/modules/allinpay.js'
import withdrawalDetail from './withdrawal-detail.vue'
import Big from 'big.js'
const params = reactive({
  pageNum: 1,
  pageSize: 10,
  status: ''
})
const paySettlementType = ref(useAllinpayStore.paySettlementType)// 是否开启通联支付 1：开启 0：关闭
const total = ref(0)
const isShowDetail = ref(false)
const tableData = ref([])
const status = computed(() => {
  return [
    {
      value: -1,
      label: $t('multishop.shopWalletLog.fail')
    }, {
      value: 0,
      label: $t('multishop.shopWalletLog.notApproved')
    }, {
      value: 1,
      label: $t('multishop.shopWalletLog.passed')
    }
  ]
}
)
onMounted(() => {
  getData()
})
const centToYuan = (value) => {
  if (value) {
    return new Big(value).div(100).toFixed(2)
  }
  return 0
}
const onPagination = (page) => {
  params.pageNum = page.pageNum
  params.pageSize = page.pageSize
  getData()
}
const onSubmit = (newData = false) => {
  getData(newData)
}
let tempSearchForm = reactive('')
const dataFrom = ref('')
const getData = (newData = false) => {
  if (newData || !tempSearchForm) {
    tempSearchForm = { ...dataFrom.value, ...params }
  } else {
    tempSearchForm.pageNum = params.pageNum
    tempSearchForm.pageSize = params.pageSize
  }
  withdrawCashList(tempSearchForm).then(data => {
    tableData.value = data.list
    total.value = data.total
  })
}
const detailRef = ref('')
const clickDetail = (data) => {
  nextTick(() => {
  // 使用cashId获取退款详情
    withdrawCashBankInfo(data.cashId).then(res => {
      detailRef.value.init(res)
    })
  })
  isShowDetail.value = true
}

</script>

<style lang="scss" scoped>
  .table {
     .list{
       padding: 20px 0;
     }
   }
.search-bar {
  padding-bottom: 6px !important;
}
</style>
