<template>
    <el-table :data="tableData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange" v-if="tableShow">
			<el-table-column type="selection" width="40" align="center">
			</el-table-column>
 			 <template v-for="item in tableHeader">
        <table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></table-column>
        <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center"></el-table-column>
      </template>
    </el-table>
  </template>

 <script>
 import tableColumn from './tableColumn'
 export default {
   props: {
     // 表格的数据
     tableData: {
       type: Array,
       required: true
     },
     // 多级表头的数据
     tableHeader: {
       type: Array,
       required: true
		 },
		 sizeCode:{
			 type:Array,
			 required:true,
		 },
		 tableShow:{
			 type:Boolean,
			 required:true,
		 }
   },
   components: {
     tableColumn
	 },
	 updated(){
		 if(this.tableShow){
		 	this.tableCheckInit()
		 }
   },
	 mounted(){
		 this.tableCheckInit()
	 },
	 methods:{
			tableCheckInit(){
				this.$nextTick(()=>{
					this.tableData.forEach(row => {
						if(this.sizeCode.indexOf(row.Type) >= 0){
							this.$refs.multipleTable.toggleRowSelection(row,true);
						}
					})
				})
			},
			handleSelectionChange(val) {
				this.$emit('getCurrentSize',val)
			},
         tableCheckChange() {
             this.$nextTick(()=>{
                 for (let row of this.tableData) {
                     let flag = false;
                     for (let size of this.sizeCode) {
                         if (row.Type === size.Type) {
                             flag = true;
                         }
                     }
                     if (flag) {
                         this.$refs.multipleTable.toggleRowSelection(row, true);
                     } else {
                         this.$refs.multipleTable.toggleRowSelection(row, false);
                     }
                 }
             });
         }
	 },
	//  watch:{
	// 	 sizeCode(newName, oldName){
	// 			this.tableCheckInit()
	// 	 }
	//  }
 }
 </script>

 <style scoped>

 </style>