<template>
  <ele-modal
    :visible.sync="visible"
    title="订单组合"
    width="70vw"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
		<el-row :gutter="15">
			<el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
			  <el-form-item label="组合编码:">
			     <el-input clearable :maxlength="20" v-model="form.ddh" disabled/>
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 16, md: 16 } : { span: 16 }">
			   <div class="modal-word">
				   <div class="word-div">累计交付数量  1000</div>
				   <div class="word-div">累计未排产数量  600</div>
			   </div>
			</el-col>
		</el-row>
		<el-table
		  :data="form.tableList"
		  border
		>
		  <el-table-column label="序号" align="center" width="60">
		    <template slot-scope="scope">
		      <span>{{ scope.$index + 1 }}</span>
		    </template>
		  </el-table-column>
		  <el-table-column label="销售订单号" align="center" prop="name">
		  </el-table-column>
		  <el-table-column label="行号" align="center" prop="name">
		  </el-table-column>
		  <el-table-column label="订单类型" align="center" prop="model">
		  </el-table-column>
		  <el-table-column label="交付数量" align="center" prop="num">
		  </el-table-column>
		  <el-table-column label="是否排产" align="center" prop="model">
		  </el-table-column>
		  <el-table-column label="下达时间" align="center" prop="model">
		  </el-table-column>
		  <el-table-column label="交付日期" align="center" prop="model">
		  </el-table-column>
		  <el-table-column label="客户名称" align="center" prop="model">
		  </el-table-column>		 
		  <el-table-column label="交换要求" align="center" prop="measuringUnit">
		  </el-table-column>
		  <el-table-column label="操作" align="center" width="70">
		    <template slot-scope="scope">
		      <el-button
		        type="text"
		        @click="handleDeleteItem(scope.$index)"
		        >删除</el-button
		      >
		    </template>
		  </el-table-column>
		</el-table>
    </el-form>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">
        确定
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
	export default {
    data() {
      return {
        visible: false,
		tableList:[],
		loading:false,
		form:{
			tableList:[
				{name:'122',model:'型号1'},
				{name:'222',model:'型号2'}
			]
		},
			// 表单验证规则
			rules: {
				date: [
					{
						required: true,
						message: '请选择交付日期',
						trigger: 'change'
					}
				]
			},
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created(){
    },
    methods: {
	  open () {
	    this.visible = true;
	  },
      cancel () {
		this.form = {
			tableList:[]
		}
		this.$refs.form.clearValidate();
        this.visible = false;
      },
	  // 删除产品
	  handleDeleteItem (index) {
	    this.form.tableList.splice(index, 1)
	  },
	  /* 保存编辑 */
	  save() {
	    this.$refs.form.validate((valid) => {
	      if (!valid) {
	        return false;
	      }
	    });
	  },
	  
    }
  };
</script>
<style lang="scss" scoped>
	.modal-word{
		display: flex;
		align-items: center;
		justify-content:flex-end;
	}
	.word-div{
		margin-right: 20px;
	}
</style>