<template>
  <div class="app-container">
    <div class="info">
      <div>
        <div class="title">检测信息</div>
        <el-form ref="form" :model="form" label-width="120px" label-position="left">
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="仓房名称">
                <el-input v-model="form.houseCode"></el-input>
              </el-form-item>
              <el-form-item label="累计用电">
                <el-input v-model="form.countElectric"></el-input>
              </el-form-item>
              <el-form-item label="电流(A)">
                <el-input v-model="form.electricCurrent"></el-input>
              </el-form-item>
              <el-form-item label="频率">
                <el-input v-model="form.pl"></el-input>
              </el-form-item>
              <el-form-item label="采集人">
                <el-input v-model="form.collectorPeople"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="设备编号">
                <el-input v-model="form.deviceCode"></el-input>
              </el-form-item>
              <el-form-item label="电压">
                <el-input v-model="form.voltageValue"></el-input>
              </el-form-item>
              <el-form-item label="功率因数">
                <el-input v-model="form.glys"></el-input>
              </el-form-item>
              <el-form-item label="有功电能">
                <el-input v-model="form.ygdn"></el-input>
              </el-form-item>
              <el-form-item label="检测时间">
                <el-input v-model="form.collectorTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <el-footer style="height: 41px;">
        <el-button type="primary" class="footerBtn" @click="back">返 回</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
import { getEnergyItem } from '@/api/grainDetection/energyConsumptionMonitoring/index'
export default {
  data () {
    return {
      form: {
        houseCode: '1号仓',
        countElectric: '332',
        electricCurrent: '22',
        collectorPeople: '王曲娜',
        deviceCode: '430901199802128911',
        voltageValue: '220',
        collectorTime: '2022-10-12',

        // 接口缺少的字段，待定
        pl: '30%',
        glys: '无',
        ygdn: '无',
      },
    }
  },
  created () {
    // console.log(this.$route.query, 'query')
  },
  mounted () {
    console.log(this.$route.params.data, 'this.$route.params.data')
    this.form = this.$route.params.data
    if (this.$route.params.data.id) {
      console.log('cunzaiid')
      this.getDetail()
    }
  },
  methods: {
    getDetail () {
      let id = this.$route.params.data.id
      getEnergyItem(id).then(res => {
        console.log(res, 'getEnergyItem')
        if (res.code == 200) {

        }
      }).catch(err => {
        console.log(err)
      })
    },
    back () {
      this.$router.push({ name: "EnergyConsumptionMonitoring" })
    }
  }
}
</script>
<style lang='scss' scoped>
.info {
  background-color: #fff;
  border-radius: 15px;
  padding: 10px 15px;
  height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title {
    border-left: 4px solid #4a7de6;
    padding-left: 10px;
  }
  .el-form {
    margin-top: 15px;
  }
}
.table {
  border-radius: 0.185185rem;
}
.th {
  height: 1.074074rem;
  line-height: 1.074074rem;
  background-color: #1d9eef;
  text-align: center;
  // border: 1px solid #000;
}
.list-tr {
  height: 1.074074rem;
  line-height: 1.074074rem;
  border: 1px solid #000;
}
td {
  text-align: center;
}
// ::v-deep .el-input__inner {
//   text-align: center;
// }
.el-footer {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%;
  color: #888;
  font-weight: 500;
  font-family: Source Han Sans CN;
  font-size: 14px;
  text-align: center;
  z-index: 2;
  .footerBtn {
    width: 300px;
    border-radius: 20px;
  }
}
</style>
