<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-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        loading-text="加载中..."
        finished-text="我是有底线的~"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.RoomId"
          :to="'/getsaroominfo?id='+item.RoomId"
        >
          <template #title>
            <van-col span="24" class="title1">
                {{item.BuildingName}} {{item.rFullName}}
            </van-col>
            </template>
            <template #default>
                <van-row><van-col span="24">
                    <van-col span="5" v-if="item.rStateName=='认购'" class="bgOrange">
                      {{item.rStateName}}
                    </van-col>
                    <van-col span="5" v-else-if="item.rStateName=='签约'" class="bgRed">
                        {{item.rStateName}}
                    </van-col>
                    <van-col span="5" v-else class="bgGray">
                        {{item.rStateName}}
                    </van-col>
                </van-col></van-row>
                
            </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { GetSaRoomList } from "@/common/api/loginApi.js";
export default {
  name: "login",
  data() {
    return {
      list: [], 
      loading: false,
      finished: false,
      isLoading: false,
      page:"1",
      buildingId:'',
      modelId:'',
      danyuan:'',
      fangjian:''
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
    this.buildingId=this.$route.query.buildingId+'';
    this.modelId=this.$route.query.modelId+'';
    this.danyuan=this.$route.query.danyuan+'';
    this.fangjian=this.$route.query.fangjian+'';
  },
  methods: {
    GetSaRoomList: function () {
      var that = this;
      let jsonQuery={buildingId:that.buildingId,modelId:that.modelId,chamberName:this.danyuan,roomName:this.fangjian};
      var data = {
        userCode:that.$store.state.data.userCode,
        projectId: that.$store.state.projectId ,
        page:'',
        pageCount:'',
        jsonQuery:JSON.stringify(jsonQuery) 
      };
      console.info("data", data);
      GetSaRoomList(data).then((res) => {
        console.info("GetSaRoomList", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        if(res.data!=null&&res.data.list.length>0){
          that.loading=false;
          res.data.list.forEach(function (item, index, array) {
            that.list.push(item);
            //console.info('length:'+res.data.list.length,'index:'+index);
            // if(res.data.list.length-1==index){
            //   that.page++;
            //   if(res.data.list.length<20){
            //     that.finished=true;
            //   }
            // }
          });
        //   if(res.data==null||res.data.list==null||res.data.list.length==0){
        //     that.finished = true;
        //   }
          that.finished = true;
        }
         else{
          that.finished=true;
        }
      });
    },
    // 列表加载
    onLoad () {
      setTimeout(() => {
        this.GetSaRoomList()
        this.loading = true
      }, 500)
    },
    onRefresh () {
      setTimeout(() => {
        // 重新初始化这些属性
        this.isLoading = false
        this.listdata = []
        this.page = 1
        this.loading = false
        this.finished = false
        //this.noData = false
        // 请求信息
        this.GetSaRoomList()
      }, 500)
    },
    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:#0f0fa7;
    font-size:16px;
    text-align: left;
    margin-left:15px;
    height:35px;
}


.bgGray{
    background:#999;  
    margin-right: 5px;  
    float:right;
    color:#000;
    text-align: center;
    width:120px;
}
.bgRed{
    background:#ff0000; 
     margin-right: 5px;    
     float:right;
    color:#000;
    text-align: center;
    width:120px;
}
.bgOrange{
    background:#ff8800;  
     margin-right: 5px;  
     float:right;
    color:#000; 
    text-align: center;
    width:120px;
}
</style>
