<template>
  <div class="box" style="display: flex; flex-direction: row; flex-wrap: wrap">
    <div
      :class="
        item.active
          ? 'box-' + item.status
          : item.flashing && item.status === 5
          ? 'unbox-flashing-' + item.status
          : 'unbox-' + item.status
      "
      :id="item.windturbineId"
      v-for="(item, index) in dataList"
      :key="index"
      @click="onSelectHandler(item)"
      @dblclick="sendMsg(item)"
    >
      {{ item.windturbineId }}
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
export default {
  components: {},
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    area: String,
  },
  mounted() {},
  updated() {},
  methods: {
    handleDeal(val) {
      let data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
      this.showVlaues = this.timeFn(data);
      // return `该状态共持续：`
    },

    timeFn(d1) {
      //di作为一个变量传进来
      //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
      var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date
      var dateEnd = new Date(); //获取当前时间
      var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      return `持续时长：${dayDiff !== 0 ? dayDiff + "天" : ""}${
        hours !== 0 ? hours + "小时" : ""
      }${minutes !== 0 ? minutes + "分钟" : ""}${
        seconds !== 0 ? seconds + "秒" : ""
      }`;
    },

    onSelectHandler(values) {
      if (this.area === "problem") {
        this.$emit("problem-click", values);
      } else {
        this.$emit("choose-click", values);
      }
    },

    sendMsg: function (itm) {
      // this.dialogVisible = true;
      this.$emit("on-click", itm);
      // this.currentWindturbine = itm;
    },
    handleClose() {
      this.dialogVisible = false;
      this.showSvg = false;
    },
  },
  data() {
    return {
      dialogVisible: false,
      showSvg: false,
      currentWindturbine: {},
      showVlaues: "",
      // station: [],
      options: {
        8: "检修",
        7: "故障维修",
        2: "场内受累检修",
        3: "场内受累故障",
        4: "场外受累电网",
        5: "场外受累天气",
      },
    };
  },
};
</script>
<style scoped>
.lock {
  width: 10px;
  height: 10px;
  position: relative;
  right: 2px;
  top: -15px;
}

.durationImg {
  width: 15px;
  height: 15px;
  position: relative;
  right: 5px;
  top: -15px;
}
.durationImgs {
  width: 15px;
  height: 15px;
  position: relative;
  right: 5px;
  top: -15px;
}
.lock-on {
  width: 0px;
  height: 0px;
  opacity: 0;
}

.locks:hover .lock-on {
  position: fixed;
  display: flex;
  align-items: center;
  width: 80px;
  height: 30px;
  border: 1px solid #999999;
  background-color: #999999;
  opacity: 1;
  color: #ffffff;
  z-index: 999;
}

.duration {
  width: 15px;
  height: 15px;
  position: relative;
  visibility: hidden;
}
.unbox-1:hover .duration {
  visibility: visible;
}
.unbox-2:hover .duration {
  visibility: visible;
}
.unbox-3:hover .duration {
  visibility: visible;
}
.unbox-4:hover .duration {
  visibility: visible;
}
.unbox-5:hover .duration {
  visibility: visible;
}
.unbox-6:hover .duration {
  visibility: visible;
}
.unbox-7:hover .duration {
  visibility: visible;
}

.lock_input {
  width: 140px;
  background-color: #292929;
  height: 40px;
  color: #ffffff;
}
.lock_inputs {
  width: 200px;
  background-color: #292929;
  height: 40px;
  color: #ffffff;
}
.box-0 {
  width: 117px;
  height: 20px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ffffff;
  justify-content: center;
}

.unbox-0 {
  width: 117px;
  height: 50px;
  color: #ffffff;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  border-radius: 0.37vh;
}

.left-0 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-0 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-0 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-0 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  /* color: rgba(255, 255, 255, 1); */
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
}

.box-1 {
  width: 117px;
  height: 20px;
  color: rgba(197, 48, 200, 1);
  border: 1px solid rgba(197, 48, 200, 1);
  background-color: rgba(197, 48, 200, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ef3af2;
  justify-content: center;
}

.unbox-1 {
  width: 117px;
  height: 20px;
  color: rgba(197, 48, 200, 1);
  font-size: 12px;
  justify-content: center;
  border: 1px solid rgba(197, 48, 200, 1);
  background-color: rgba(197, 48, 200, 0.2);
  display: flex;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  border-radius: 0.37vh;
}

.left-1 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(197, 48, 200, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-1 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(197, 48, 200, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-1 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(197, 48, 200, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-1 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(197, 48, 200, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-2 {
  width: 117px;
  height: 20px;
  color: rgba(05, 187, 76, 1);
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #09e45e;
  justify-content: center;
}

.unbox-2 {
  width: 117px;
  height: 20px;
  color: rgba(05, 187, 76, 1);
  font-size: 12px;
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.2);
  display: flex;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  justify-content: center;
  border-radius: 0.37vh;
}

.left-2 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-2 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-2 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-2 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-3 {
  width: 117px;
  height: 20px;
  color: rgba(05, 187, 76, 1);
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #09e45e;
  justify-content: center;
}

.unbox-3 {
  width: 117px;
  height: 20px;
  color: rgba(05, 187, 76, 1);
  font-size: 12px;
  border: 1px solid rgba(05, 187, 76, 1);
  background-color: rgba(05, 187, 76, 0.2);
  display: flex;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  justify-content: center;
  border-radius: 0.37vh;
}

.left-3 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-3 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-3 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-3 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(05, 187, 76, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-4 {
  width: 117px;
  height: 20px;
  color: rgba(75, 85, 174, 1);
  border: 1px solid rgba(75, 85, 174, 1);
  background-color: rgba(75, 85, 174, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #6876f2;
  justify-content: center;
}

.unbox-4 {
  width: 117px;
  height: 20px;
  /* color: #ffffff; */
  border: 1px solid rgba(75, 85, 174, 1);
  background-color: rgba(75, 85, 174, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(75, 85, 174, 1);
  border-radius: 0.37vh;
}

.left-4 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(75, 85, 174, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-4 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(75, 85, 174, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-4 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(75, 85, 174, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-4 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(75, 85, 174, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-5 {
  width: 117px;
  height: 20px;
  color: rgba(186, 50, 55, 1);
  border: 2px solid rgba(186, 50, 55, 1);
  background-color: rgba(186, 50, 55, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ff1313;
  justify-content: center;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

.unbox-flashing-5 {
  width: 117px;
  height: 20px;
  color: #ffffff;
  border: 1px solid rgba(186, 50, 55, 1);
  background-color: rgba(186, 50, 55, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  animation: fade 1600ms infinite;
  -webkit-animation: fade 1600ms infinite;
  border-radius: 0.37vh;
}

.unbox-5 {
  width: 117px;
  height: 20px;
  color: rgba(186, 50, 55, 1);
  font-size: 12px;
  border: 1px solid rgba(186, 50, 55, 1);
  background-color: rgba(186, 50, 55, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  border-radius: 0.37vh;
}

.left-5 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(186, 50, 55, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-5 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(186, 50, 55, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-5 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(186, 50, 55, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-5 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(186, 50, 55, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-6 {
  width: 117px;
  height: 20px;
  color: rgba(225, 125, 36, 1);
  border: 1px solid rgba(225, 125, 36, 1);
  background-color: rgba(225, 125, 36, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #f28627;
  justify-content: center;
}

.unbox-6 {
  width: 117px;
  height: 20px;
  color: rgba(225, 125, 36, 1);
  font-size: 12px;
  border: 1px solid rgba(225, 125, 36, 1);
  background-color: rgba(225, 125, 36, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  border-radius: 0.37vh;
}

.left-6 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(225, 125, 36, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-6 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(225, 125, 36, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-6 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(225, 125, 36, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-6 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(225, 125, 36, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-7 {
  width: 117px;
  height: 20px;
  color: rgba(96, 103, 105, 1);
  border: 1px solid rgba(96, 103, 105, 1);
  background-color: rgba(96, 103, 105, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 6px #ffffff;
  justify-content: center;
}

.unbox-7 {
  width: 117px;
  height: 20px;
  color: rgba(96, 103, 105, 1);
  font-size: 12px;
  border: 1px solid rgba(96, 103, 105, 1);
  background-color: rgba(96, 103, 105, 0.2);
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-right: 5px;
  margin-top: 10px;
  border-radius: 0.37vh;
}

.left-7 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(96, 103, 105, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.unleft-7 {
  width: 35%;
  height: 100%;
  font-size: 12px;
  color: rgba(96, 103, 105, 1);
  font-weight: 600;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-7 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(96, 103, 105, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unright-7 {
  width: 69%;
  height: 100%;
  font-size: 12px;
  color: rgba(96, 103, 105, 1);
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>