<!--
 * @Author: your name
 * @Date: 2021-10-26 14:46:34
 * @LastEditTime: 2021-11-04 15:37:42
 * @LastEditors: Please set LastEditors
 * @Description: 工作看板
 * @FilePath: \hyyfScreen\src\views\Production\board\WorkItems.vue
-->
<template>
  <div class="work-items">
    <div class="content">
      <div class="item" @click="getWorkInfo(1)">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon1"></div>
        </div>
        <div class="name">预警信息</div>
      </div>
      <div class="item" @click="getWorkInfo(5)">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon2"></div>
        </div>
        <div class="name">待配种</div>
      </div>
      <div class="item" @click="getWorkInfo(3)">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon3"></div>
        </div>
        <div class="name">待分娩</div>
      </div>
      <div class="item" @click="getWorkInfo(4)">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon4"></div>
        </div>
        <div class="name">待断奶</div>
      </div>
    </div>
    <div class="content">
      <div class="item" @click="getWorkInfo(5)">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon5"></div>
        </div>
        <div class="name">日常计划</div>
      </div>
      <div class="item" @click="getWorkInfo(6)">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon6"></div>
        </div>
        <div class="name">转舍记录</div>
      </div>
      <div class="item" @click="getWorkInfo(7)">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon7"></div>
        </div>
        <div class="name">保健计划</div>
      </div>
      <div class="item" @click="getWorkInfo(8)">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon8"></div>
        </div>
        <div class="name">免疫计划</div>
      </div>
    </div>
  </div>
</template>
<script>
import WorkItemBgc from './WorkItemBgc.vue'

export default {
  components: {
    WorkItemBgc
  },
  methods: {
    getWorkInfo(value) {
      this.$emit('workInfo', value)
    }
  },
}
</script>
<style scoped>
.work-items {
  width: 100%;
  height: 100%;
  /* color: #fff; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgb(3,16,50);
}
.content {
  padding: 10px 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.item {
  width: 21%;
  cursor: pointer;
}
/* 图案 */
.icon {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  position: relative;
}
.real-icon {
  width: 80%;
  height: 80%;
  position: absolute;
  top: calc(15%);
  left: calc(15%);
  background-size: contain;
}
.real-icon1 {
  background: url("../../../assets/Production/u5380.svg") no-repeat;
}
.real-icon2 {
  background: url("../../../assets/Production/u5364.svg") no-repeat;
}
.real-icon3 {
  background: url("../../../assets/Production/u5396.svg") no-repeat;
}
.real-icon4 {
  background: url("../../../assets/Production/u5412.svg") no-repeat;
}
.real-icon5 {
  background: url("../../../assets/Production/u5444.svg") no-repeat;
}
.real-icon6 {
  background: url("../../../assets/Production/u5428.svg") no-repeat;
}
.real-icon7 {
  background: url("../../../assets/Production/u5460.svg") no-repeat;
}
.real-icon8 {
  background: url("../../../assets/Production/u5477.svg") no-repeat;
  background-size: contain;
  /* width: 40%;
  height: 40%; */
  top: calc(10%);
  left: calc(10%);
}

.name {
  color: #fff;
  margin-top: 8px;
  font-size: 14px;
}
</style>
