<template>
	<view class="my-bg">
		<cu-custom class="main-topbar bg-main-oil" isBack bgColor="bg-main-oil">
			<block slot="content">附近加油站</block>
			<block slot="backText">返回</block>
		</cu-custom>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="加油站名称" confirm-type="search"></input>
			</view>
			<view class="action" @tap="toMap">
				<image class="icon shadow-blur round icon-gasstation" src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png"
				 mode=""></image>
			</view>
		</view>
		<view class=" solids-bottom shadow ">
			<dropdownMenu>
				<dropdownItem :title="title1" v-model="val1" :list="typeList" @input="typeSelect" @close="show = false" />
				<dropdownItem :title="title2" v-model="val2" :list="nameLsit" @input="nameSelect" @close="show = false" />
				<dropdownItem :title="title3" :list="option3" v-model="val3" @input="optionSelect" @close="show = false" />
			</dropdownMenu>
		</view>
		<view class="" @tap="toDetail">
			<StationItem />
		</view>
	</view>
</template>

<script>
	import StationItem from './components/StationItem.vue'
	import dropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	import dropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'

	export default {
		components: {
			StationItem,
			dropdownItem,
			dropdownMenu
		},
		data() {
			return {
				val3: 'distance',
				val1: 'distance',
				val2: 'distance',
				title1: "0#",
				title2: "距离最近",
				title3: "综合排序",
				typeList: [{
						text: '距离最近',
						value: 'distance'
					},
					{
						text: '价格最低',
						value: 'price'
					}
				],
				nameLsit: [{
						text: '全部品牌',
						value: 0
					},
					{
						text: '距离最近',
						value: 'distance'
					},
					{
						text: '价格最低',
						value: 'price'
					}
				],
				option3: [{
						text: '距离最近',
						value: 'distance'
					},
					{
						text: '价格最低',
						value: 'price'
					}
				],
				InputBottom: 0,
				chooseList: ['1', '2'],
				arr: ['出', '入'],
				show: false
			}
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url: './stationDetail/stationDetail',
				})
			},
			nameSelect(value, item) {
				this.title2 = item.text
				console.log(item)
			},
			typeSelect(value, item) {
				console.log(item)
				this.title1 = item.text
			},
			optionSelect(value, item) {
				console.log(item)
				this.title3 = item.text
			},
			toMap() {
				uni.navigateTo({
					url: '../index/index',
				})
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
				console.log(e.detail)
				console.log(this.InputBottom)
			},
			InputBlur(e) {
				this.InputBottom = 0
				console.log(this.InputBottom)
				console.log(e.detail)
			}
		}
	}
</script>

<style scoped>
	.icon-gasstation {
		width: 1.2rem;
		height: 1.2rem;
	}
</style>
