<template>
  <div class="basic-info">
    <InfoHeader name="电梯基础信息" eName="Elevator basic information"></InfoHeader>
    <InfoContent height="auto">
      <div class="info-table">
        <div class="info-item" v-for="(value, key) in infoData" :key="key">
          <div class="label">{{labels[key]}}</div>
          <div class="value">{{value}}</div>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import { getWorkElevatorRunDetail } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
  },
  data() {
    return {
      tableData: [{ name: "", address: "", tenements: "", maintenance: "" }],
      elevatorName: "",
      labels: {
        name: '电梯名称',
        address: '电梯地址',
        tenements: '物业单位',
        maintenance: '维保单位'
      }
    };
  },
  computed: {
    infoData() {
      return this.tableData[0] || {};
    }
  },
  created() {
    console.log(this.$route.query);
    if (this.$route.query) {
      this.elevatorNum = this.$route.query.elevatorNum;
      this.getWorkElevatorRunDetaiilApi();
    }
  },

  beforeDestroy() {
    this.$store.commit("RESET_APP_NAME");
    this.$store.commit("CHANGE_MIDDLE_MENU", true);
    this.$store.commit("CHANGE_LEFT_NAME", "智慧电梯云平台");
  },
  methods: {
    getWorkElevatorRunDetaiilApi() {
      getWorkElevatorRunDetail(this.elevatorNum).then((res) => {
        this.tableData.forEach((item) => {
          item.name = res.data.elevatorName;
          this.elevatorName = res.data.elevatorName;
          item.address = res.data.elevatorAddress;
          item.tenements = res.data.tenementName;
          item.maintenance = res.data.maintenanceName;
          this.$store.commit("CHANGE_APP_NAME", this.elevatorName);
          this.$store.commit("CHANGE_MIDDLE_MENU", false);
          this.$store.commit("CHANGE_LEFT_NAME", "返回");
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-info {
  margin-bottom: 0.3rem;
  
  .info-table {
    padding: 0.2rem;
    
    .info-item {
      display: flex;
      padding: 0.2rem;
      background-color: #10295f;
      margin-bottom: 0.2rem;
      border-radius: 0.1rem;
      
      .label {
        width: 1.8rem;
        color: rgba(255,255,255,0.8);
        font-size: 0.26rem;
      }
      
      .value {
        flex: 1;
        color: #fff;
        font-size: 0.26rem;
      }
    }
  }
}
</style>