
<template>
  <!--// 流程调用  展示流程信息模板1
//     模板组件 流程节点内部信息展示
//     三级组件-->
  <div class="flow-content">
    <el-carousel
      :autoplay="false"
      height="110px"
      indicator-position="none"
      trigger="click"
    >
      <el-carousel-item
        :key="'mainitem' + index"
        class="info-item"
        v-for="(item, index) in showList"
      >
        <div
          :class="{ onlyOne: item.length === 1 }"
          :key="info.key"
          class="info-content"
          v-for="info in item"
        >
          <div class="info-title">{{ info.desc }}</div>
          <div class="info-info">{{ info.value }} &nbsp;</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showList: [],
      showInfo: {},
    };
  },
  inject: ["monitorInfo", "itemInfo", "parent"],
  watch: {
    // 监听 流程组件调动过程当中，轮询获取到的运行数据同步展示
    "monitorInfo.monitorList" (value, oldValue) {
      this.initShowInfo();
    },
  },
  methods: {
    // 转换当前节点的展示信息 判断是否运行开启动画
    initShowInfo () {
      let info = this.monitorInfo.monitorList.filter((item) => {
        return item.flowComptId === this.itemInfo.mainData.flowComptId;
      })[0];
      this.showInfo = info;
      let showList = [];
      for (let i = 0; i < info.viewList.length; i++) {
        if (i % 4 === 0) {
          showList.push([]);
        }
        showList[Math.floor(i / 4)].push(info.viewList[i]);
      }
      this.showList = showList;
      setTimeout(() => {
        if (this.showInfo.isRunning === 0) {
          // this.parent.activeStart()
          this.parent.activeEnd();
        } else {
          this.parent.activeStart();
        }
      }, 1000);
    },
  },
  mounted () {
    this.initShowInfo();
  },
};
</script>

<style lang="less">
@normal: #289de9;
.flow-content {
  .info-item {
    width: 100%;
    height: 100%;
    .info-content {
      width: 50%;
      height: 50%;
      float: left;
      display: inline-flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;
      .info-title {
        color: #337ab7;
        padding-top: 5px;
        text-align: center;
      }
      .info-info {
        padding-bottom: 5px;
      }
    }
    .info-content:nth-child(1) {
      border-bottom: 1px solid @normal;
      border-right: 1px solid @normal;
    }
    .info-content:nth-child(2) {
      border-bottom: 1px solid @normal;
    }
    .info-content:nth-child(3) {
      border-right: 1px solid @normal;
    }
    .onlyOne {
      width: 100%;
      height: 100%;
      border-bottom: none !important;
      border-right: none !important;
    }
  }
}
</style>
