<template>
	<view class="">
		<z-paging :language="$i18n.locale" ref="paging" v-model="list" @query="queryList" :pageSize="20"
		:style="'background-color: '+theme.bg+';color: '+theme.text">
			<!-- 下拉刷新 -->
			<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher>

			<!-- 头部 -->
			<myNav slot="top" :title="i18n.mine.safety.payment"></myNav>
			<!-- 身体 -->
			<view class="padding-b-200">
				<view
					:style="'background-color: '+theme.fu_bg+';color: '+theme.fu_text"
					:class="[toggleDelay?'animation-slide-bottom':'']" class="listBox" v-for="(item,index) in list"
					:key="index">
					<view class="height-100 flex align-center justify-between">
						<view class="height-70 flex align-center line-height-70">
							<image class="width-50 height-50" src="/static/imgs/my/cardlogo.png" mode=""></image>
							<text class="width-400 font-32 bold-font margin-l-20 hidden-nowrap-ellipsis-1">{{item.bank_name}}</text>
						</view>
						<!-- <view class="width-150 flex align-center justify-end">
							<image class="width-50 height-50" src="/static/imgs/my/delectImg@2x.png" mode=""></image>
							<image class="width-50 height-50" src="/static/imgs/my/updataImg@2x.png" mode=""></image>
						</view> -->
						<text @click="naviTo(item)"
							class="font-30 bold-font color-0165EE">{{i18n.mine.safety.modify}}</text>
					</view>
					<view class="height-80 line-height-80">
						<text class="font-40 numbold-font">{{item.card_num | cardFilter}}</text>
					</view>
				</view>
			</view>

			<button @click="router.push('/pages/my/safety/add')"
				class="cu-btn loginBtn">{{i18n.mine.safety.add}}</button>

		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],

				toggleDelay: true,
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		filters: {
			cardFilter(item) {
				var tel1 = item.replace(item.substring(4, 10), "******")
				return tel1
			},
		},
		onLoad() {
			setTimeout(() => {
				this.toggleDelay = false
			}, 1000)
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			naviTo(item) {
				// console.log(this.$u.queryParams(item));
				uni.navigateTo({
					url: '/pages/my/safety/add' + this.$u.queryParams(item)
				})
			},
			queryList(pageNo, pageSize) {
				this.toggleDelay = true
				setTimeout(() => {
					this.post('/my/collection_list', {
						page: pageNo,
						page_num: pageSize
					}).then(res => {
						if (res.code == 1) {
							console.log(res)
							this.$refs.paging.complete(res.data);
							this.toggleDelay = false
						}
					})
				}, 300)
			},
		}
	}
</script>

<style lang="scss">
	.listBox {
		width: 690rpx;
		height: 220rpx;
		margin: 20rpx auto;
		padding: 10rpx 24rpx;
		// background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx rgba(205, 206, 219, 0.2);
		border-radius: 20rpx;
	}

	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%) !important;
		border-radius: 12rpx;
		line-height: 96rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		position: fixed;
		bottom: 104rpx;
		left: 50%;
		margin-left: -300rpx;
	}
</style>
