<template>
	<div class="">
		<v-distpicker @province="onProvinceChange" @city="onCityChange" @area="onAreaChange"></v-distpicker>
	</div>
</template>
<script>
	import VDistpicker from 'v-distpicker'
	export default {
		name: 'BaseAreaPicker',
		props: ['path', 'tips'],
		components: {
			VDistpicker
		},
		data() {
			return {
				pickResult: {
					province: null,
					city: null,
					area: null
				}
			}
		},
		created() {
			// console.log(this.top);
		},
		methods: {
			onProvinceChange(val) {
				this.pickResult.province = val.code ? val.value : null
			},
			onCityChange(val) {
				this.pickResult.city = val.code ? val.value : null
			},
			onAreaChange(val) {
				this.pickResult.area = val.code ? val.value : null
			},
		}
	}
</script>
<style>
	.distpicker-address-wrapper select {
		background-color: #575757;
		color: #cacaca;
		margin: 5px 0;
		font-size: 14px;
		height: 35px;
		border: 0;
		display: inline-block;
		position: relative;
		outline: none;
	}
</style>
