<template>
  <div class="house-content">

    <div class="head-instructions">
      <div v-if="isStatus>=1" @click="fastBack">
      <span >快捷返回</span> >>
      </div>
      <div v-if="isStatus>=3" @click="floorBack">
        <span style="color: blue">楼栋</span> >
      </div>

      <div v-if="isStatus>=2" @click="proBack">
        <span style="color: blue">项目/分期</span> >
      </div>

      <div v-if="isStatus>=1" @click="companyBack">
        <span style="color: blue" >公司</span> >
      </div>

      <div v-if="isStatus>=1" @click="fastBack">
        <span style="color: blue">桌面</span>
      </div>
    </div>

    <div v-if="!isHouse">

    <div class="list-head" style="display: flex;flex-direction: row;justify-content:space-between;margin-left: 10px;margin-right: 10px"
    v-if="!isHouse" >
      <span>{{houseTitle}}</span>
      <span>可售</span>
    </div>

    <div v-for="(item,index) in companys" class="list-info" :class="{'gray':(index+1)%2==0}" @click="toNext(item,index)">
        <span style="text-overflow: ellipsis;white-space: nowrap;width: calc(100% - 50px);overflow: hidden;">{{item.name}}</span>
         <span>{{item.onSaleCount}}</span>
    </div>

    </div>
    <div class="unit-style" v-if="isHouse">
    <div v-for="(item,index) in Units"  :class="classNames(index)" @click="unitItemClick(index,item)">
      {{item.unitNo}}
    </div>

    </div>
      <div v-for="(item,index) in houses" class="list-info-house" v-if="isHouse">
        <div class="list-info-house-biaoji">{{item.floorNo}}</div>
        <div class="list_right">
          <div v-for="(itemss,position) in item.rooms" class="list-info-house-style" @click="showToDetail(position,index,itemss)">
            {{itemss.floorAndRoom}}
        </div>
      </div>
      </div>

  </div>
</template>

<script>
  import {getHouseInfoData,getUnitHouseData} from '../../service/houseInfoService'
    export default {
        name: "houseInfoList",
      data(){
          return{
            companys:[],
            houses:[],
            Units:[],
            isStatus:0,
            isHouse:false,
            houseTitle:'公司',
            normalClass:'unit-normal-style',
            selectedClass:'unit-press-style',
            datas:{},
            buildingIds:'',
            companyIds:'',
            projectIds:''
          }
      },
      computed:{
        classNames :function(){
          return function(index){
            let classes = {};

            if (this.Units[index].flag) {
              classes[this.selectedClass] = true;
            } else {
              classes[this.normalClass] = true;
            }
            return classes;
          }
        }
      },
      created(){

        this.getHouseInfoDatas()

        if (localStorage.getItem('houseinfo')!==undefined) {
          if (localStorage.getItem('houseinfo') !== ''){
            this.isStatus = 3
            var infos = localStorage.getItem('houseinfo')
            localStorage.setItem('houseinfo','')
            var listarr = infos.split('/')
            this.buildingIds = listarr[0]
            this.companyIds = listarr[1]
            this.projectIds = listarr[2]
          }
        }

      },
      mounted(){

      },
      destroyed(){
      },
      watch:{
        isStatus:function (newValue) {
          let self = this
          if (self.isStatus>=3) {
            self.isHouse = true
          }else{
            self.isHouse = false
          }

          switch (self.isStatus) {
            case 0:
              self.houseTitle = '公司'
              this.getHouseInfoDatas()
              break
            case 1:
              self.houseTitle = '项目'
              break
            case 2:
              self.houseTitle = '楼栋'
              break
            case 3:
              self.getUnitHouseDatas(this.buildingIds)
              break
          }
        }
      },
      methods:{
        showToDetail(position,index,item){
          let path = '';
          let query;
          path = '/houseInfoListDetail'
          query = {
            detail:item,
            buildingIds:this.buildingIds + '/'+this.companyIds+'/'+this.projectIds
          }
          this.$router.push({
            path: path,
            query:query
          })
        },
        floorBack(){

        },
        proBack(){
          let self = this
          self.isStatus = 2
          self.companys =self.datas.data[self.companyIds].children[self.projectIds].children
        },
        companyBack(){
          let self = this
          self.isStatus = 1
          self.companys =self.datas.data[self.companyIds].children
        },
        unitItemClick(index,item){
          for (var i = 0;i<this.Units.length;i++){
            if (i==index){
              this.Units[i].flag = true
            } else {
              this.Units[i].flag = false
            }
          }
          this.houses = this.Units[index].floors
        },
        toNext(item,index){
          let self = this
          if (self.isStatus<3) {

            self.isStatus = self.isStatus+1

            switch (self.isStatus) {
              case 1:
                self.companyIds = index
                self.companys =item.children
                    break
              case 2:
                self.projectIds = index
                self.companys = item.children
                    break
              case 3:
                self.buildingIds = item.id
                self.getUnitHouseDatas(item.id)
                break
              default:
                break
            }

          }else if (self.isStatus==3){
            let path = '';
            let query;
            path = '/houseInfoListDetail'
            query = {
              position:position,
              index:index
            }
            this.$router.push({
              path: path,
              query:query
            })
          }
        },
        fastBack(){
          let self = this
          self.companys=[]
          self.datas={}
          self.isStatus =0
        },
        getHouseInfoDatas(){
          let self = this
          let params = {
          }
          getHouseInfoData(params).then(res =>{
            if (res.status==200){
              self.datas = res
              self.companys = res.data
            }
          })
        },
        getUnitHouseDatas(buildingId){
          let self = this
          getUnitHouseData([buildingId]).then(res =>{
              if (res.status == 200){
                let list = res.data
                var itemList = []
                list.forEach((item,index) => {
                  if (index==0){
                    itemList.push({unitNo:item.unitNo,floors:item.floors,flag:true,buildingId:buildingId})
                  } else{
                    itemList.push({unitNo:item.unitNo,floors:item.floors,flag:false,buildingId:buildingId})
                  }

                })
                self.Units = itemList
                if (this.Units.length>0){
                  this.houses = this.Units[0].floors
                }
              }
          })
        }
      }
    }
</script>

<style scoped>

  .head-instructions{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #e8e8e8;
    margin: 10px 10px 10px 10px;
  }

  .unit-normal-style{
    margin-left: 5px;
    color: black;
    display: flex;
    padding: 5px;
    min-width: 40px;
    white-space:nowrap;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }

  .unit-press-style{
    border-radius: 5px;
    margin-left: 5px;
    color: white;
    display: flex;
    min-width: 40px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    white-space:nowrap;
    background-color: #8287ff;

  }

  .house-content{
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    background-color: white;
  }

  .list-head{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    margin-left: 10px;
    margin-right: 10px;
    color: #e8e8e8;
  }

  .unit-style{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    margin-right: 10px;
    height: 30px;
    color: #e8e8e8;
    overflow: auto;
    overflow-x: scroll;
    flex: none;
  }

  .list-info{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
    height: 30px;
    color: black;
  }

  .list-info-house{
    display: flex;
    /*display: -webkit-flex;*/
    /*-webkit-flex-wrap: wrap;*/
    /*flex-wrap: wrap;*/
    flex-direction: row;
    width: 100%;
    color: black;
    overflow: auto;
    overflow-y: hidden;
    margin-top: 2px;
  }

  .gray{
    background-color: #e8e8e8;
  }

  .list-info-house-style{
    display: inline-block;
    color: #7eb8ff;
    padding: 5px 5px 5px 5px;
    border: #7eb8ff solid 1px;
    height: 30px;
    text-align: center;
    margin-right: 5px;
  }

  .list-info-house-biaoji{
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom:1px solid #eee;
  }
  .list_right{
    width:calc(100% - 30px);
  }
  .list-info-house-styles{
    background-color: #2bf515;
    height: 100%;
    padding: 5px 5px 5px 5px;
    color: white;
  }

</style>
