<template>
	<view>
		
		<!-- 搜索 -->
		<view class="cu-bar search bg-white solid-bottom echo-fixed-top">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @input="bindInput" :adjust-position="false" type="text" placeholder="搜索姓名或手机号" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn shadow-blur round" @click="btnSearch()">搜索</button>
			</view>
			<view class="action">
				<button class="cu-btn bg-blue shadow-blur round" @tap="goLPage('/pages/broker/setentry?entryid=0')">新增</button>
			</view>
		</view>
		<view class="echo-fixed-top-empty"></view>
		
		<sl-filter :ref="'slFilter'" :topFixed="false" :isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor"
		 :menuList="menuList" @result="result"></sl-filter>

		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item,index) in plist" :key="index">
				<view class="content">
					<view class="text-black">{{item.realname}} - {{item.mobile}}</view>
					<view class="text-gray text-sm text-cut">意向工厂：{{item.reportFactory.title}}</view>
					<view class="text-gray text-sm text-cut">报备时间：{{item.createtime}}</view>
				</view>
				<view class="action basis-xs">
					<view class="text-grey text-sm">{{statusarr[item.status]}}</view>
					<view class="cu-tag bg-blue margin-top-xs" @tap="goLPage('/pages/broker/setentry?entryid='+item.id)">查看详情</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="pstatus"></uni-load-more>
		
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			slFilter,
			uniLoadMore
		},
		data() {
			return {
				brokerinfo: {},
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: [],
				searchval: "",
				
				themeColor: '#0081ff',
				titleColor: '#666666',
				filterResult: '',
				menuList: [{
						'title': '报备状态',
						'detailTitle': '请选择报备状态...',
						'isMutiple': false,
						'key': 'status',
						'detailList': []
					},
					{
						'title': '意向工厂',
				        'key': 'factoryid', 
				        'isMutiple': false,
				        'detailTitle': '请选择意向工厂...',
				        'detailList': []
					}
				],
				status: 0,
				factoryid: 0,
				statusarr: ['全部','待确认', '已确认', '已入职', '未通过']
			};
		},
		onLoad: function(){
			_this = this;
			_this.brokerinfo = uni.getStorageSync('brokerinfo') || false;
			if (_this.brokerinfo===false){
				uni.reLaunch({
					url: "/pages/my/my"
				});
				return false;
			}
			_this.$req.ajax({
				path: "broker/pageentry",
				data: {
					brokerid: _this.brokerinfo.id
				}
			}).then((data) => {
				_this.menuList[0].detailList = data.statuslist;
				_this.menuList[1].detailList = data.factorylist;
				_this.$refs.slFilter.resetMenuList(_this.menuList);
				_this.getMore();
			}).catch((err) => {
				console.log("err: " + JSON.stringify(err));
			});
			_this.getMore();
		},
		onPullDownRefresh: function() {
			_this.ppage = 1;
			_this.pstatus = 'more';
			_this.plist = [];
			_this.getMore();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			bindInput: function(e) {
				_this.searchval = e.detail.value;
			},
			btnSearch: function() {
				_this.pageRefresh();
			},
			getMore: function() {
				_this.$req.ajax({
					path: "broker/listentry",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						brokerid: _this.brokerinfo.id,
						status: _this.status,
						factoryid: _this.factoryid,
						searchval: _this.searchval
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			
			result: function(e) {
				_this.status = e.status;
				_this.factoryid = e.factoryid;
				_this.pageRefresh();
			},
			
			goLPage: function(pageurl) {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo===false){
					return false;
				}
				uni.navigateTo({
					url: pageurl
				});
			},
			
			goNavPage: function(pageurl) {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo===false){
					return false;
				}
				uni.redirectTo({
					url: pageurl
				});
			},
		}
	}
</script>

<style>
	.cu-list.menu-avatar .cu-item{ height: 170rpx !important; }
	
	.cu-list.menu-avatar>.cu-item .content {
		left: 30rpx;
		width: calc(100% - 96rpx - 60rpx - 30rpx - 20rpx);
	}
</style>