<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.ChooseAddress }}
			<view slot="right" class="right" @click="editFlag = !editFlag;">{{
                editFlag ? i18n.OK : i18n.Edit
        }}
			</view>
		</navigation>
			
			<!-- #ifdef APP-PLUS -->
			  <view class="content">
				<!-- #endif -->
			<!-- #ifdef H5 -->
			  <view class="content" style="margin-top: 100rpx;">
				<!-- #endif -->
			
			<view class="message-item">
				{{ i18n.message4 }}
			</view>
			<view class="message-item last">
				{{ i18n.message5 }}
			</view>
			<view class="card" v-if="userInfoObj.length > 0">
				<view class="dataBody" v-for="(item, index) in userInfoObj" :key="index">
					<view class="coinTitle">{{item.coinEnname}}</view>
					<!-- v-for="(addressItem, addressIndex) in 2" :key="addressIndex" -->
					<view class="addressItem" 
						@click="itemClick(index, item)">
						<view class="radio"
							:class="{ select: (editCoinIndex === index && editCoinAddressIndex === item.id) }"
							v-if="editFlag"></view>
						<view class="addressInfo">
							<view class="addressTitle">{{item.remark}}</view>
							<view class="address">{{item.address}}</view>
							<view class="time">{{item.timestr}}</view>
						</view>

					</view>
				</view>
			</view>
			<u-empty :text="i18n.Dataisempty" mode="data" v-if="userInfoObj.length==0"></u-empty>
			<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" v-if="userInfoObj.length" height="80" />
			<!-- 确认框 -->
			<u-modal :show="modalShow" :confirmText="i18n.OK" :cancelText="i18n.Cancel" :showCancelButton="true"
				:title="i18n.WarmTips" :content='i18n.WarmTipsText' @confirm="deleteAddress" @cancel="modalShow = false"
				confirmColor="#00E8A2" cancelColor="#96959E">
			</u-modal>
			<!-- 编辑按钮 -->
			<view class="buttonBg">
				<u-button class="button" :color="editFlag ? '#F4506A' : '#00E8A2'" throttleTime="500" @click="btnClick"
					:disabled="btnIsCanClick">
					{{ editFlag ? i18n.DeleteAddress : i18n.AddAddress }}
				</u-button>
			</view>

		</view>
		
	</view>
</template>

<script>
	import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	export default {
		components: {
			KeyValueRow
		},
		name: "chooseAddress",
		data() {
			return {
				// 币种代码
				coinCode:'',
				coinList: [{}],
				coinAddressList: [{}],
				editFlag: false, // 是否在编辑状态
				editCoinIndex: '',
				editCoinAddressIndex: '',
				coinAddress: 'SDIHJSD9809U9ERF9IOU0980970',
				currentCoin: 'USDT',
				modalShow: false,

				isLoadMore: false, //是否加载中
				loadStatus: 'loadmore',
				loadingText: this.$t("login").toload,
				loadmoreText: this.$t("login").pullup,
				nomoreText: this.$t("login").Nomore,
				form: {
					pageNumber: 1,
					pageSize: 20,
					type: 'crypto',
				},
				userInfoObj: [],

			};
		},
		computed: {
			i18n() {
				return this.$t("withdrawal");
			},
			btnIsCanClick() { // 按钮是否可以点击
				if (this.editFlag) {
					// console.log(`${this.editCoinIndex}` ? false : true);
					return `${this.editCoinIndex}` ? false : true; // 在编辑模式,有值才能点
				} else {
					return false; // 不在编辑模式始终可以点
				}
			}
		},
		onLoad(res) {
			// 1)用户选好币种后，如果用户点击choose到 Choose address页面，只展示用户已选择币种的地址，withdrawAddressList接口可以传多一个参数coinCode，
			//如果用户不是从withdrawl页面进到地址页，则展示全部币种的地址，而个人中心进去地址页和添加地址才是所有币种的
			// 2)从提现界面的choose进入地址页，点击添加地址，币种不能选择，只能添加提现界面所选币种的地址，也只显示提现界面选择币种的地址列表
			if(res.coinCode){
				// 传后台的
				this.form.coinCode=res.coinCode2
				// 回显到页面的
				this.coinCode=res.coinCode
				this.getList()
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				this.isLoadMore = true
				api.withdrawAddressList(this.form).then(res => {
					if (res.content.length) {
						if (this.form.pageNumber > 1) {
							this.userInfoObj = this.userInfoObj.concat(res.content)
							for (var i = 0; i < this.userInfoObj.length; i++) {
								if (this.userInfoObj[i].addTime) {
									this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
										i].addTime)
								}
							}
						} else {
							this.userInfoObj = res.content
							for (var i = 0; i < this.userInfoObj.length; i++) {
								if (this.userInfoObj[i].addTime) {
									this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
										i].addTime)
								}
							}
						}
						if (this.userInfoObj.length >= Number(res.totalElements)) { // 判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.isLoadMore = false
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = 'nomore'
						// this.userInfoObj = []
					}
					this.$forceUpdate()
				})
			},
			itemClick(index, addressIndex) {
				console.log(index, addressIndex)
				// 编辑模式下
				if (this.editFlag) {
					// console.log(index, addressIndex);
					if (this.editCoinIndex === index && this.editCoinAddressIndex ===  addressIndex.id) { // 取消选择
						this.editCoinIndex = '';
						this.editCoinAddressIndex = '';
					} else { // 选择
						this.editCoinIndex = index;
						this.editCoinAddressIndex = addressIndex.id;
					}
				} else {
					// 选择地址情况下 点击地址返回传参有问题 可能要通用vuex解决
					uni.$emit('coinAddressChang', {
						coinid: addressIndex.id,
						coinAddress: addressIndex.address,
					});
					uni.navigateBack()

				}

			},
			btnClick() {
				// 在编辑模式弹出确认框
				if (this.editFlag) {
					this.modalShow = true
					
				} else {
					// 在非编辑模式下直接跳转
					uni.navigateTo({
						url:'/pages/withdrawal/addAddress?coinCode2='+this.form.coinCode +'&'+ 'coinCode='+this.coinCode
					});
				}
			},

			deleteAddress() {
				this.modalShow = false;
				// 删除地址
				api.withdrawAddressDel({
					addressId:this.editCoinAddressIndex,
				}).then(res => {
				  uni.$u.toast(this.$t("login").Deletesucceeded)
				  setTimeout(()=>{
					this.getList()
				  },600)
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-modal__content__text{
		color: #96959E;
	}
	.main {

		.right {
			width: 82rpx;
			height: 56rpx;
			line-height: 56rpx;
			position: absolute;
			right: 32rpx;
			font-size: 24rpx;
			background: rgba(246, 166, 9, 0.1);
			border-radius: 8px;
			color: #FFBC1F;
		}


		.content {
			margin-top: 200rpx;
			padding: 40rpx;

			.message-item {
				padding: 0 16rpx;
				font-size: 24rpx;
				color: #A1A0A8;
				line-height: 36rpx;

				&.last {
					margin-bottom: 30rpx;
				}
			}


			.card {

				.dataBody {
					margin-bottom: 32rpx;
					padding: 32rpx;
					box-sizing: border-box;
					background: #211F32;
					border-radius: 20rpx;

					.coinTitle {
						font-size: 24rpx;
						line-height: 28rpx;
						margin-bottom: 32rpx;
					}

					.addressItem {
						  flex: 0 1 50%;
						height: 180rpx;
						box-sizing: border-box;
						padding: 32rpx 0;
						border-top: 2rpx solid #323045;
						display: flex;

						.radio {
							margin-top: 32rpx;
							margin-right: 24rpx;
							box-sizing: border-box;
							width: 48rpx;
							height: 48rpx;
							background: #323045;
							border: 3rpx solid #DCDBE0;
							border-radius: 16rpx;


							&.select {
								background-image: url(../../static/withdrawal/Checkbox_pr.png);
								background-repeat: no-repeat;
								background-size: 48rpx;
								border: none;
							}
						}

						.addressInfo {
                             width: 590rpx;
							.addressTitle {
								position: relative;
								font-size: 24rpx;
								margin-bottom: 20rpx;
								word-break: break-all;

								&::after {
									display: block;
									position: absolute;
									content: '';
									background-image: url(../../static/charity/ic_ma_arrow_down.png);
									background-repeat: no-repeat;
									background-size: 32rpx;
									width: 32rpx;
									height: 32rpx;
									top: 0rpx;
									right: -18rpx;
									transform: rotate(270deg);
								}
							}

							.address {
								font-size: 24rpx;
								line-height: 28rpx;
								color: #A1A0A8;
								word-break: break-all;
							}

							.time {
								font-size: 24rpx;
								line-height: 28rpx;
								color: #A1A0A8;
							}
						}
					}





					&:last-child {
						margin-bottom: 160rpx;
					}

				}
			}

			/deep/.u-popup__content {
				background: #323045;

				.u-modal__title {
					color: #fff;
				}

				.u-modal__content__text {
					text-align: center;
				}
			}

			.buttonBg {
				position: fixed;
				bottom: 0rpx;
				.button {
					width: 670rpx;
					box-sizing: border-box;
					height: 112rpx;
					margin-bottom: 40rpx;
					border-radius: 32rpx;
					font-weight: 700;
					font-size: 32rpx;
					color: #15141F !important;

				}
			}




		}




	}
</style>
