<template>
<div class="dry_wraper">
  <div class="dry_content">
    <div class="dry_item_wraper">
      <div class="dry_title">冷却输送线</div>
      <div class="dry_item">
        <div class="dry_hj fl" v-for="e in outKilnInfoVos" :key="e.vehicleCode" :class="e.active ? 'dry_hj_active' : ''">
          <div class="dry_hj_i">
            <div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
            <div v-show="e.active" class="mater_info">
              <div class="mater_p p2">{{e.materialCode}}</div>
              <div class="mater_p p3">{{ e.materialModel }}</div>
              <div class="mater_p p4">{{ e.materialQty }}</div>
            </div>
          </div>
        </div>
      </div>
      <flow-svg direction="pathLeft"></flow-svg>
    </div>
    <div class="dry_item_wraper">
      <div class="dry_title">1号窑</div>
      <div class="dry_item">
        <div class="dry_hj dry_hj_1 fr" v-for="e in oneKilnInfoVos" :key="e.vehicleCode"  :class="e.active ? 'dry_hj_active' : ''">
          <div class="dry_hj_i">
            <div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
            <div v-show="e.active" class="mater_info">
              <div class="mater_p p2">{{e.materialCode}}</div>
              <div class="mater_p p3">{{ e.materialModel }}</div>
              <div class="mater_p p4">{{ e.materialQty }}</div>
            </div>
          </div>
        </div>
      </div>
      <flow-svg direction="pathRight"></flow-svg>
    </div>
    <div class="dry_item_wraper">
      <div class="dry_title">2号窑</div>
      <div class="dry_item">
        <div class="dry_hj dry_hj_1 fr" v-for="e in twoKilnInfoVos" :key="e.vehicleCode"  :class="e.active ? 'dry_hj_active' : ''">
          <div class="dry_hj_i">
            <div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
            <div v-show="e.active" class="mater_info">
              <div class="mater_p p2">{{e.materialCode}}</div>
              <div class="mater_p p3">{{ e.materialModel }}</div>
              <div class="mater_p p4">{{ e.materialQty }}</div>
            </div>
          </div>
        </div>
      </div>
      <flow-svg direction="pathRight"></flow-svg>
    </div>
    <div class="dry_item_wraper">
      <div class="dry_title">进窑输送线</div>
      <div class="dry_item">
        <div class="dry_hj fl" v-for="e in inKilnInfoVos" :key="e.vehicleCode"  :class="e.active ? 'dry_hj_active' : ''">
          <div class="dry_hj_i">
            <div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
            <div v-show="e.active" class="mater_info">
              <div class="mater_p p2">{{e.materialCode}}</div>
              <div class="mater_p p3">{{ e.materialModel }}</div>
              <div class="mater_p p4">{{ e.materialQty }}</div>
            </div>
          </div>
        </div>
      </div>
      <flow-svg direction="pathLeft"></flow-svg>
    </div>
  </div>
</div>
</template>
<script>
import FlowSvg from '@components/flowsvg.vue'
import { klineInfo } from '@js/mork2.js'
export default {
  components: {
    FlowSvg
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      outKilnInfoVos: [], // 出窑缓存线信息
      inKilnInfoVos: [], // 入窑缓存线
      oneKilnInfoVos: [], // 窑1
      twoKilnInfoVos: [] // 窑2
    }
  },
  created () {
    this._klineInfo()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
  destroyed () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._klineInfo()
      }, this.interTime)
    },
    async _klineInfo () {
      let res = await klineInfo()
      this.outKilnInfoVos = [...res.outKilnInfoVos]
      this.outKilnInfoVos.map(el => {
        this.$set(el, 'active', true)
      })
      for (let i = this.outKilnInfoVos.length; i < 39; i++) {
        this.outKilnInfoVos.push({vehicleCode: `out${i}`, active: false})
      }
      this.inKilnInfoVos = [...res.inKilnInfoVos]
      this.inKilnInfoVos.map(el => {
        this.$set(el, 'active', true)
      })
      for (let i = this.inKilnInfoVos.length; i < 40; i++) {
        this.inKilnInfoVos.push({vehicleCode: `in${i}`, active: false})
      }
      this.oneKilnInfoVos = [...res.oneKilnInfoVos]
      this.oneKilnInfoVos.map(el => {
        this.$set(el, 'active', true)
      })
      for (let i = this.oneKilnInfoVos.length; i < 37; i++) {
        this.oneKilnInfoVos.push({vehicleCode: `yao1${i}`, active: false})
      }
      this.twoKilnInfoVos = [...res.twoKilnInfoVos]
      this.twoKilnInfoVos.map(el => {
        this.$set(el, 'active', true)
      })
      for (let i = this.twoKilnInfoVos.length; i < 37; i++) {
        this.twoKilnInfoVos.push({vehicleCode: `yao2${i}`, active: false})
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.dry_wraper
  position relative
  // border-left 4px solid #18537a
  // border-right 4px solid #18537a
  _wh(100%, 100%)
  // background: -webkit-radial-gradient(closest-side circle,rgba(86, 188, 234, 50%) 25%, #034c6d 100%)
  // box-shadow inset 3px -6px 6px 0px rgba(0, 0, 0, 30%), inset -6px 3px 6px 0px rgba(0, 0, 0, 30%)
  background center / 100% 100% url('../../../images/bg-center.png') no-repeat
.dry_content
  position relative
  _wh(100%, 100%)
  padding 10px 0
  // box-shadow inset 3px -6px 6px 0px rgba(0, 0, 0, 30%), inset -6px 3px 6px 0px rgba(0, 0, 0, 30%)
.dry_item_wraper
  _wh(100%, calc((100% - 60px) / 4))
  margin-bottom 20px
  &:last-child
    margin-bottom 0
.dry_title
  font-size 24px
  font-family: 'YouSheBiaoTiHei';
  font-weight: 400;
  color: transparent;
  line-height 30px
  background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
.dry_item
  clear both
  _wh(100%, calc(100% - 46px))
  padding 20px 10px 0px 10px
.dry_hj
  position relative
  _wh(2.5%, calc(100% - 10px))
  // background-color #02344d
  // border 2px solid #186189
  border-radius 4px
  background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
  border 2px solid rgba(42, 189, 251, 50%)
  border-right 0
  &:last-child
    border-right 2px solid rgba(42, 189, 251, 50%)
  &:after
    content ''
    position absolute
    _wh(2px, 10px)
    bottom -11px
    left calc(50% - 1px)
    background-color rgba(42, 189, 251, 50%)
.dry_hj_i
  _wh(100%, 100%)
  background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
  background-size 12px 12px
  background-repeat repeat
.dry_hj_active
  background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
  border 2px solid #B55F4E
  border-right 0
  &:last-child
    border-right 2px solid #B55F4E
  .dry_hj_i
    background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
.dry_hj_1
  &:last-child
    border-right 0
.p1
  _font(14px, 30px, #73f440,,)
  // border-bottom 2px solid rgba(42, 189, 251, 50%)
.mater_info
  height calc(100% - 32px)
.mater_p
  display flex
  justify-content center
  align-items center
  width 100%
  _font(12px, 13px, #fff,,center)
.p2
  height 50%
  // border-bottom 2px solid #186189
.p3
  height 25%
  // border-bottom 2px solid #186189
.p4
  height 25%
</style>
  