<template>
  <div class="order-body">
    <el-row>
      <el-col v-bind="styleResponsive ? { lg: 16, md: 16 } : { span: 16 }">
         <el-form class="search-form">
			 <el-row :gutter="24">
				 <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
				   <el-form-item label="生产工单号:" label-width="110px">
				     <el-input v-model="where.ddh" placeholder="请输入"></el-input>
				   </el-form-item>
				 </el-col>
				 <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
				   <el-form-item label="物料编码:"  label-width="75px">
				     <el-input v-model="where.ddh" placeholder="请输入"></el-input>
				   </el-form-item>
				 </el-col>
				 <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
				   <el-form-item label="牌号:"  label-width="45px">
				     <el-input v-model="where.ddh" placeholder="请输入"></el-input>
				   </el-form-item>
				 </el-col>
				 <el-col v-bind="styleResponsive ? { lg: 9, md: 12 } : { span: 9 }">
				   <el-form-item label="要求完成时间:" label-width="100px">
				     <el-date-picker
				         style="width: 100%;"
				     	v-model="where.time"
				     	type="daterange"
				     	range-separator="至"
				     	start-placeholder="开始日期"
				     	end-placeholder="结束日期"
				     	value-format="yyyy-MM-dd HH:mm:ss"
				     	:default-time="['00:00:00', '23:59:59']"
				     	>
				     </el-date-picker>
				   </el-form-item>
				 </el-col>
				 <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
				   <el-form-item label="" label-width="25px">
				      <div class="ele-form-actions">
						  <el-link @click="goOrder" type="success">已排产工单</el-link>
						  <el-button type="success" @click="createPlan">创建计划</el-button>
					  </div>
				   </el-form-item>
				 </el-col>
			 </el-row>
		 </el-form>
		 <el-table
		   :data="tableData"
		   class="table"
		   border
		 >    
		      <el-table-column align="center" type="selection" width="55">
		      </el-table-column>
		 	  <el-table-column label="序号" align="center" type="index"  width="55">
		 	  </el-table-column>
		 	  <el-table-column label="生产工单号" align="center" width="100" show-overflow-tooltip>
				  <template slot-scope="scope">
				    <el-link @click="openDetail(scope.row)">{{ scope.row.code }}</el-link>
				  </template>
		 	  </el-table-column>
		 	  <el-table-column label="工单开始时间" align="center"  width="120">
		 	  </el-table-column>
		 	  <el-table-column label="物料编码" align="center">
		 	  </el-table-column>
		 	  <el-table-column label="牌号" align="center">
		 	  </el-table-column>
		 	  <el-table-column label="物料编码" align="center">
		 	  </el-table-column>
		 	  <el-table-column label="物料名称" align="center" width="120">
		 	  </el-table-column>
		 	  <el-table-column label="欠交数量(KG)" align="center" width="120">
		 	  </el-table-column>
		 	  <el-table-column label="物料要求完成时间" align="center" width="180">
		 	  </el-table-column>
		 	  <el-table-column label="生产班组" align="center" width="120">
		 	  </el-table-column>
		 </el-table>
		 <div class="pagination_wrapper">
		   <el-pagination
		     background
		     layout="total, sizes, prev, pager, next, jumper"
		     :total="total"
		     :page-sizes="[10, 15, 20, 30, 50, 100]"
		     :page-size.sync="pagination.size"
		     :current-page.sync="pagination.page"
		     @current-change="handleCurrentChange"
		     @size-change="handleSizeChange"
		   >
		   </el-pagination>
		 </div>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 8, md: 8 } : { span: 8 }">
           <div class="top-title">
			   <div class="ele-page-header ele-cell">
					<div class="ele-cell header-round">
						<div class="round-left"></div>
						<div class="round-left round-right"></div>
					</div>
					<div class="ele-page-title">本年度用料TOP10</div>
			   </div>
			   <div class="top-unit">单位：吨</div>
		   </div>
		   <div class="top-list">
			   <div class="list-item" v-for="(item,index) in 10" :key="index">
				   <div class="item-index" :style="index<3?'background: #eda54e;':''">
					   <span>NO.{{index+1}}</span>
					   <div class="index-arrow" :style="index<3?'border-top: 15px solid #eda54e;':''"></div>
				   </div>
				   <div class="item-name">AR31</div>
				   <div class="item-number">268.25</div>
				   <div class="item-progress">
					   <el-progress
					     :percentage="78"
					     :show-text="false"
					     :stroke-width="10"
					     color="#13c2c2"
					   />
				   </div>
			   </div>
		   </div>
      </el-col>
    </el-row>
	<el-divider />
	
	<!-- 创建计划弹窗 -->
	<CreateBatch ref="createRef"></CreateBatch>
	<!-- 工单详情 -->
	<DetailDialog ref="orderDetail"></DetailDialog>
  </div>
</template>

<script>
  import CreateBatch from '@/components/CreatePlan/CreateBatch.vue'
  import DetailDialog from './DetailDialog.vue'
  export default {
	  components:{
		  CreateBatch,
		  DetailDialog
	  },
    data() {
      return {
         where:{},
		 tableData:[
			 {code:'123445555',name:'测试数据',id:1}
		 ],
		 pagination:{
			 page:1,
			 size:10
		 },
		 total:0
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      
    },
    methods: {
	  createPlan(){
		  this.$refs.createRef.open()
	  },
      goOrder(){
		 this.$router.push({
			 path:'/materialStatistics/outputOrder'
		 }) 
	  },
	  openDetail(row){
		  this.$refs.orderDetail.open(row)
	  },
      // 分页器方法
      handleCurrentChange (page) {
        this.pagination.page = page
        // this.getList()
      },
      handleSizeChange (size) {
        this.pagination.size = size
        this.pagination.page = 1
        // this.getList()
      },
    }
  };
</script>

<style lang="scss" scoped>
	.ele-page-header{
		border: none;
	}
	.order-body{
		background: #fff;
		padding: 20px 0;
	}
    .ele-form-actions{
		display:flex;
		align-items: center;
		justify-content: flex-start;
	}
	.search-form .el-row .el-col{
		padding-left: 8px!important;
		padding-right: 8px!important;
	}
	.table{
		margin: 0 0 0 10px;
		width: 100%;
		// height: 300px;
	}
	.pagination_wrapper{
		margin:10px auto
	}
	.top-title{
		display:flex;
		align-items:center;
		justify-content:space-between;
		.round-left{
			 width: 16px;
			 height: 16px;
			 border-radius: 50%;
			 background: #1891FF;
		}
		.round-right{
			 opacity: 0.5;
			 margin: 0 10px 0 -5px;
		}
		.top-unit{
			margin-right: 15px;
		}
	}
	.top-list{
		width: 100%;
		margin:10px 0 0 30px;
		.list-item{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 20px;
		}
		.item-index{
			width: 50px;
			height: 22px;
			border-radius: 4px;
			background: #66bafa;
			color: #fff;
			line-height: 22px;
			text-indent: 6px;
			display: flex;
			align-items: center;
			position: relative;
			.index-arrow{
				width: 0;
				height: 0;
				border-top: 15px solid #66bafa; 
				border-left: 15px solid transparent; 
				transform: rotate(45deg);
				position: absolute;
				right: -7px;
				top: 4px;
			}
		}

		.item-name{
			width: 60px;
			margin: 0 10px 0 20px;
		}
		.item-number{
			width: 60px;
		}
		.item-progress{
			width: 160px;
			box-sizing: border-box;
			margin-left: 15px;
		}
	}
</style>
