<template>
  <div class="wrap">
    <div v-if="gridData.Rows && gridData.Rows.length > 0">
      <el-row v-for="(row, index) in gridData.Rows" :key="index">
        <el-col
          v-for="(col, index) in row.RowGrids"
          :key="index"
          :span="calcColCount(row)"
        >
          <div class="grid-content bg-purple-dark shelf-grid-wrap">
            <div class="shelf-grid">
              {{ `${row.RowSort}层  ${col.Name}格` }}
            </div>
            <el-checkbox
              v-model="col.isChecked"
              class="margin-lr-sm"
              label="选择"
              border
              :true-label="col.Id"
              :false-label="col.Id * -1"
            ></el-checkbox>
            <el-button @click="$emit('printShelfLable',col)">打印</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div v-else class="no-data">无货架数据</div>
  </div>
</template>
<script>
export default {
  props: {
    gridData: {
      type: Object,
    },
  },
  data: function () {
    return {
      
    };
  },
  methods: {
    checkAll(e){
      for(let r of this.gridData.Rows){
        for(let c of r.RowGrids){
          c.isChecked=e;
        }
      }
    },
    // checkedChanged(id) {
    //   if (id > 0) {
    //     this.$emit("gridChecked", id);
    //   } else {
    //     id *= -1;
    //     this.$emit("gridCancelChecked", id);
    //   }
    // },
    getCheckedGrids(){
      let checkedGrids=[];
      for(let r of this.gridData.Rows){
        for(let c of r.RowGrids){
          if(c.isChecked){
            checkedGrids.push(c);
          }
        }
      }
      return checkedGrids;
    },
    calcColCount(row) {
      let gridCount = row.RowGrids && row.RowGrids.length;
      gridCount = gridCount > 0 ? gridCount : 1;
      const span = Math.floor(24 / gridCount);
      return span > 0 ? span : 24;
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  min-height: 400px;
}
.shelf-grid-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  margin: 5px;
  font-size: 20px;
  background-color: #eee;
}

.no-data {
  text-align: center;
  font-size: 26px;
  color: #ccc;
}
</style>
