<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-form @submit="onSubmit">
        <van-cell title="楼栋" :value="bText" is-link title-class="title1" value-class="value1" @click="showBuild=true"></van-cell>
          <van-popup v-model="showBuild" round position="bottom" >
            <van-picker
              show-toolbar
              title="选择楼栋"
              value-key="keyValue"
              :columns="buildingData"
              @cancel="showBuild=false"
              @confirm="onConfirm"
            />
          </van-popup>
        
        <van-cell title="户型" :value="hText" is-link title-class="title1" value-class="value1" @click="showHouse=true"></van-cell>
          <van-popup v-model="showHouse" round position="bottom">
            <van-picker
              show-toolbar
              title="选择户型"
              value-key="keyValue"
              :columns="houseData"
              @cancel="showHouse=false"
              @confirm="onConfirmHouse"
            />
          </van-popup>
        
        <van-field
            v-model="danyuan"            
            label="单元号"
            placeholder="请输入"
            input-align="right"
            label-class="title1"
        />
        <van-field
            v-model="fangjian"            
            label="房间号"
            placeholder="请输入"
            input-align="right"
            label-class="title1"
        />
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">查询</van-button>
        </div>
    </van-form>
   
  </div>
</template>

<script>
import { GetSaBuildingSelectList ,GetSaModelSelectList,GetSaRoomList} from "@/common/api/loginApi.js";
export default {
  name: "login",
  data() {
    return {
      buildingData: [], 
      showBuild:false,
      houseData:[],
      showHouse:false,
      bText:'请选择',   //楼栋
      hText:'请选择',   //户型
      bValue:'',   //楼栋
      hValue:'',   //户型
      danyuan:'',
      fangjian:''
      
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
    this.GetSaBuildingSelectList();
    this.GetSaModelSelectList();
  },
  computed:{   //计算属性
    
   
  },
  methods: {
    //获取楼栋信息
    GetSaBuildingSelectList: function () {
      var that = this;
      var data = {
        projectId: that.$store.state.projectId       
      };
      console.info("data", data);
      GetSaBuildingSelectList(data).then((res) => {
        console.info("GetSaBuildingSelectList", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        res.data.forEach(function (item, index, array) {
          that.$set(that.buildingData, index, item);
        });
       
      });
    },
    //获取户型列表
    GetSaModelSelectList: function () {
      var that = this;
      var data = {
        projectId: that.$store.state.projectId       
      };
      console.info("data", data);
      GetSaModelSelectList(data).then((res) => {
        console.info("GetSaModelSelectList", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        res.data.forEach(function (item, index, array) {
          that.$set(that.houseData, index, item);
        });
       
      });
    },
     onConfirm(value) {   //楼栋选定项
     console.info('onConfirm',value);
      this.bValue = value.keyId;
      this.bText=value.keyValue;
      console.info('onConfirm bValue',this.bValue);
      this.showBuild = false;
      //console.info('onConfirm showBuild',this.showBuild);
    },
     onConfirmHouse(value) {   //户型选定项
      console.info('onConfirmHouse',value);
      this.hValue = value.keyId;
      this.hText=value.keyValue;
      console.info('onConfirmHouse hValue',this.bValue);
      this.showHouse = false;
    },
    onSubmit() {    //提交按钮  查询房源
     
      var that = this;
      if(that.bValue=='请选择'){
        that.bValue='';
      }
       if(that.hValue=='请选择'){
        that.hValue='';
      }
      let jsonQuery={buildingId:that.bValue,modelId:that.hValue,danyuan:that.danyuan,fangjian:that.fangjian};
      this.$router.push({path:'/getsaroomlist',query:jsonQuery});
     
    },
    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: #999;
  text-align: left;
}
.value1 {
  color: #1732cf;
  font-size: 18px;
  font-weight: 800;
}
.size{
    font-size:16px;
}
</style>
