<template>
  <!-- 其他设备-->
  <div class="extruder-container">
    <div class="gauge-box">
      <div class="info-box">
        <el-form label-width="150px">
          <el-row>
            <template v-for="[key, obj] in Object.entries(realData)">
              <!-- 过滤掉运行状态 -->
              <el-col :span="12" v-if="!['status', 'status_m'].includes(key)">
                <el-form-item :label="obj.name">
                  <span>{{ obj.value }}</span>
                  <span style="margin-left: 5px" v-if="obj.unit">{{
                    obj.unit
                  }}</span>
                </el-form-item>
              </el-col>
            </template>
            <!-- 运行状态设置 -->
            <el-col :span="12" v-if="realData.status_m">
              <el-form-item label="运行状态">
                <div class="yx-warp">
                  <span>{{ realData.status_m.value }}</span>
                  <span
                    class="sz-span"
                    @click="handlsz"
                    v-if="Object.keys(realData).length == 1"
                    >设置</span
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <runningDialog
      ref="runningDialog"
      :id="id"
      @succeed="getRealData"
    ></runningDialog>
  </div>
</template>

<script>
  // import { getRealData } from '@/api/ledgerAssets/equipment.js';
  import runningDialog from '../components/runningDialog.vue';
  export default {
    props: ['id'],
    components: { runningDialog },
    data() {
      return {
        dict: {
          // 运行状态
          status: {
            //0-停止,1-启动,2-定值停止,3-定值启动
            0: '停止',
            1: '启动',
            2: '定值停止',
            3: '定值启动'
          }
        },

        // 实时数据
        realData: {}
      };
    },
    created() {
      this.getRealData();
    },
    methods: {
      // 请求实时数据
      async getRealData() {
        // await getRealData(this.id).then(res => {
        //   let order = [
        //     'temp',
        //     'o_temp',
        //     'temp1',
        //     'temp2',
        //     'temp3',
        //     'temp4',
        //     'running_time',
        //     'remain_time'
        //   ]
        //   let data = res.data.sort((a, b) => {
        //     return order.indexOf(a.identifier) - order.indexOf(b.identifier)
        //   })
        //   for (const item of data) {
        //     this.$set(this.realData, item.identifier, item)
        //   }
        // })
      },

      handlsz() {
        this.$refs.runningDialog.open();
      }
    }
  };
</script>

<style lang="scss" scoped>
  $width: 280px;
  .red {
    color: #ff4949;
  }
  .green {
    color: #157a2c;
  }
  ::v-deep.extruder-container {
    .gauge-box {
      display: flex;
      height: 60vh;
      background-color: #fff;
      min-height: 500px;
      padding-bottom: 50px;
    }
    .chart-container {
      width: 60%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .chart-wrapper {
        width: 50%;
        height: 50%;
        // background: url('~@/assets/img/charts/dryingBox-bg.jpg') no-repeat 50%
        //   8px;
        // background-image: url('~@/assets/img/charts/dryingBox-bg.jpg');
        background-size: contain;
        // background-repeat: no-repeat;
        // background-position: center 20%;
        #chart,
        #chart1,
        #chart2,
        #chart3 {
          width: 100%;
          height: 100%;
        }
      }
    }
    .info-box {
      width: 40%;
      height: 100%;
      .el-form {
        flex: 1;
      }
      .el-form-item__label {
        font-weight: bold;
        font-size: 16px;
      }
    }
    // .gauge-box {
    //   display: flex;
    //   // align-items: stretch;
    //   height: 50vh;
    //   background: #fff;
    //   padding: 0 20px;
    //   // height: 50%;
    //   box-sizing: border-box;
    //   // min-height: 500px;
    //   font-weight: bold;
    //   .chart-container {
    //     flex: 6;
    //     // width: $width * 2 + 100px;

    //     display: flex;
    //     flex-wrap: wrap;

    //     .chart-wrapper {
    //       // float: left;
    //       margin-bottom: 20px;
    //       width: 50%;
    //       height: 50%;
    //       // flex: 1;
    //       // height: $width / (360 / 304);
    //       position: relative;
    //       display: flex;
    //       z-index: 1;
    //       > div {
    //         flex: 1;
    //         // width: 100%;
    //         // height: 100%;
    //         position: relative;
    //         z-index: 1;
    //       }
    //       img {
    //         width: 100%;
    //         position: absolute;
    //         left: 0;
    //         top: 0;
    //         z-index: 0;
    //       }
    //       #chart,
    //       #chart1,
    //       #chart2,
    //       #chart3 {
    //         width: 100%;
    //         // height: 100%;
    //       }

    //       &:nth-of-type(3),
    //       &:nth-of-type(1) {
    //         // margin-right: vw(80);
    //       }
    //     }
    //   }
    //   .info-box {
    //     flex: 4;
    //     display: flex;
    //     align-items: center;
    //     .el-form {
    //       flex: 1;
    //     }
    //     .el-form-item__label {
    //       font-weight: bold;
    //       font-size: 16px;
    //     }
    //   }
    // }

    .line-box {
      height: 500px;
      // height: 50%;
      background: #fff;
      padding: 20px;
      margin-top: 10px;
      box-sizing: border-box;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .tools {
        display: flex;
        align-items: center;
        .el-button {
          margin: 0 12px;
        }
        .timeType {
          margin: 0 20px;
          // letter-spacing: 8px;
          span {
            cursor: pointer;
            margin: 0 4px;
          }
          span.active,
          span:hover {
            // border-bottom: 2px solid $mainColor;
            // color: $mainColor;
          }
        }
      }

      .el-icon-download {
        font-size: 18px;
        cursor: pointer;
      }

      .chart-wrapper {
        height: 400px;
        > div {
          height: 100%;
        }
      }

      .value-box {
        text-align: center;
        span {
          font-weight: bold;
          margin-left: 4px;
        }
        .average-text {
          color: #0052d9;
        }
      }
    }
  }
  .yx-warp {
    display: flex;
    align-items: center;
    .sz-span {
      border: 1px solid rgb(75, 121, 2);
      padding: 0 5px;
      color: rgb(75, 121, 2);
      height: 25px;
      line-height: 25px;
      box-sizing: border-box;
      font-size: 14px;
      cursor: pointer;
      margin-left: 20px;
    }
  }
</style>
