<template>
	<view class="page">
		<HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm"></HMfilterDropdown>
		<block v-if="isdata && !issshow">
			<view class="m-nearbylist" style="margin-top: 100rpx;">
                <view style="background-color: #ffffff;">
                    <!-- list -->
                    <view class="cu-list menu-avatar">
                    	<view class="cu-item" v-for="(item,index) in Info" :key="index" @click="taskInfo(item.purchase_order_id)" >
                    		<view class="cu-avatar radius lg"
                    		:style="'background-image:url(' + item.buyer_user_avatar + ');'">
                    			<view class="cu-tag badge">{{item.buyer_user_level_name}}</view>
                    		</view>
                    		<view class="content">
                    			<view class="text-grey">
                    				<view class="text-cut">{{item.purchase_order_title}}</view>
									<view class="text-red text-lg" style="color:#aaaaaa;font-size:20rpx;margin:0 10rpx;">
										x{{item.purchase_order_quantity}} 
										<text v-if="item.purchase_order_unit">
											/{{ productUnit[item.purchase_order_unit] }}
										</text>
									</view>
                    			</view>
                    			<view class="text-gray text-sm flex" v-if="(item.purchase_province && item.purchase_city)">
                    				<view class="text-cut">
                    					{{__('期望货源地：')}}{{item.purchase_province}}/{{item.purchase_city}}
                    				</view>
                    			</view>
                    		</view>
                    		<view class="action" style="width: 240rpx;">
                    			<view class="text-grey text-sm">{{item.purchase_order_time}}</view>
                    			<!-- <view class="text-red text-lg" style="color:#000000;font-size:20rpx;"> x{{item.purchase_order_quantity}} </view> -->
								<view class="text-red text-lg" style="font-size:20rpx;border:2rpx solid #07C23F;width:70%;color:#07C23F;float:right;">{{__('去报价')}} </view>
                    		</view>
                    	</view>
                    </view>
                    <view class="m-loading-box uni-list-cell">
                        <block v-if="ispage && !issshow">
                            <view class="u-loadmore">
                                <label class="u-loading"></label><text class="u-loadmore-tips">{{__('正在加载')}}</text>
                            </view>
                        </block>
                        <block v-if="!ispage && !issshow">
                            <view class="u-loadmore u-loadmore-line"><text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text></view>
                        </block>
                    </view>
				</view>
			</view>
		</block>
		<view class="m-nullcontent" v-if="!isdata">
			<view class="m-nullpage-middle"><label class="iconfont icon-meiyougengduo"></label>
				<view class="m-null-tip"><text>{{__('亲~什么都没有')}}</text><text>{{__('附近没什么商家店铺!')}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';

	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data: function() {
			return {
				options: {},
				page: 1,
				ispage: true,
				flag: true,
				Info: [],
				productUnit:[],
				latitude: 0,
				longitude: 0,
				isdata: false,
				issshow: 0,
				store_id: null,
				chain_id: null,
				rows: 10,

				service_category_id_row:[],
				price_range:[],

				post: {
					category_id:0
				},


				filterDropdownValue:[],
				filterData:[]
			}
		},
		components: {
			'HMfilterDropdown':HMfilterDropdown
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad(options) {
            uni.setNavigationBarTitle({
                title:this.__('采购大厅')
            });

			var that = this;

			/*
			that.$.getLocation({
				type: "wgs84",
				success: function(response) {
					that.setData({
						options: options,
						store_id: options.store_id ? options.store_id : '',
						item_id: options.item_id ? options.item_id : '',
						latitude: response.latitude,
						longitude: response.longitude
					});

					that.getOrderList()
				},
				fail: function() {
					that.setData({
						options: options,
						isdata: true
					});

					that.$.confirm(that.__('手机定位失败！'));

					//that.getOrderList()
				}
			})
			*/

		   that.getOrderList();
		   that.getPurchasedIndex();

			/*
			//定时器模拟ajax异步请求数据
			setTimeout(()=>{
				this.filterDropdownValue = [[1,1,0],[0,1],[1],[[0],[1,2,7],[1,0]]];
				this.filterData = data;
			},100);
			//模拟ajax请求子菜单数据。
			setTimeout(()=>{
				this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
			},2000)
			*/
			console.info(this.Config.URL.productfilter_opt)

		   that.$.request({
		   	url: this.Config.URL.productfilter_opt,
		   	data: {},
		   	dataType: 'json',
		   	success: function(data, status, msg, code) {
		   		if (status == 200) {
					that.filterData.push(data[0]);
		   		} else {
		   		}
		   	}
		   });

		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
				if (this.flag) {
					var e = this;
					e.setData({
						flag: false
					}), clearTimeout(t);
					var t = setTimeout(function() {
							e.setData({
								type: e.type,
								page: parseInt(e.page) + 1,
								rows: 10
							}), e.getOrderList()
						},
						500)
				}
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			//接收菜单结果
			confirm(e){
				console.info(e);
				console.info(this.filterData)
				var that = this;
				var post = this.post;

				e.value.forEach(function(v, k){

					if(that.filterData[k].type == "hierarchy")
					{
						var index = that.filterData[k].sub[e.index[k][0]]['index'];
						console.info(k, ' - ', index)
						console.info(v)
						switch (k) {
							case 0:
								post.category_id = e.value[k][2];
								break;
							case 1:
								switch (index) {
									case 'store_sales_num':
										post.sidx = 'store_sales_num';
										post.sord = e.value[k][0];
										break;
									case 'store_evaluation_rate':
										post.sidx = 'store_evaluation_rate';
										post.sord = e.value[k][0];
										break;
									case 'store_distance':
										post.sidx = 'distance';
										post.sord = e.value[k][0];
										break;
									case 'store_deliverycredit':
										post.sidx = 'store_deliverycredit';
										post.sord = e.value[k][0];
										break;
									default:
										break;
								}
								break;
							case 2:
								switch (index) {
									case 'near':
										post.distance = e.value[k][1];
										break;
								}
								break;
							case 3:
								switch (index) {
									case 'store_category_id':
										post.store_category_id = e.value[k][0];
										break;
								}
								break;
						}
					}
					else
					{
						e.value[k].forEach(function(ee,ii){
							var index = that.filterData[k].sub[ii]['index'];

							switch (index) {
								case 'contract_type_ids':
									post.contract_type_ids = JSON.stringify(e.value[k][ii]);
									break;
								case 'activity_type_ids':
									post.activity_type_ids = JSON.stringify(e.value[k][ii]);
									break;
								case 'price':
									post.price= e.value[k][ii];
									break;
								default:
									post = post;
									break;
							}
						})

					}

				})

				//e.value[0][2]; //分类
				console.info(post)

				this.setData({
					Info: [],
					page:1,
					ispage: true,
					post: post
				});

				that.getOrderList()

			},

			getOrderList: function() {
				var that = this;
				var params = {
					lat: that.latitude,
					lng: that.longitude,
					page: that.page,
					rows: that.rows,
					sidx: 'purchase_order_time',
					sord: 'DESC',
					//store_type: 1,
					//store_id: that.options.store_id ? that.options.store_id : '',
					//store_category_id: that.options.store_category_id ? that.options.store_category_id : '',

					state_type: 1000,

					category_id : that.post.category_id,
					//price_range : that.price_range,
					
					approval_state: 1
				};
				
				that.$.request({
					url: this.Config.URL.hall.purchase_order_lists,
					data: params,
					dataType: 'json',
					success: function(data, status, msg, code) {
						if (status == 200) {
							for (let i = 0; i < data.items.length; i++) {
								data.items[i]['distance'] = that.$.distanceFormat(data.items[i]['distance']);
							}
							that.setData({
								isdata: true
							});
							if (data.page >= data.total) {
								that.setData({
									flag: false,
									ispage: false,
									Info: that.Info.concat(data.items)
								})
							} else {
								that.setData({
									flag: true,
									ispage: true,
									Info: that.Info.concat(data.items)
								})
							}

						} else {
							that.setData({
								flag: false,
								ispage: false
							});
						}
					}
				});
			},
			getPurchasedIndex: function() {
				var that = this;
				var params = {
					
				};
			
				that.$.request({
					url: this.Config.URL.hall.user_purchase_order_index,
					data: params,
					success: function(data, status, msg, code) {
						if (status == 200) {
							that.setData({
								productUnit: data.product_unit,
							})
						}
					}
				});
			},
			// 跳到任务详情
			taskInfo:function(order_id){
				console.log(9999)
				uni.navigateTo({
					url: '/hall/purchase/detail?kind_id=1&&order_id=' + order_id
				})
			}
		}

	}
</script>

<style>
	/*每个页面公共css */
	@import "../../styles/colorui/main.css";
	@import "../../styles/colorui/icon.css";
	@import "../../styles/colorui/animation.css";


	/* 列表 */
	.cu-list{
		z-index: 1000000;
	}
	.cu-list.menu-avatar>.cu-item{
		height: 160rpx;
	}
	.platform-cut{
		margin-left: 20rpx;
	}
	.cu-platform{
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}
	.cu-cate{
		font-size: 24rpx;
		height: auto;
	}
	.margin-top-footer{
		height: 40rpx;
	}

	.m-nearbylist{
		/* padding-top: 90rpx; */
	}
</style>
