<template>
  <DragabbleContainer class="isolate-area-1">
    <SmallBox2
      v-for="rd in rdata"
      :key="rd.icon"
      :icon="rd.icon"
      :title="rd.title"
      :value="rd.value"
    ></SmallBox2>
  </DragabbleContainer>
</template>

<script>
import DragabbleContainer from "../layout/DragableContainer.vue";
import SmallBox2 from "../common/SmallBox2.vue";
import { mapState } from "vuex";

let timeFun = null

export default {
  name: "IsolateArea--1",
  components: { DragabbleContainer, SmallBox2 },
  data() {
    return {
      rdata: [
        // { icon: "temp", title: "车间温度", value: "27℃" },
        { icon: "fire", title: "当前火向", value: "" },
        { icon: "clock", title: "换火时间", value: "20分" },
        { icon: "sand", title: "剩余时间", value: "0" },
      ],
    };
  },
  watch: {
    fireDirection: function(val) {
      this.$set(this.rdata[0], 'value', val)
    },
    fireChangeTime: function(val) {
      this.$set(this.rdata[1], 'value', val)
    },
    lastFireChangeTime: function(val) {
      let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
      if (timeFun) clearInterval(timeFun)
      timeFun = setInterval(() => {
        if (sec > 0) sec -= 1
        else {
          if (min > 0) {
            sec = 59
            min -= 1
          } else {
            if (timeFun) clearInterval(timeFun)
          }
        }
        this.$set(this.rdata[2], 'value', `${min}分${sec}秒`)
      }, 1000)
    },
  },
  computed: {
    ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
    // rdata() {
    //   let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime)
    //   min = +min 
    //   sec = +sec 
    //   let interTime = `${min}分${sec}秒`
    //   let timer = setInterval(() => {
    //     if (sec) sec -= 1
    //     else {
    //       sec = 59
    //       min -= 1
    //     }
    //   }, 1000);
    //   return [
    //     // { icon: "temp", title: "车间温度", value: "27℃" },
    //     { icon: "fire", title: "当前火向", value: this.fireDirection },
    //     { icon: "clock", title: "换火时间", value: this.fireChangeTime },
    //     { icon: "sand", title: "剩余时间", value: interTime },
    //   ];
    // },
  },
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/functions";

.isolate-area-1 {
  display: flex;

  > .small-box-2:not(:last-child) {
    margin: {
      right: adjust(15px);
    }
  }
}
</style>
