<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">楼栋详情</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>

    <van-row>
        <van-col span="24" class="title1">
             <van-image
            :src="require('@/assets/img/query.jpg')"
            width="30"
            height="30"
          />
          <span >{{keyValue}}</span> 
        </van-col>
    </van-row>
    <van-row type="flex">
       <van-col span="24">
        <van-row>
            <van-col span="8">
                <van-row>
                    <van-col span="12" class="border1">楼层</van-col>
                    <van-col span="12">
                        <van-col span="24" class="height25">单元号</van-col>
                        <van-col span="24" class="height25">室号</van-col>
                    </van-col> 
                </van-row>
            </van-col>
            <van-col span="16">
                <van-col span="24" class="height25"></van-col>
                <van-col span="24" class="height25" v-if="data!=null&&data.Chambers!=null">
                    <van-col span="3" class="height25_1" v-for="item in data.Chambers[0].SubChambers" :key="item.subcName">{{item.subcName}}</van-col>
                  
                </van-col>
            </van-col>
        </van-row>

        <div v-if="data!=null&&data.Floors!=null">
          <van-row   v-for="item1 in data.Floors" :key="item1.fName"> 
            <van-col span="8" class="height25">{{item1.fName}}</van-col>
            <van-col span="16" class="height25" v-if="data!=null&&data.Rooms!=null">
                <van-col span="3" class="height25_2" v-for="item in data.Rooms" :key="item.rID" >
                <router-link :to="{path:'/getsaroominfo',query:{id:item.rID}}">{{item.rName}}</router-link> 
                </van-col>
            </van-col>
          </van-row>
      </div>
       </van-col>
    </van-row>
  </div>
</template>

<script>
import { GetSaBuildingStruct } from "@/common/api/loginApi.js";

export default {
  name: "login",
  data() {
    return {
      data: {}, 
      keyId:0,
      keyValue:''
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
   
    //console.info('created id start',this.$route.query.id);
    this.keyId=this.$route.query.id;
    //console.info('created id end');
    this.keyValue=this.$route.query.name;
    this.GetSaBuildingStruct();
  },
  methods: {
    GetSaBuildingStruct: function () {
      var that = this;
      var data = {
        userCode: that.$store.state.data.userCode,  
        projectId: that.$store.state.projectId,
        buildingId:that.keyId
      };
      console.info("data", data);
      GetSaBuildingStruct(data).then((res) => {
        console.info("GetSaBuildingStruct", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        //console.info('data.Chambers',res.data.Chambers[0].SubChambers)
        that.data=res.data;
      });
    },
    // 单选按钮点击事件
    click1: function (event, id) {
      //console.info("click1 event", event);
      //console.info("click1 value", id);
      //console.info("click1", e.target.innerText);
     
    },
    onClickLeft() {
      // this.$toast('返回')
      console.info("left");
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.go(0);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1 {
  color: #1989fa;
  text-align: left;
  font-size:18px;
  font-weight:900;
  margin-left:15px;
  margin-top:15px;
  height:50px; 
  border-bottom:#999 solid 1px;
}
.height25{
  height: 25px;
  border:#999 solid 1px;
  padding: 5px;
}
.height25_1{
  height: 25px;
  border:#999 solid 1px;
  margin-top: -5px;
  padding-top:2px;
 
}
.height25_2{
  height: 25px;
  border:#999 solid 1px;
  margin-top: -5px;
  padding-top:2px;
  background: #1989fa;
 
}
.border1{
  border:#999 solid 1px;
  height:50px;
  
  padding-top:15px;
  
}
</style>
