<!-- 选择地区组件 -->
<template>
	<view class="container">
		<view class="region-box dis-flex flex-x-between flex-y-center" :style="'margin-bottom: '+(regionStyle.marginBottom*2)+'rpx; background-color: '+regionStyle.background">
			<view class="user-info dis-flex flex-y-center">
				<view class="user-info-avatar m-right10" :style="{'background-image':'url('+regionParams['avatar']+')'}"></view>
				<view class="user-info-nickName f-30" :style="'color:'+regionStyle['nicknameColor']+';'">{{regionParams.nickname}}</view>
			</view>
			<view class="region-title dis-flex flex-y-center" @click="navGateto()">
				<view class="region-areaname f-30" :style="'color:'+regionStyle['areanameColor']+';'">{{currentaidCity}}</view>
				<view v-if="regionStyle['showtype']==='0'" class="region-unfold iconfont icon-unfold" :style="'color:'+regionStyle['areanameColor']+';'"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import App from '@/common/js/app.js'
	export default {
		data() {
			return {

			}
		},
		props: {
			regionStyle: {
				type: Object,
				default: function() {
					return {}
				}
			},
			regionParams: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		components: {

		},
		computed: {
			currentaidCity() {
				let agencyData = uni.getStorageSync('agencyData')
				if (!!agencyData) {
					return agencyData.areaname
				} else {
					return '选择地区'
				}
			},
		},
		onShow() {

		},
		mounted() {

		},
		methods: {
			navGateto() {
				App.navigationTo({
					url: 'pages/subPages/city/city'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.region-box {
			padding: 20upx 30upx;

			.user-info {
				.user-info-avatar {
					width: 60upx;
					height: 60upx;
					background-repeat: no-repeat;
					background-size: 60upx 60upx;
				}
			}

			.region-title {
				.region-unfold {
					font-size: 30upx;
				}
			}
		}
	}
</style>
