<template>
	<view class="container">
		
		<view class="box">
			<view class="filter_container pl">
				<view class="search_container left">
					<input type="search" placeholder="请输入物料名称" v-model="filterResult.materielName"/>
				</view>
				
				<view class="filter_container left">
					<xinsoft-sl-filter  ref="slFilter"  :menuList.sync="menuList" @result="getFilter"></xinsoft-sl-filter>
				</view>
				<view>
					<button style="max-width:80px;min-width:80px" @click="search()" type="primary">查询</button>
				</view>
			</view>
			
			<t-table border=0>
				<t-tr font-size="16">
					<t-th style="min-width:200px;max-width:200px">工序计划单号</t-th>
					<t-th>工序</t-th>
					<t-th>物料</t-th>
					<t-th>批号</t-th>
					<t-th>优先级</t-th>
					<t-th style="min-width: 200px;max-width:200px">计划开工/计划完工日期</t-th>
					<t-th>已派/待派/计划</t-th>
					<t-th style="max-width:80px;min-width:80px">状态</t-th>
					<t-th style="max-width:80px;min-width:80px">是否委外</t-th>
					<t-th style="max-width:80px;min-width:80px">操作</t-th>
				</t-tr>
				<t-tr font-size="15" v-for="item in tableList" :key="item.id">
					<t-td style="min-width:200px;max-width:200px">{{item.workOrderNo}}</t-td>
					<t-td>{{item.processName}}</t-td>
					<t-td>{{item.materielName}}</t-td>
					<t-td>{{item.batchNo}}</t-td>
					<t-td>{{item.priorityName}}</t-td>
					<t-td style="min-width:200px;max-width:200px">{{item.planStartTime1}}/<br>{{item.planEndTime1}}</t-td>
					<t-td>{{item.alreadyCount}}/{{item.leftCount}}/{{item.planCount}}</t-td>
					<t-td style="max-width:80px;min-width:80px">{{item.isDispatchin}}</t-td>
					<t-td style="max-width:80px;min-width:80px"><span v-if="item.isOutsource==1">是</span><span v-else-if="item.isOutsource==0">否</span></t-td>
					<t-td style="max-width:80px;min-width:80px"><button @click="edit(item)" type="primary" :class="item.leftCount<=0?'disabled_btn':''">派工</button></t-td>
				</t-tr>
				<view v-if="show_nodata" class="nodata" style="text-align: center;font-size: 18px;color: #999;line-height: 40px;">暂无数据</view>

			</t-table>
			<loading class="loading_container" ref="loading" :custom="false" :shadeShow="false" :shadeClick="true" :type="1"
			 height="0">
			</loading>
		</view>
		<uni-pagination show-icon="true" :pageSize="pagesize" :total="total_pages" :current="pageno" class="pagination" @change="changePages"></uni-pagination>
	</view>
</template>

<script>
	import {
		config
	} from '../../request/js/config.js'
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
	import loading from '../../components/xuan-loading/xuan-loading.vue'
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			uniPagination,
			loading
		},
		data() {
			return {
				tableList: [],
				pageno: 1, //当前页数
				total_pages: 0, //总页数
				pagesize: 5, //1页几条数据
				show_nodata: false,
				deptId:"",
				filterResult: {

				},
				fixed: true,
				menuList: [{
						'title': '工序',
						'isMutiple': false,
						'key': 'processId',
						'detailList': [],
						'defaultSelectedIndex': []
					},
					{
						'title': '优先级',
						'isMutiple': false,
						'key': 'priority',
						'detailList': [],
						'defaultSelectedIndex': []
					}
				],
			}
		},
		onLoad() {},
		mounted() {
			let _this=this;
			uni.getStorage({
			    key: 'userInfo',
			    success: function (res) {
					_this.deptId=res.data.deptId
					},
				fail: function (res) {
					uni.redirectTo({
					    url: '../login/login'
					});
			    }
			});
			this.getList();
		},
		created() {
			// 初始化工序
			var _this = this;
			this.$http.request({
				url: '/apis/mes/process/processOfList',
			}).then(res => {
				if (res.statusCode == '200') {
					_this.menuList[0].detailList = [{
						'title': '不限',
						'value': ''
					}];
					var useType = res.data.data.datas
					console.log(useType)
					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/dict/getDictsByType',
			  params: {
			    type: 'priority'
			  },
			}).then(res=>{
				console.log(res.data)
				if(res.statusCode == '200'){
					_this.menuList[1].detailList = [
						{
							'title': '不限',
							'value': ''
						}
					];
					var useType = res.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);
			});
		},
		methods: {
			// 搜索
			search() {
				this.getList()
			},
			//筛选条件
			getFilter(filterRes) {
				this.filterResult.processId=filterRes.processId;
				this.filterResult.priority=filterRes.priority;			
			},
			//加载列表
			getList() {
				this.$refs.loading.open();
				this.filterResult.pageno = this.pageno;
				this.filterResult.pagesize = this.pagesize;
				this.filterResult.deptId = this.deptId
				this.filterResult.isDispatching = 1
				this.$http.request({
					url: '/apis/mes/dispatch/disptchOfList',
					method: 'post',
					params: this.filterResult,
					// params: {
					// 	pageno: this.pageno,
					// 	pagesize: this.pagesize,
					// 	deptId:this.deptId
					// },
				}).then(res => {
					this.$refs.loading.close();
					if (res) {
						if (res.data.code == 0) {
							this.tableList = res.data.data ? res.data.data.datas : []
							this.tableList.forEach(item=>{
								item.leftCount=item.planCount-item.alreadyCount
								item.planStartTime1=item.planStartTime?item.planStartTime.split(' ')[0]:"";
								item.planEndTime1=item.planEndTime?item.planEndTime.split(' ')[0]:"";
							})
							if (this.tableList.length == 0) {
								this.show_nodata = true
							}
							this.total_pages = res.data.data ? res.data.data.totalPages * this.pagesize : 0
						}
					}
				});
			},
			changePages(e) {
				this.pageno = e.current;
				this.getList();

			},
			edit(item) {
				if(item.leftCount<=0){
					return
				}
				uni.navigateTo({
					url: '/pages/dispatch/add?id=' + item.planItemId
				});
			}
		},
		onBackPress(options) { //取消默认的返回事件.
			uni.reLaunch({
				url: "/pages/index/index"
			});
			return true;
		}
	}
</script>

<style scoped>
	>>>.select-tab .select-tab-item uni-text, >>>.select-tab-fixed-top .select-tab-item uni-text {
	    font-size: 16px !important;
	}
	.search_btn {
		position: relative;
		width: 80px;
		height: 30px;
		right: 5px;
		top: 0px;
		font-size: 16px;
		line-height: 30px;
		text-align: center;
		color: #fff;
		background-color: #007BF8;

	}
	.right {
		float: right;
	}
	.pl {
		padding-left: 50px;
	}
	/* .right1 {
		float: right;
		right:0
	} */
	.left {
		float: left;
	}
	.filter_container {
		/* position: fixed; */
		width: 50%;
		top: var(--window-top);
		background-color: #fff;
		height: 40px;
		line-height: 40px;
		z-index: 2;
		padding-top: 7px;
		box-sizing: border-box;
	}
	.search_container {
		position: relative;
		top: 7px;
		padding-left: 15px;
		box-sizing: border-box;
		color: #bdbdbd;
		/* margin: auto; */
		width: 30%;
		height: 30px;
		background-color: #F6F6F6;
		border-radius: 26px;
		font-size: 16px;
		line-height: 30px;
		color: rgb(102, 102, 102);
		padding-top: 4px
	}
	
	
	.container {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f3f3f3;
		padding-top: 20px;
		box-sizing: border-box;
		padding-bottom: 60px;
	}

	.box {
		position: relative;
		height: 100%;
		width: calc(100% - 40px);
		margin: auto;
		box-sizing: border-box;
		background-color: #fff;
	}

	.t-table {
		position: relative;
		height: 100%;
		padding-bottom: 10px;
	}

	.t-table .t-tr:nth-child(2n) {
		background: #dce7f9;
		border-top: 1px solid #c3c3c3;
		border-bottom: 1px solid #c3c3c3;
	}

	.t-td {
		padding: 8px;
		box-sizing: border-box;
		width: calc((100% - 560px) / 5);
	}

	.t-tr {
		min-height: calc(100% / 9);
	}

	.t-th {
		padding: 8px 0;
		box-sizing: border-box;
		width: calc((100% - 560px) / 5);
	}

	uni-button[type=primary] {
		position: relative;
		height: 95%;
		max-height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
.disabled_btn{
	background-color: #e2e2e2;
	color: #bdbdbd;
}
	.pagination {
		position: absolute;
		bottom: 10px;
		margin: auto;
		left: 0;
		right: 0;

	}

	.loading_container {
		/* 	position: relative;
		width: 200px;
		height: 200px; */
	}
	uni-button{
		font-size: 15px;
	}
</style>
