<template>
  <div class="ele-body">
	<div class="body-top">
		<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">物料统计</div>
		</div>
		<el-form label-width="90px">
			<el-row :gutter="15">
				<el-col :span="6">
				  <el-form-item label-width="0px">
				     <el-input @click.native="chooseMateriel" v-model="form.ddh"/>
				  </el-form-item>
				</el-col>
				<el-col :span="8">
				  <el-form-item label="生产版本:">
				       <el-select v-model="form.version" placeholder="请选择">
				         <el-option
				           v-for="item in options"
				           :key="item.value"
				           :label="item.label"
				           :value="item.value">
				         </el-option>
				       </el-select>
				  </el-form-item>
				</el-col>
				<el-col :span="8">
				  <el-form-item label="年份:">
				     <el-select v-model="form.year" placeholder="请选择">
				       <el-option
				         v-for="item in yearsList"
				         :key="item.value"
				         :label="item.label"
				         :value="item.value">
				       </el-option>
				     </el-select>
				  </el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
    <!-- 物料统计 -->
	<material-card />
	<!-- 待配料生产工单 -->
	<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">待配料生产工单</div>
	</div>
	<order-card />
	<!-- 欠交配料汇总 -->
	<collect-card />
	<!-- 选择物料弹窗 -->
	<MaterialDialog ref="equipmentRefs"></MaterialDialog>
  </div>
</template>

<script>
  import MaterialDialog from './components/MaterialDialog.vue'
  import MaterialCard from './components/material-card.vue';
  import OrderCard from './components/order-card.vue';
  import CollectCard from './components/collect-card.vue';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    mixins: [dictMixins],
    components: {
		MaterialDialog,
		MaterialCard,
		OrderCard,
		CollectCard
    },
    data () {
      return {
         loading:false,
		 form:{},
		 options:[],
		 yearsList:[],
		 saleChartOption: {}
      };
    },
    computed: {
    },
    created () {
      this.initYears()
    },
    methods: {
		chooseMateriel(){
			this.$refs.equipmentRefs.open()
		},
		
		//设置日期列表
		initYears(){
			var myDate = new Date;
			var year = myDate.getFullYear();//获取当前年
			this.initSelectYear(year)
		},
		initSelectYear(year){
			this.yearsList = [];
			for(let i=0;i<10;i++){
			   this.yearsList.push({value:(year - i),label:(year - i)+ "年"});
			}
		}
    }
  };
</script>

<style lang="scss" scoped>
	.body-top{
		display: flex;
		align-items:center; 
		justify-content:flex-start;
		background: #fff;
	}
	.body-top .el-form{
		margin-left: -15px;
	}
	.body-top .el-form .el-form-item{
		margin-bottom: 0;
	}
     .round-left{
		 width: 16px;
		 height: 16px;
		 border-radius: 50%;
		 background: #1891FF;
	 }
	 .round-right{
		 opacity: 0.5;
		 margin: 0 10px 0 -5px;
	 }
</style>


