<template>
	<!-- <view style="padding: 40rpx 0px;">
		<scroll-view scroll-x="true" style="width: 340px;">
			<view style="width: 450px;">
				<table class="table">
				  <thead>
				    <tr>
				        <th class="color1" style="width: 100rpx;">{{ $t("common.d8") }}</th>
				        <th class="color1">{{ $t("common.amout") }}</th>
				        <th class="color1" style="width: 150rpx;">{{ $t("common.d9") }}</th>
				        <th class="color1" style="width: 100rpx;">{{ $t("common.d10") }}</th>
				        <th class="color1" style="text-align: center;width: 180rpx;">{{ $t("common.d13") }}</th>
				        <th class="color1" style="text-align: center;width: 180rpx;">{{ $t("common.d15") }}</th>
				    </tr>
				  </thead>
				  <tbody>
					  <tr v-for="(item,index) in recordsList" :key="index" style="border-bottom: 1px  solid #ccc;height: 140rpx;">
					  	<td style="text-align: center;">{{item.currency}}</td>
					  	<td style="margin-right: 20rpx;">{{item.amount}}</td>
					  	<td style="text-align: center;">{{item.rate}}%</td>
					  	<td v-if="item.type==1" style="text-align: center;">{{$t('common.d17')}}</td>
					  	<td v-if="item.type==2" style="text-align: center;">{{item.day}}{{$t('exchange.f0')}}</td>
					  	<td style="text-align: center;">{{item.financial_time}}</td>
					  	<td style="text-align: center;">{{item.redemption_time}}</td>
					  </tr>
				  </tbody>
				</table>
			</view>
		</scroll-view>
	</view> -->
	<view style="background-color: #fff;height: 100%;color: #666;">
		<v-header class="nav-head" :title="$t('common.d7')"></v-header>
		<view class="d-flex justify-between align-center" style="padding: 0rpx 40rpx;margin: 40rpx 0rpx;">
			<view class="d-flex">
				<view @click="onskytype(1)">{{$t('common.today')}}</view>
				<view @click="onskytype(2)" style="margin-left: 30rpx;">1{{$t('common.week')}}</view>
				<view @click="onskytype(3)" style="margin-left: 30rpx;">1{{$t('common.M')}}</view>
			</view>
			<view><uni-datetime-picker style="width: 300rpx;" v-model="range" type="daterange" @change="pickerChange" /></view>
		</view>
		<scroll-view scroll-y="true" style="height: 80vh;" @scrolltolower="scrollpage">
			<view style="padding: 0rpx 40rpx;">
				<view v-for="(item,index) in recordsList" :key="index" class="recordsList_box">
					<view style="width: 60%;">
						<view>{{item.log_type_text}}</view>
						<view style="margin-top: 20rpx;font-size: 28rpx;color: #aeaeae;">{{item.created_at}}</view>
					</view>
					<view style="width: 40%;text-align: right;font-weight: bold;">
						<view>{{item.amount}}{{item.coin_name}}</view>
					</view>
				</view>
				<van-empty v-if="!recordsList.length" description="" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
import Wallet from "@/api/wallet";
export default {
  name: "finances-product",
  props: {
    
  },
  components: {
	
  },
  watch: {
	
  },
  mounted() {
    this.init()
  },
  data() {
    return {
      recordsList:[],
	  Numbertype:2,
	  page:1,
	  start_time:'',
	  end_time:'',
	  range:[],
	  last_page:1
    };
  },
  methods: {
    init(){
		let data = {
			page:this.page,
			type:this.start_time?'':this.Numbertype,
			start_time:this.start_time,
			end_time:this.end_time,
		}
		Wallet.financial_wlog(data).then(res => {
			if(res.code==200){
				if(this.page==1){
					this.last_page = res.data.last_page
					this.recordsList = res.data.data;
				}else{
					this.last_page = res.data.last_page
					this.recordsList = [...this.recordsList, ...res.data.data];
				}
			}
			// console.log(this.recordsList);
		}).catch(error => {
			console.error('Promise:', error);
		})
	},
	onskytype(type){
	  this.Numbertype = type;
	  this.page = 1;
	  this.recordsList = [];
	  this.init();
	},
	scrollpage(e){
		if(this.page>this.last_page) return 
		this.page++
		this.init();
	},
	pickerChange(e){
		if(e.length!==0){
			this.start_time = e[0]
			this.end_time = e[1]
			this.page = 1;
			this.init();
		}else{
			this.start_time = ''
			this.end_time = ''
			this.page = 1;
			this.init();
		}
		// console.log(e);
	}
  }
};
</script>

<style scoped lang="scss">
	.color1{
		color: #908F94;
	}
	tbody tr:hover{
		background: #e9e9e9;
	}
	.jump_btn{
	  display: inline-block;
	  min-width: 160rpx;
	  height: 70rpx;
	  line-height: 66rpx;
	  text-align: center;
	  border: 1px solid #444444;
	  border-radius: 100rpx;
	  font-size: 30rpx;
	  padding: 0px 40rpx;
	  font-weight: 400;
	  color: #000;
	  box-sizing: border-box;
	  
	  &:hover{
		cursor: pointer;
		color: #67e2da;
		border: 1px solid #67e2da;
	  }
	}
	.jump_btn1{
	  display: inline-block;
	  min-width: 160rpx;
	  height: 70rpx;
	  line-height: 66rpx;
	  text-align: center;
	  color: #999999;
	  border: 1px solid #999999;
	  border-radius: 100rpx;
	  font-size: 30rpx;
	  padding: 0px 40rpx;
	  font-weight: 400;
	  box-sizing: border-box;
	}
	.tr_box{
		display: flex;
		margin: 0px 20rpx;
		line-height: 100rpx;
	}
	.collapse_box{
		width: 100%;
		display: flex;
		font-size: 30rpx;
		font-weight: bold;
	}
	.collapse_box1{
		display: flex;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 100rpx;
		align-items: center;
		justify-content: space-between;
	}
	.collapse_box2{
		display: flex;
		font-size: 30rpx;
		line-height: 100rpx;
		font-weight: bold;
		align-items: center;
		justify-content: space-between;
	}
	.currency_box{
		display: flex;
		align-items: center;
		padding:40rpx 0rpx 40rpx;
		justify-content: space-between;
		border-bottom: 1px solid #bcbcbc;
	}
	.box1{
		width: 26%;
		padding-left: 5px;
	}
	.box2{
		width: 25%;
	}
	.box4{
		width: 20%;
		text-align: right;
	}
	.recordsList_box{
		display: flex;
		flex-wrap: wrap;
		// margin:40rpx 0px;
		padding: 40rpx 30rpx;
		border-bottom: 1px solid #ccc;
		justify-content: space-between;
	}
</style>