<!-- 全厂监测 -->
<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)" />
          <div class="numbers">
            <number-flipper class="number" title="转速" unit="r/min" :number="item.top ? item.top[0].kksValueR : 0" :state="item.top ? item.top[0].state : 0" :point="1" :len="3" />
            <number-flipper class="number" title="有功功率" unit="MW" :number="item.top ? item.top[1].kksValueR : 0" :state="item.top ? item.top[1].state : 0" :point="1" :len="3" />
          </div>
          <div class="name" :class="item.top && getCrewState(item.top[0]) ? (getCrewState(item.top[0]) == 1 ? 'name-run' : 'name-stop') : 'name-error' " @click="goPage(item)">{{item.shortName}}</div>
          <scroll-window class="roll-top">
            <div class="roll-title">报警值</div>
            <div class="win-list flex-down" v-if="item.vListW && item.vListW.length">
            <!-- <el-scrollbar class="win-list flex-down" v-if="item.vListW && item.vListW.length"> -->
              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vListW" :key="v.kksCode">
                <div class="left">{{v.cpName}}</div>
                <div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
              </div>
            <!-- </el-scrollbar> -->
            </div>
            <div class="win-list no-data" v-else>暂无报警</div>
          </scroll-window>
          <scroll-window class="roll-bottom">
            <div class="roll-title">实测值</div>
            <el-scrollbar class="win-list">
              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.vList" :key="v.kksCode">
                <div class="left">{{v.cpName}}</div>
                <div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
              </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 == 1 || i.state == 4 || i.state == 5);
            i.vListW = crew.tSdbWarn;
            // 功率
            i.top = FactoryMConfig.top.map(arr => {
              for (let key of arr) {
                let res = getCharacterFromCrew(crew, key);
                if(res) return res;
              }
              return false;
            });
          })
        }
        this.crewList = crewList;
      },
      // 跳转到机组
      goPage(item) {
        this.$store.commit('crew', item);
        this.$router.push('/CrewMonitoring');
      },
      // 获取机组状态,传入转速测点,1正常，0维修，2停机
      getCrewState(chat) {
        if(!chat.kksValue || (Date.now() - chat.kksValue.timestamp) > (24 * 3600 * 1000) ) return 0;
        if(chat.kksValueR > 1) return 1;
        return 2;
      },
    },
  }
</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;
        transform: translateY(-3rem);
      }

      .name {
        width: 6rem;
        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(3rem);
        cursor: pointer;
      }
      .name-run{
        border-color: $color-red;
        background: rgba($color: $color-red, $alpha: 0.3);
        animation: switch 2s infinite;
      }
      .name-stop{
        border-color: $color-green;
        background: rgba($color: $color-green, $alpha: 0.3);
      }
      .name-error{
        border-color: $color-grey;
        background: rgba($color: $color-grey, $alpha: 0.3);
      }
      @keyframes switch
      {
      	0% {
          background: rgba($color: $color-red, $alpha: 0.3);
        }
      	50% {
          background: rgba($color: $color-red, $alpha: 0.7);
        }
        100% {
          background: rgba($color: $color-red, $alpha: 0.3);
        }
      }
      
      .numbers{
        @extend %pos-center;
        top: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .number {
          transform: scale(0.8);
        }
      }
      
      .roll-top{
        @extend %pos-center;
        width: 80%;
        height: 14vh;
        top: 6rem;
      }
      
      .roll-bottom{
        @extend %pos-center;
        width: 80%;
        height: 30vh;
        bottom: 0;
      }
      
      .roll-title{
        position: absolute;
        top: 1rem;
        left: 1rem;
        color: $color-cyan;
      }
      
      .win-list{
        height: 100%;
        line-height: 1.5rem;
        .win-item{
          display: flex;
          align-items: center;
          .left {
            text-align: right;
            margin-right: 1rem;
            width: 55%;
          }
          .right {
            text-align: left;
          }
        }
      }
      .flex-down{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .no-data{
        @extend %flex-center;
        color: #b8b8b8;
      }
      
      /deep/.el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    
  }
</style>
