<template>
	<view class="xkl-com-bg">
		<view style="height: 20rpx;"></view>
		<navigator url="/pages/wallet/account/form">
			<u-button type="primary">添加银行卡</u-button>
		</navigator>
		<!-- <view style="height: 20rpx;"></view> -->
<!-- 		<navigator url="/pages/wallet/account/org">
			<u-button type="warning">添加企业</u-button>
		</navigator> -->
		<view style="height: 20rpx;"></view>
		<view>
			<view v-if="!items.length" style="padding: 30rpx;background-color: #ffffff;border-radius: 10rpx;">
				<u-empty mode="data"></u-empty>
			</view>
			<view v-else @click="check(item)" v-for="(item,index) in items" :key="index"
				:class="item.id == current ? 'xkl_cur' : 'xkl_no'"
				style="background-color: #ffffff;border-radius: 12rpx; padding: 20rpx;margin-bottom: 20rpx;">
				<view class="u-flex u-flex-between">
					<view>
						<view style="font-size: 28rpx;">
							<view class="u-flex u-flex-y-center">
								<view>
									<u-tag :text="config.role[item.role]" size="mini" type="success" plain
										plainFill></u-tag>
								</view>
								<view style="width: 20rpx;"></view>
								<view style="font-size: 26rpx;">{{item.realname}}</view>
								<view style="width: 20rpx;"></view>
								<view style="font-size: 26rpx;">{{item.mobile}}</view>
							</view>
						</view>
						<view style="height: 20rpx;"></view>
						<view style="color: #232323;">
							<view style="font-size: 28rpx;">{{item.subname}}</view>
							<view style="font-size: 28rpx;">{{item.num}}</view>
							<view style="height: 10rpx;"></view>
							<view style="font-size: 28rpx;">{{item.idcard}}</view>
						</view>
					</view>
					<view>
						<u-tag v-if="item.role == 1" text="编辑"
							@click="tonav(`/pages/wallet/account/form?item=${encodeURIComponent(JSON.stringify(item))}`)">

						</u-tag>
						<u-tag v-if="item.role == 2" text="编辑"
							@click="tonav(`/pages/wallet/account/org?item=${encodeURIComponent(JSON.stringify(item))}`)">
						
						</u-tag>
						<view style="height: 30rpx;"></view>
						<u-tag text="删除" @click="delshowcli(item)" type="error"></u-tag>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="delshow" @confirm="getAccountDel()" @close="delshow = false" showCancelButton
			closeOnClickOverlay @cancel="delshow = false" content='确认删除？'></u-modal>
		<view style="height: 100rpx;"></view>
		<u-button v-if="show" @click="toback">返回上一页</u-button>
	</view>
</template>

<script>
	let self;
	export default {
		data() {
			return {
				delshow: false,
				items: [],
				current: '',
				config: null,
				show: 0,
				form: {
					id: ''
				}
			}
		},
		onLoad(option) {
			self = this;
			if (option && option.show) {
				self.show = 1;
			}
		},
		onShow() {
			self.getAccountItems();
		},
		methods: {
			tonav(url) {
				uni.navigateTo({
					url: url
				})
			},
			delshowcli(item) {
				self.delshow = true;
				self.form.id = item.id;
			},
			toback() {
				uni.navigateBack();
			},
			check(item) {
				self.current = item.id;
			},
			getAccountDel() {
				self.$http.get('/shop/v10/account/delete', self.form).then(({
					data,
					success
				}) => {
					self.delshow = false;
					self.getAccountItems();
				})
			},
			getAccountItems() {
				self.$http.get('/shop/v10/account/items').then(({
					data,
					success
				}) => {
					self.items = data.items;
					self.config = data.config;
				})
			},
		}
	}
</script>

<style lang="scss">
	.xkl_cur {
		border: 1px solid #71d5a1;
	}

	.xkl_no {
		border: 1px solid #ffffff;
	}
</style>