<template>
	<view class="page">
		<view class="uni-flex uni-row mb">
			<!-- <view class="text" style="-webkit-flex: 6;flex: 6;">
				<sl-filter :ref="'slFilter'" :topFixed="fixed" :menuList.sync="menuList" @result="getFilter"></sl-filter>
			</view> -->
			<view class="otherFixed99" >
				<view class="text "  @click="selectDevice">{{deviceName.name}}</view>
				<view class="text "  @click="selectMaterial">{{materielName.name}}</view>
				<view class="text" @click="filterDate">{{timeData.begin==''?'派工时间':(timeData.begin+'~'+timeData.end)}}</view>
			</view>
		</view>
		<view class="example-body" v-if="listCards&&listCards.length>0">
			<view v-for="(item,index) in listCards" :key="index" class="example-box" style="position: relative;flex: 1;" @click="goStartWorking(item.id)">
				<dev-block :title="item.title" :titleNumber="item.titleNumber" :note="item.note" :note1="item.note1" :extra="item.extra" :tagType="item.tagType"
				 :contentList="item.contentList" ></dev-block>

			</view>
		</view>
		<view class="example-body" v-else>
			<no-record></no-record>
		</view>
		<uni-calendar ref="calendar" :lunar="false" :range="true" @confirm="confirmDate" />
		<!-- <mpvue-picker ref="mpvuePicker" mode="multiLinkageSelector" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="pickerConfirm" :pickerValueArray="deptArray"></mpvue-picker> -->
		<uni-load-more :status="loading_status"></uni-load-more>
		<view class="goHome" @click='goMain()'>
			<img src="../../static/img/gohome.png">
		</view>
		<view class="mysearchlist" style="z-index: 10000;">
			<chooseEquipmentSingle ref="mysearchlist" 
				:showsearch.sync="show_search_user3"
				:device_type='device_type'
				:itemInfo_.sync="search_value_user3">
			</chooseEquipmentSingle>
		</view>
		<chooseMaterialSingle ref="mysearchlist"
			:showsearch.sync="show_search_user"
			:itemInfo_.sync="search_value_user">
		</chooseMaterialSingle>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import chooseMaterialSingle from '@/components/xinsoft-search-list/chooseMaterialSingle.vue'
	import chooseEquipmentSingle from '@/components/xinsoft-search-list/chooseEquipmentSingle.vue';
	import slFilter from '@/components/xinsoft-sl-filter/xinsoft-sl-filter.vue';
	import devBlock from '@/components/xinsoft-dev-block/xinsoft-dev-block.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import noRecord from '@/components/xinsoft-no-record/xinsoft-no-record';
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	// import jweixin from '@/jweixin-module/index.js';
	export default {
		components: {
			slFilter,
			devBlock,
			uniLoadMore,
			noRecord,
			uniCalendar,
			mpvuePicker,
			chooseMaterialSingle,
			chooseEquipmentSingle
		},
		data() {
			return {
				device_type:'',//设备类型
				pickerValueDefault: [0, 0],
				deepLength: 2,
				fixed: true,
				filterResult: {
					processCode: ''
				},
				menuList: [{
						'title': '设备',
						'isMutiple': false,
						'key': 'deviceName',
						'detailList': [],
						'defaultSelectedIndex': []
					},
					{
						'title': '产品名称',
						'isMutiple': false,
						'key': 'materielName',
						'detailList': [],
						'defaultSelectedIndex': []
					}
				],
				show_search_user:false,
				search_value_user:[],
				show_search_user3:false,
				search_value_user3:[],
				operator: '',
				listCards: [],
				status: 237,
				pagenumber: 1, //当前第几页
				pagesize: 5, //每页加载数据条数
				loading_status: 'more', //more（loading前）、loading（loading中）、noMore（没有更多了）
				//日历变量。
				timeData: {
					begin: "",
					end: ''
				},
				deviceName:{
					value:'',
					name:'设备'
				},
				materielName:{
					value:'',
					name:'产品名称'
				},
			}
		},
		onLoad() {
			//初始化当前 加班人为默认当前登陆人。
			var userInfo  = uni.getStorageSync('userInfo');
			this.operator = userInfo.userId
		},
		mounted() {

		},
		created() {
			this.getDispatch()			
			// 初始化设备名称
			var _this = this;
			this.$http.request({
				url: 'apis/device/allDevice',
			}).then(res => {
				if (res.statusCode == '200') {
					_this.menuList[0].detailList = [{
						'title': '不限',
						'value': ''
					}];
					var useType = res.data.data;
					for (let i = 0; i < useType.length; i++) {
						var myVal = {
							'title': useType[i].name,
							'value': useType[i].id
						}
						_this.menuList[0].detailList.push(myVal);
					}
				}
			}).catch(err => {
				console.log(err);
			});
			// 初始化产品名品
			this.$http.request({
				url: '/apis/materiel/list',
				method: 'GET',
				params: {
					auditSign: 179,
					useStatus: 1
				}
			}).then(res=>{
				if (res.statusCode == '200') {
					_this.menuList[1].detailList = [{
						'title': '不限',
						'value': ''
					}];
					var useType = res.data.data.datas;
					for (let i = 0; i < useType.length; i++) {
						var myVal = {
							'title': useType[i].name,
							'value': useType[i].id
						}
						_this.menuList[1].detailList.push(myVal);
					}
				}
			}).catch(err => {
				console.log(err);
			});
		},
		//滚动到底部加载下一页
		onReachBottom(obj) {
			if (this.loading_status == 'noMore') {
				return false;
			}
			this.pagenumber++;
			this.getDispatch();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.listCards = [];
			this.pagenumber = 1;
			this.loading_status = "more";
			this.getDispatch();

		},
		watch: {
			search_value_user3(newv){
				this.$set(this.deviceName,'value',newv.id);
				this.$set(this.deviceName,'name',newv.name);
				// this.filterResult.deviceName = newv.name;
				// this.filterResult.deviceId = newv.id;
				this.listCards=[];
				this.pagenumber=1;
				this.loading_status="more";
				this.getDispatch();
			},
			search_value_user(newv){
				// this.$set(this.dataList[this.currentIndex],'operator',newv.userId);
				this.$set(this.materielName,'name',newv.name);
				this.$set(this.materielName,'value',newv.id);
				// this.filterResult.materielName = newv.name;
				// this.filterResult.materielId = newv.id;
				this.listCards=[];
				this.pagenumber=1;
				this.loading_status="more";
				this.getDispatch();
			},
		},
		methods: {
			
			// 选择设备
			selectDevice(){
				this.show_search_user3=true;
			},
			// 选择物料
			selectMaterial(){
				this.show_search_user=true;
			},
	
			getDispatch(n) {
				if(n==1){
					this.pagenumber=1
					this.listCards=[]
				}
				this.loading_status = "loading";
				// var filterRes = {};
				this.filterResult.pageno = this.pagenumber;
				this.filterResult.pagesize = this.pagesize;
				this.filterResult.status = this.status;
				this.filterResult.deviceId=this.deviceName.value;
				this.filterResult.operator=this.operator;
				this.filterResult.materielId=this.materielName.value;
				this.filterResult.createTime = this.timeData.begin;
				this.$http.request({
					url: 'apis/mes/dispatch/detailOfdisptch',
					params: this.filterResult,
				}).then(res => {
					uni.stopPullDownRefresh();
					if (!res.data.data) {
						this.loading_status = "noMore";
					} else if (res.data.data.datas.length < this.pagesize) {
						this.loading_status = "noMore";
					} else {
						this.loading_status = "more";
					}

					if (res.data.code == 0) {
						this.listCards = this.listCards.concat(this.formaterData(res.data.data.datas));
					}
				}).catch(err => {
					this.loading_status = "noMore";
				})
			},
			setTag(val) {
				if (val == 237) {
					return "106";
				} else if (val == 233) {
					return "108";
				} else if(val == 234) {
					return "110";
				}
				 else {
					return "107";
				}
			},

			formaterData(data) {
				var resData = [];
				data.forEach((vals, index) => {
					var combineJSON = {
						id: vals.dispatchId,
						title: "派工单" + ":" + vals.code,
						titleNumber: "派工时间" + ":" + vals.createTime,
						contentList: [{
								id: 1,
								isDouble: false,
								labelName: '产品名称',
								labelContent: vals.materielName
							},
							{
								id: 2,
								isDouble: false,
								labelName: '规格型号',
								labelContent: vals.specification
							},
							{
								id: 3,
								isDouble: true,
								labelName: '计划数量',
								labelContent: vals.planCount
							},
							{
								id: 4,
								isDouble: true,
								labelName: '设备',
								labelContent: vals.deviceName
							},
							{
								id: 5,
								isDouble: true,
								labelName: '工序',
								labelContent: vals.processName
							},
							{
								id: 6,
								isDouble: true,
								labelName: '操作工',
								labelContent: vals.operatorName
							},
							{
								id: 7,
								isDouble: false,
								labelName: '计划开工日期',
								labelContent: vals.startTime?vals.startTime.substr(0,10):''
							},
							{
								id: 8,
								isDouble: false,
								labelName: '计划完工日期',
								labelContent: vals.endTime?vals.endTime.substr(0,10):''
							},
							{
								id: 9,
								isDouble: false,
								labelName: '完工数量',
								labelContent: vals.completionCount
							},
							{
								id: 10,
								isDouble: false,
								labelName: '待制数量',
								labelContent: (vals.planCount-vals.completionCount)?(vals.planCount-vals.completionCount):''
							},
						],
						// note:(vals.status == 249 || vals.status == 233 )?'开工':'',
						note1: (vals.status == 249 || vals.status == 233 )?'用料采集':'',
						extra: vals.statusName,
						tagType: this.setTag(vals.status),
					}
					resData.push(combineJSON);
				});
				return resData;
			},
			
			// 前往工单明细
			goStartWorking(r) {
				console.log(r)
				uni.navigateTo({
				    url: 'startWorking?+id='+r
				});
			},
			

			//筛选条件
			getFilter(filterRes) {
				this.deviceName=filterRes.deviceName;
				this.materielName=filterRes.materielName;
				this.listCards=[];
				this.pagenumber=1;
				this.loading_status="more";
				this.getDispatch();				
			},
			/*
			 * 日历相关方法。
			 */
			filterDate() {
				this.$refs.calendar.open()
			},
			confirmDate(e) {
				if (e.range.begin && e.range.end) {
					this.timeData = {
						begin: e.range.begin + ' 00:00:00',
						end: e.range.end + ' 00:00:00'
					}
					this.listCards=[];
					this.pagenumber=1;
					this.loading_status="more";
					this.getDispatch();	
				}
			}
		},
	}
</script>

<style scoped>
	>>>.select-tab-fixed-top {
		left: 0;
		width: 50%;
		z-index: 2;
		white-space: nowrap
	}

	>>>.popup-layer {
		position: fixed;
		top: var(--window-top);
		margin-top: 40px;
	}
	.mb {
		margin-bottom: 50px;
	}
</style>
