<!-- 全厂数据一览 -->
<template>
  <div class="factory-monitoring">
    <!-- <div class="title">
      {{$x_factory.plantName}} - 全部机组
    </div> -->
    <transition name="fade">
      <div class="crew-list" v-show="crewListShow">
        <div class="crew-item" v-for="item of $x_allData" :key="item.deviceId">
          <!-- <img src="../assets/img/crew.png" /> -->
          <div class="name" :class="item.runstate ? (item.runstate == 1 ? 'name-run' : 'name-stop') : 'name-error'" @click="goPage(item.deviceId)">{{item.deviceName}}</div>
          <!-- <number-flipper class="number" unit="kW" :number="item.power" :point="1" /> -->
          <scroll-window class="roll-left">
            <el-scrollbar class="win-list">
              <div class="win-item" :style="{color: getWarnColor(v.state)}" v-for="v of item.tSdb">
                <div class="left">{{v.cpName}}</div>
                <div class="right">{{v.kksValueR + ' ' + v.cpUnit}}</div>
              </div>
            </el-scrollbar>
          </scroll-window>
        </div>
      </div>
    </transition>
    <!-- 
    <div class="power">
      <number-flipper title="全厂发电功率" unit="MW" :number="8021" :point="1" />
    </div>
    <el-carousel class="swiper" trigger="click" height="90%" :autoplay="false" indicator-position="outside" arrow="always">
      <el-carousel-item class="swiper-item" v-for="page in Math.ceil($x_factory.plantDevices.length / 4)" :key="page">
        <div class="crew-item" v-for="item of $x_factory.plantDevices.slice(page * 4 - 4, page * 4)" :key="item.deviceId">
          <img src="../assets/img/crew.png" @click.stop="showWin(item, $event)" />
          <div class="name" @click="goPage(item)">{{item.deviceName}}</div>
          <number-flipper class="number" title="有功功率" unit="kW" :number="102.1" :point="1" />
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="mask" v-if="rollWin.show" @click="closeWin">
      <scroll-window class="roll-win" :style="{top: 'calc(' + rollWin.top + 'px - 15rem)', left: rollWin.left + 'px'}" direction="1" @click.native.stop="" />
    </div> -->
  </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,
        // 小窗口
        rollWin: {
          show: false,
          item: null,
          top: null,
          left: null,
        },
        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: {
      // 跳转到机组
      goPage(item) {
        this.$store.commit('crew', item);
        this.$router.push('/CrewMonitoring');
      },
      // 处理页面数据
      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.power = 0;
            FactoryMConfig.power.forEach(key => {
              let res = getCharacterFromCrew(crew, key);
              if(res) i.power = res.kksValueR;
            })
          })
        }
        this.crewList = crewList;
      },
      // 跳转到机组，这里去匹配factory里的机组，因为这里是alldata里的机组
      goPage(id) {
        const crew = this.$x_factory.plantDevices.find(i => i.deviceId == id);
        this.$store.commit('crew', crew);
        this.$router.push('/CrewMonitoring');
      },
      // 显示小窗口
      showWin(item, e) {
        this.rollWin.item = item;
        this.rollWin.show = true;
        this.rollWin.left = e.clientX + 10;
        this.rollWin.top = e.clientY - 10;
      },
      // 关闭小窗口
      closeWin() {
        this.rollWin.show = false;
      },
    },
  }
</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%;
    }
    
    .crew-list {
      @extend %pos-center;
      bottom: 0;
      height: 100%;
      padding: 1% 2%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      
      .crew-item {
        position: relative;
        width: 20%;
        height: 50%;
        
        img {
          width: auto;
          height: 70%;
          @extend %pos-center;
          bottom: 2%;
        }
        
        .name {
          width: 8rem;
          height: 2rem;
          border-radius: 4px;
          background: rgba(0, 0, 0, 0.20);
          border: 1px dashed $color-cyan;
          @extend %flex-center;
          @extend %pos-center;
          top: 0.5rem;
          // position: absolute;
          // left: 5%;
		  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);
          }
        }
        
        .number{
          position: absolute;
          top: 5%;
          right: 0;
          transform: scale(0.7);
        }
        
        .roll-left {
          width: 97%;
          height: calc(100% - 3rem);
          @extend %pos-center;
          bottom: 0;
          
          .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;
              }
            }
          }
          
          /deep/.el-scrollbar__wrap {
            overflow-x: hidden;
          }
        }
        
      }
    }

    // .power {
    //   @extend %pos-center;
    //   top: 3.125rem;
    // }

    // .swiper {
    //   @extend %pos-center;
    //   bottom: 0.625rem;
    //   width: 100%;
    //   height: 80%;

    //   /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: 3.75rem;
    //   }

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

    //   /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 9.375rem;
    //   box-sizing: border-box;
    // }

    // .crew-item {
    //   width: 25%;
    //   padding: 1%;
    //   box-sizing: border-box;
    //   position: relative;

    //   .warn {
    //     position: relative;
    //     left: -1.875rem;
    //     height: 7.875rem;
    //     background-size: 100% 100%;
    //     display: flex;
    //     align-items: center;
    //     padding-left: 12.5rem;

    //     .txt {
    //       margin-right: 0.9375rem;
    //     }
    //   }

    //   .warn-bg1 {
    //     background-image: url(../assets/img/warn-1.png);
    //   }

    //   .warn-bg2 {
    //     background-image: url(../assets/img/warn-2.png);
    //   }

    //   .warn-bg3 {
    //     background-image: url(../assets/img/warn-3.png);
    //   }

    //   img {
    //     width: 80%;
    //     height: auto;
    //     margin-bottom: 0.625rem;
    //   }

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

    //   .number {
    //     transform: scale(0.9);
    //   }
    // }
    
    // .mask{
    //   width: 100vw;
    //   height: 100vh;
    //   z-index: 2;
    //   position: fixed;
    //   top: 0;
    //   left: 0;
    // }
    
    // .roll-win{
    //   width: 13rem;
    //   height: 15rem;
    //   position: fixed;
    // }
  }
</style>
