<template>
	<v-page>
		<v-header>
		  <template #title>
		    <view v-if="type=='draw'">
		      {{ $t("assets.c8") }}
		    </view>
		    <view v-if="type=='recharge'">
		      {{ $t('assets.f4') }}
		    </view>
		  </template>
		</v-header>
		<view class="layout-main">
			<view class="bg-panel-3" style="height: 100%;">
				<view class="rounded-md m-b-lg" v-if="list.length" style="padding-bottom: 100px !important;">
				  <view class="">
				    <table class="w-max">
				      <thead class="p-x-md">
				      <tr class="fn-sm p-x-md" style="display: flex;align-items: center;">
				        <view class="p-b-md fn-left p-l-md" style="width: 30%;">{{ $t("assets.c9") }}</view>
				        <view class="p-b-md fn-left" style="width: 20%;">{{ $t("assets.d0") }}</view>
				        <view class="p-b-md fn-right p-r-md" style="width: 30%;">{{ $t("assets.c0") }}</view>
						<view class="p-b-md fn-right p-r-md" style="width: 10%;">{{ $t("exchange.g3") }}</view>
				      </tr>
				      </thead>
				      <tbody>
				      <tr class="color-light trChange p-x-md rounded-md" v-for="item in list" :key="item.id">
						<view style="display: flex;align-items: center;">
							<view class="p-y-xs p-l-md rounded-tl-sm rounded-bl-sm fn-sm" style="width: 30%;">
							  {{ item.datetime | parseTime }}
							</view>
							<view v-if="type=='draw'" style="width: 20%;">
							  <view>{{ item.status_text }}</view>
							</view>
							<view v-if="type=='recharge'">
							  <view v-if="item.status==0">{{$t('assets.d1')}}</view>
							  <view v-if="item.status==1" class="color-buy">{{$t('assets.d2')}}</view>
							  <view v-if="item.status==2" class="color-sell">{{$t('assets.d3')}}</view>
							</view>
							<view class="fn-right p-r-md rounded-tr-sm rounded-br-sm" style="width: 30%;">
							  {{ item.amount }}
							  <span class="color-default">({{ item.coin_name }})</span>
							</view>
							<view class="" v-if="item.status==0" style="width: 10%;">
							    <span style="color: #4381F6;width: 60px;height: 30px;font-size: 12px;"  
								@click="cancelWithdraw(item)">{{$t('exchange.g4')}}</span>
							</view>
						</view>
						<view class="p-l-md" v-if="item.remark" style="color:red;word-wrap: break-word;width:680rpx;">
							<view>{{$t('common.rejection')}}：{{item.remark}}</view>
						</view>
				      </tr>
				      <!-- <tr v-if="loadMore">
				        <td colspan="3" class="fn-center p-xs link-active" @click="more">
				          {{ $t("assets.d4") }}
				        </td>
				      </tr> -->
				      </tbody>
				    </table>
				  </view>
				</view>
			</view>
		</view>
	</v-page>
</template>

<script>
import Wallet from "@/api/wallet";
import formData from "@/utils/class/date";
	export default {
		data() {
			return {
				type: '',
				list: [],
				page: 1,
				loadMore: true
			}
		},
		filters: {
		  parseTime(val) {
		    return formData.parseTime(val);
		  },
		},
		methods: {
			// 获取提币记录
			getWithdrawRecords() {
			  let data = {
			    page: this.page,
			  };
			  Wallet.withdrawalRecord(data).then((res) => {
			    if (res.data.current_page == 1) this.list = [];
			    let list = [...this.list, ...res.data.data];//无法响应
				this.list.splice(0,this.list.length,...list);
				// this.list.push(...list);
				// console.log('length---------------',this.list.length, '页数：',res.data.current_page);
			    if (res.data.data.length < res.data.per_page) this.loadMore = false;
			  });
			},
			// 获取充值记录
			depositHistory() {
			  let data = {
			    page: this.page,
			  };
			  Wallet.depositHistory(data).then((res) => {
			    if (res.data.current_page == 1) this.list = [];
			    this.list = [...this.list, ...res.data.data];
			    if (res.data.data.length < res.data.per_page) this.loadMore = false;
			  });
			},
			more() {
			  this.page++;
			  if(this.type=='draw'){
			  	this.getWithdrawRecords();
			  }else if(this.type=='recharge'){
			  	this.depositHistory();
			  }
			},
			cancelWithdraw(item) {
			    Wallet.cancelWithdraw({ withdraw_id: item.id }).then(res => {
			        this.$toast(this.$t('otc.d4'));
			        this.getWithdrawRecords()
			    })
			},
		},
		onLoad(e) {
			// console.log('---------',e);
			this.type = e.type;
			if(e.type=='draw'){
				this.getWithdrawRecords();
			}else if(e.type=='recharge'){
				this.depositHistory();
			}
		}
	}
</script>

<style>

</style>
