<!--
 * @Author: your name
 * @Date: 2021-10-26 14:46:34
 * @LastEditTime: 2021-11-30 08:56:34
 * @LastEditors: Please set LastEditors
 * @Description: 工作看板
 * @FilePath: \hyyfScreen\src\views\Production\board\WorkItems.vue
-->
<template>
  <div class="work-items">
    <div class="content">
      <div class="item">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon1"></div>
          <div class="span">
            <span>{{ workPlans.warning }}</span>
          </div>
        </div>
        <div class="name">预警信息</div>
      </div>
      <div class="item">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon2"></div>
          <div class="span">
            <span>{{ workPlans.hybridization }}</span>
          </div>
        </div>
        <div class="name">待配种</div>
      </div>
      <div class="item">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon3"></div>
          <div class="span">
            <span>{{ workPlans.delivery }}</span>
          </div>
        </div>
        <div class="name">待分娩</div>
      </div>
      <div class="item">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon4"></div>
          <div class="span">
            <span>{{ workPlans.weaning }}</span>
          </div>
        </div>
        <div class="name">待断奶</div>
      </div>
    </div>
    <div class="content">
      <div class="item">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon5"></div>
          <div class="span">
            <span>{{ workPlans.dayPlan }}</span>
          </div>
        </div>
        <div class="name">日常计划</div>
      </div>
      <div class="item">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon6"></div>
          <div class="span">
            <span>{{ workPlans.turnPlan }}</span>
          </div>
        </div>
        <div class="name">转舍记录</div>
      </div>
      <div class="item">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon7"></div>
          <div class="span">
            <span>{{ workPlans.healthPlan }}</span>
          </div>
        </div>
        <div class="name">普免计划</div>
      </div>
      <div class="item">
        <div class="icon">
          <work-item-bgc></work-item-bgc>
          <div class="real-icon real-icon8"></div>
          <div class="span">
            <span>{{ workPlans.immunePlan }}</span>
          </div>
        </div>
        <div class="name">免疫计划</div>
      </div>
    </div>
  </div>
</template>
<script>
import WorkItemBgc from "./WorkItemBgc.vue";

export default {
  props: {
    workPlans: {
      type: Object,
      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: 40%;
  height: 40%;
  position: absolute;
  top: calc(15%);
  left: calc(30%);
}
.real-icon1 {
  background: url("../../../assets/Production/u5380.svg") no-repeat;
  background-size: contain;
}
.real-icon2 {
  background: url("../../../assets/Production/u5364.svg") no-repeat;
  background-size: contain;
}
.real-icon3 {
  background: url("../../../assets/Production/u5396.svg") no-repeat;
  background-size: contain;
}
.real-icon4 {
  background: url("../../../assets/Production/u5412.svg") no-repeat;
  background-size: contain;
}
.real-icon5 {
  background: url("../../../assets/Production/u5444.svg") no-repeat;
  background-size: contain;
}
.real-icon6 {
  background: url("../../../assets/Production/u5428.svg") no-repeat;
  background-size: contain;
}
.real-icon7 {
  background: url("../../../assets/Production/u5460.svg") no-repeat;
  background-size: contain;
}
.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;
  text-align: center;
}

/* 数值 */
.span {
  font-size: 18px;
  position: absolute;
  color: #fff;
  top: calc(60%);
  /* 水平居中 */
  width: 100%;
  text-align: center;
}
</style>
