<!--
 * @Author: your name
 * @Date: 2021-10-25 10:53:42
 * @LastEditTime: 2021-10-25 14:23:55
 * @LastEditors: Please set LastEditors
 * @Description: 一行
 * @FilePath: \hyyfScreen\src\views\Zoology\Select\SelectColumn.vue
-->
<template>
  <div class="select-column">
    <div class="title">{{ types[type] }}</div>
    <div v-for="count in floorCount" :key="list[count].name">
      <div class="floor" :class="{'floor-border': type === 0}">
        <div class="floor-num"><span>{{ count }}楼</span></div>
        <div class="block-div">{{ list[count*3 - 3].id }}</div>
        <div v-if="list[count*3 - 2] !== undefined" class="block-div">{{ list[count*3 - 2].id  }}</div>
        <div v-if="list[count*3 - 1] !== undefined" class="block-div">{{ list[count*3 - 1].id }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: Number,
      default: 0
    },
    floor: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      types: ['育肥', '保育'],
      floorCount: 0
    }
  },
  mounted() {
    this.floorCount = Math.ceil(this.list.length / 3)
  },
  watch: {
    list(newValue) {
      if (newValue) {
        this.floorCount = Math.floor(newValue.length / 3)
      }
    }
  }
}
</script>
<style scoped>
.select-column {
  padding: 0 5px;
  width: 180px;
}
.title {
  text-align: center;
  font-size: 14px;
}
.floor {
  font-size: 13px;
  display: block;
  text-align: left;
}
.floor-border {
  border-right: 2px solid #66FFFF;
}
.floor-num {
  width: 30px;
  display: inline-block;
}
.block-div {
  color: #fff;
  background-color: rgb(2,125,180);
  border-radius: 5px;
  width: 40px;
  height: 23px;
  margin: 3px;
  border: 1px solid #999;
  line-height: 23px;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
.block-div:hover {
  background-color: #66FFFF;
}
</style>
