<!-- 全厂监测 -->
<template>
  <div class="factory-monitoring">
    <div class="title">
      {{$x_factory.plantName}} - 全部机组
    </div>
    <transition name="fade">
    <el-carousel v-show="crewListShow" class="swiper" trigger="click" height="95%" :autoplay="false" indicator-position="outside" arrow="always">
      <el-carousel-item class="swiper-item" v-for="page in Math.ceil(crewList.length / 4)" :key="page">
        <div class="crew-item" v-for="item of crewList.slice(page * 4 - 4, page * 4)" :key="item.deviceId">
          <img src="../assets/img/crew.png" @click="goPage(item)" />
          <number-flipper class="number" unit="kW" :number="item.power" :point="1" />
          <div class="name" @click="goPage(item)">{{item.deviceName}}</div>
          <scroll-window class="roll-top">
            <el-scrollbar class="win-list">
              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vListW">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div>
            </el-scrollbar>
          </scroll-window>
          <scroll-window class="roll-bottom">
            <el-scrollbar class="win-list">
              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList">{{v.cpName + ' ' + v.kksValueR + ' ' + v.cpUnit}}</div>
            </el-scrollbar>
          </scroll-window>
        </div>
      </el-carousel-item>
    </el-carousel>
    </transition>
  </div>
</template>

<script>
  import {
    CONFIG,
    FactoryMConfig
  } from '@/common/const.js';
  import {
    getWarnColor,
    getCharacterFromCrew
  } from '@/common/util.js';
  import NumberFlipper from '@/components/NumberFlipper'
  import ScrollWindow from '@/components/ScrollWindow'
  export default {
    components: {
      NumberFlipper,
      ScrollWindow,
    },
    data() {
      return {
        crewList: null,
        crewListShow: false,
        getWarnColor: getWarnColor,
      }
    },
    watch: {
      $x_factory: {
        immediate: true,
        handler(val) {
          this.crewListShow = false;
          this.initData(); // 图表数据
          // 延迟执行,因为动画
          setTimeout(()=> {
            this.crewListShow = true;
          }, 200)
        }
      },
      $x_allData: {
        handler(val) {
          this.initData();
        }
      }
    },
    methods: {
      // 处理页面数据
      initData() {
        let crewList = [...this.$x_factory.plantDevices];
        if(this.$x_allData.length) {
          crewList.forEach(i => {
            const crew = this.$x_allData.find(j => j.deviceId == i.deviceId);
            // 框框
            i.vList = FactoryMConfig.list.map(arr => {
              for (let key of arr) {
                let res = getCharacterFromCrew(crew, key);
                if(res) return res;
              }
              return false;
            }).filter(i => !!i);
            // 报警
            i.vListW = i.vList.filter(i => i.state == 3 || i.state == 4 || i.state == 5);
            // 功率
            i.power = 0;
            FactoryMConfig.power.forEach(key => {
              let res = getCharacterFromCrew(crew, key);
              if(res) i.power = res.kksValueR;
            })
          })
        }
        this.crewList = crewList;
      },
      // 跳转到机组
      goPage(item) {
        this.$store.commit('crew', item);
        this.$router.push('/CrewMonitoring');
      },
    },
  }
</script>

<style lang="scss" scoped>
  .fade-enter-active, .fade-leave-active {
    transition: all .2s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateX(-30px);
  }
  .factory-monitoring {
    position: relative;
    width: 100%;
    height: 100%;

    .title {
      font-size: 1.625rem;
      color: $color-cyan;
      @extend %pos-center;
      top: 0;
      height: 4%;
    }

    .swiper {
      @extend %pos-center;
      bottom: 0;
      width: 100%;
      height: 96%;

      /deep/.el-carousel__arrow {
        width: 2.9375rem;
        height: 4.5rem;
        background-color: transparent;
        color: transparent;
        top: 40%;
      }

      /deep/.el-carousel__arrow--left {
        background-image: url(../assets/img/arrow-l.png);
        @extend %background-center;
        left: 2rem;
      }

      /deep/.el-carousel__arrow--right {
        background-image: url(../assets/img/arrow-r.png);
        @extend %background-center;
        right: 2rem;
      }

      /deep/.el-carousel__button {
        width: 1.5rem;
        height: 0.5rem;
        border-radius: 1.125rem;
      }
    }

    .swiper-item {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      padding: 0 5rem;
      box-sizing: border-box;
    }

    .crew-item {
      width: 25%;
      height: 100%;
      position: relative;

      img {
        width: 50%;
        height: auto;
        @extend %pos-center;
        top: 0;
        bottom: 0;
        cursor: pointer;
      }

      .name {
        width: 8rem;
        height: 2.25rem;
        padding: 0 0.5rem;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.20);
        border: 1px dashed $color-cyan;
        @extend %flex-center;
        @extend %pos-center;
        top: 0;
        bottom: 0;
        transform: translateY(6rem);
        cursor: pointer;
      }

      .number {
        @extend %pos-center;
        top: 0.5rem;
        transform: scale(0.8);
      }
      
      .roll-top{
        @extend %pos-center;
        width: 80%;
        height: 21vh;
        top: 4rem;
      }
      
      .roll-bottom{
        @extend %pos-center;
        width: 80%;
        height: 27vh;
        bottom: 0;
      }
      
      .win-list{
        height: 100%;
        line-height: 1.5rem;
      }
      
      /deep/.el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    
  }
</style>
