<template>
	<view class="page">
		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" />
		
		<!--  v-if="search" -->
		
		<view class="search">
			
			<selectCityPopup 
			color="#000"
			@cityChange="getData"/>
			
		    <uv-search bgColor="#ffffff" 
			placeholder="搜索材料" 
			inputAlign="left" 
			@search="handleSearch"
			v-model="keyword"
			@change="searchChange"
		    showAction="false"></uv-search>
		</view>
		
		<view class="productList">
			<productItem
			@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${item.id}`)"
			:item="item" v-for="(item, index) in list" :key="index"/>
		</view>
		
		<quick-order-entry
		ref="quickOrderEntry"
		/>
		
		<kefu/>
	</view>
</template>

<script>
	import productItem from '@/components/productItem.vue'
	import mixinsList from '@/mixins/list.js'
	import selectCityPopup from '@/components/selectCityPopup.vue'
	export default {
	mixins: [mixinsList],
		components : { 
			productItem,
			selectCityPopup,
		},
		data() {
			return {
				title : '',
				iconId : 0,
				mixinsListApi: 'getProductList',
				search : false,
				keyword : '',
			}
		},
		onLoad({title, iconId, search}) {
			if(iconId){
				this.title = title
				this.iconId = iconId
				this.queryParams.shopIconId = iconId
			}else if(search){
				this.search = search
				this.title = '搜索材料'
			}
		},
		methods: {
			beforeGetData(){
				return {
					cityId : this.selectCity.id
				}
			},
			handleSearch(value){
				this.queryParams.title = this.keyword
				this.getData()
			},
			searchChange(){
				if(!this.keyword){
					this.queryParams.title = this.keyword
					this.getData()
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	.search {
		background-color: #fff;
		border-radius: 40rpx;
		display: flex;
		padding: 20rpx;
		margin: 20rpx;
	    :deep(.uv-search__content) {
	        box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
	    }
	}
	.productList{
		
	}
}
</style>
