<template>
  <div class="bolt">
    <el-col :span="12" style="position: relative;">
      <div style="font-size: 25px;margin: auto;width: 120px">
        临时库存
      </div>
      <div class="borderLeft" />
      <div style="position: absolute;  border-right: 1px solid #000000;width: 10px; height: 170px;left: 362px;top: 0px" />
      <div class="borderLeft" style="top: 105px;" />
      <div v-for="item in temporaryStock" :id="item.id" :key="item.id" :class="changClass(item)">
        <div style="margin-left: 25px">
          {{ item.label }}
        </div>
      </div>
    </el-col>
    <el-col :span="12" style="position: relative">
      <div style="font-size: 25px;margin: auto;width: 90px">
        上料
      </div>
      <div class="borderRight" style="left: 18px;" />
      <div class="borderRight" style="left: 138px;" />
      <div class="borderRight" style="left: 258px;" />
      <div style="z-index: 999;position: relative">
        <div v-for="item in feedingRegion" :id="item.id" :key="item.id" :class="changClass(item)" @click="changeStatus(item)">
          <div style="margin-left: 25px">
            {{ item.label }}
          </div>
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'MesWebFun22',
  data() {
    return {
      temporaryStock: [
        {
          id: 'one',
          label: 1,
          status: 2
        }, {
          id: 'two',
          label: 2,
          status: 2
        }, {
          id: 'three',
          label: 3,
          status: 0
        }, {
          id: 'four',
          label: 4,
          status: 0
        }, {
          id: 'five',
          label: 5,
          status: 2
        }, {
          id: 'six',
          label: 6,
          status: 2
        }
      ],
      feedingRegion: [
        {
          id: 'oneRegion',
          label: 1,
          status: 0
        }, {
          id: 'threeRegion',
          label: 3,
          status: 0
        }, {
          id: 'fiveRegion',
          label: 5,
          status: 2
        }, {
          id: 'twoRegion',
          label: 2,
          status: 2
        }, {
          id: 'fourRegion',
          label: 4,
          status: 0
        }, {
          id: 'sixRegion',
          label: 6,
          status: 0
        }
      ]
    }
  },
  methods: {
    changClass(item) {
      if (item.status === 0) {
        return 'dd'
      } else if (item.status === 2) {
        return 'green'
      } else if (item.status === 3) {
        return 'green_ll'
      }
    },
    changeStatus(item) {
      for (let i = 0; i < this.feedingRegion.length; i++) {
        if (this.feedingRegion[i].id === item.id) {
          if (this.feedingRegion[i].status === 0) {
            this.feedingRegion[i].status = 3
          } else if (this.feedingRegion[i].status === 3) {
            this.feedingRegion[i].status = 0
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.bolt{
  width: 100%;
  height: 169px;
  margin-top: 3px;
}
.green_ll{
  z-index: 999;
  float: left;
  width: 60px;
  height: 60px;
  margin: 5px 30px 10px 30px;
  border-radius: 50%;
  font-size: 19px;
  line-height: 60px;
  background-size: 100% 100%;
  background-image: url("../../../assets/image/green_bolt.gif")
}
.green{
  z-index: 999;
  float: left;
  width: 60px;
  height: 60px;
  margin: 5px 30px 10px 30px;
  border-radius: 50%;
  font-size: 19px;
  line-height: 60px;
  background-size: 100% 100%;
  background-image: url("../../../assets/image/green.png")
}
.dd{
  z-index: 999;
  float: left;
  width: 60px;
  height: 60px;
  margin: 5px 30px 10px 30px;
  border-radius: 50%;
  font-size: 19px;
  line-height: 60px;
  background-size: 100% 100%;
  background-image: url("../../../assets/image/Init.png")
}
.borderRight{
  position: absolute;
  border: 2px solid #bfbfbf;
  width: 80px;
  height: 140px;
  border-radius: 20px;
}
.borderLeft{
  position: absolute;
  border: 2px solid #bfbfbf;
  width: 320px;
  height: 65px;
  left: 18px;
  border-radius: 20px
}
</style>
