<template>
  <div>
    <nav-bar title="全部户型"/>
    <div class="type">
      <div>
        <p
        v-for="(item, index) in data.TypeList"
        :key="index"
        @click="selectType(item)"
        :class="{active: selectedType === item}">{{item}}</p>
      </div>
    </div>
    <div class="list">
      <room-information :filterData="filterData" :data="data"/>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";
import RoomInformation from "@/components/common/RoomInformation";

export default {
  name: "RoomList",
  components: {
    NavBar,
    RoomInformation
  },
  data() {
    return {
      selectedType: 0,
      roomList: [],
      filterData: {
        roomInfos: []
      },
      data: {}
    };
  },
  created: function() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_buildings_detail;
      let data = JSON.parse(this.$util.sessionStorage.fetch("filter"));
      params.data = {
        id: this.$route.params.id
      };
      if (data) Object.assign(params.data, data);
      this.$util.removeProperty(params.data);
      this.$net.req(params, this).then(
        res => {
          this.filterData.roomInfos = res.data;
          this.data = res.data;
          this.selectType(this.data.TypeList[0]);
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 选择类型
    selectType(item) {
      this.selectedType = item;
      this.roomList = [];
      this.data.roomList.forEach(element => {
        if (element.name === this.selectedType)
          this.roomList.push(element.list);
      });
      this.filterData.roomInfos = this.roomList[0];
    },
    // 返回
    back() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    }
  }
};
</script>

<style scoped lang="less">
.type {
  margin: 20px 0 20px 20px;
  overflow: hidden;
  height: 30px;
  div {
    overflow-y: auto;
    display: flex;
    padding: 0 0 20px;
    p {
      padding: 0 18px;
      height: 30px;
      display: flex;
      align-items: center;
      margin-right: 10px;
      border-radius: 15px;
      border: 1px solid #f9f9f9;
      background: #f9f9f9;
      font-size: 15px;
      font-weight: 500;
      color: #999;
    }
    .active {
      color: #ff523d;
      background: #fff;
      border-color: #ff523d;
    }
  }
}
.list {
  padding: 0 20px 15px;
}
</style>
