<template>
<div class="line-list line-list--indent">

	<div class="line-item" >
		<input style="line-height:34px;" type="text" class="input-block" @click="showCitySelect" readonly v-model="address" placeholder="请选择省份/市/区县" />
	</div>
</div>
<div transition="fade-in" transition-mode="in-out">
	<city-select @change="change" @close="close" :visible.sync="visible"></city-select>
</div>
</template>

<script>
import citySelect from "components/citySelect/"

export default{
	components: {
		citySelect
	},
	data(){
		return{
		   visible:false,
		   address:""
		}
	},
	methods:{
		showCitySelect(){
			this.visible=true;
			console.log(this.visible);
		},
		change(value){
			this.address=value.province+" "+value.city+" "+value.county;
			this.visible=false;
		},
		close(){
			this.visible=false;
		}
	}
}
</script>