<template>
	<u-popup v-model="localShow" :mode="mode" :border-radius="24">
		<view class="content">
			<view style="height: 1rpx;">
				<image src="../../../static/img/fz_icon_gb/fz_icon_gb.png" class="close" @click="closeBtnClick"></image>
			</view>
			<view class="slectAddress">
				<view v-for="(item, index) in listJurisdiction" :key="index">
					<list-item>
						<template v-slot:left>
							<view>{{item.title}}</view>
						</template>
						<template v-slot:right>
							<image :src="item.iconCheck ? checkBoxImg[0] : checkBoxImg[1]" style="width: 50rpx; height: 50rpx;"></image>
						</template>
					</list-item>
				</view>
			</view>
			<u-button class="confim" @click="confim" shape="circle" :ripple="true" :plain="false">确认</u-button>
		</view>
	</u-popup>
</template>

<script>
	import listItem from '../../listitem/listItem.vue'
	export default {
		components: {
			listItem
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			mode: {
				type: String,
				default: 'bottom'
			}
		},
		data () {
			return {
				checkBoxImg: ['../../static/img/fz_icon_xz/fz_icon_xz.png', '../../static/img/fz_icon_gb/fz_icon_gb.png'],
				listJurisdiction: [
					{
						title: 'qqkld.net',
						iconCheck: true,
					},
					{
						title: '在线支付接口',
						iconCheck: false,
					}
				]
			}
		},
		computed: {
			localShow: {
				get () {
					return this.show
				},
				set (val) {
					this.$emit('update:show', val)
				}
			}
		},
		methods: {
			confim () {
				
			},
			closeBtnClick () {
				this.localShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.close {
		margin: 24rpx 24rpx 0 0;
		float: right;
		height: 50rpx;
		width: 50rpx;
	}
	.slectAddress {
		margin: 125rpx 50rpx 38rpx 50rpx;
	}
	/deep/ .u-drawer__scroll-view {
		background-color: #2B3062;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.confim {
		margin: 0 45rpx 29rpx 45rpx;
		height: 90rpx;
		
		background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		&::after {
			border: none;
		}
	}
</style>
