<template>
  <sail-page type="loading-view" title="搜索结果" isHead>
    <div slot="content" class="search__result-box">               
          <div class="screening_box">
              <p class="screen_type " @click="show_region">
                    <span :class="{'mark_selected': region_selected}">
                      {{select_title_obj.region_title.length < 5 ?
                        select_title_obj.region_title :
                        select_title_obj.region_title.substring(0,4)+'..'
                        }}
                    </span>
                 <svg class="icon screen__icon" aria-hidden="true">
                      <use xlink:href="#icon-fanhui1"/>
                 </svg>
              </p>
              <p class="screen_type" @click="show_price">
                    <span :class="{'mark_selected': price_selected}">
                        {{select_title_obj.price_title.length < 5 ?
                        select_title_obj.price_title :
                        select_title_obj.price_title.substring(0,4)+'..'
                        }}
                    </span>
                 <svg class="icon screen__icon" aria-hidden="true">
                      <use xlink:href="#icon-fanhui1"/>
                 </svg>
              </p>
              <p class="screen_type" @click="show_area">
                    <span :class="{'mark_selected': area_selected}">
                        {{select_title_obj.area_title.length < 5 ?
                        select_title_obj.area_title :
                        select_title_obj.area_title.substring(0,4)+'..'
                        }}
                    </span>
                 <svg class="icon screen__icon" aria-hidden="true">
                      <use xlink:href="#icon-fanhui1"/>
                 </svg>
              </p>
              <p class="screen_type" @click="show_house_type">
                    <span :class="{'mark_selected': house_selected}">
                        {{select_title_obj.house_title.length < 5 ?
                        select_title_obj.house_title :
                        select_title_obj.house_title.substring(0,4)+'..'
                        }}
                    </span>
                 <svg class="icon screen__icon" aria-hidden="true">
                      <use xlink:href="#icon-fanhui1"/>
                 </svg>
              </p>
          </div>      
            <van-popup :getContainer="getLoc" class="popup_position" v-model="region_show" position="top">
                <van-cell-group >
                  <van-cell :class="{'mark_selected': region.selected}" :icon="region.selected ? 'success':''" v-for="(region, index) in selectListRegionInfo" :key="index" :title="region.name" clickable @click="region_select(region.name,region.id, index)"/>                  
                </van-cell-group>
            </van-popup>
            <van-popup :getContainer="getLoc" class="popup_position" v-model="price_show" position="top">
                <van-cell-group >
                  <van-cell :class="{'mark_selected': price.selected}" :icon="price.selected ? 'success':''" v-for="(price, index) in selectListPriceInfo" :key="index" :title="price.name" clickable @click="price_select(price.name,price.price_id,index)"/>                     
                </van-cell-group>
            </van-popup>
            <van-popup :getContainer="getLoc" class="popup_position" v-model="area_show" position="top">
                <van-cell-group >
                  <van-cell :class="{'mark_selected': area.selected}" :icon="area.selected ? 'success':''" v-for="(area, index) in selectListAreaInfo" :key="index" :title="area.name" clickable @click="area_select(area.code,index,area.name)"/>                     
                </van-cell-group>
            </van-popup>
            <van-popup :getContainer="getLoc" class="popup_position" v-model="house_type_show" position="top">
                <van-cell-group >
                  <van-cell :class="{'mark_selected': house.selected}" :icon="house.selected ? 'success':''" v-for="(house, index) in selectListHouseTypeInfo" :key="index" :title="house.layoutName" clickable @click="house_type_select(house.layoutName,house.id,index)"/>                     
                </van-cell-group>
            </van-popup>
            <div class="search__box_list">
                 <input type="search" @focus="focus" name="" class="search__input" placeholder="搜索">
                 <svg class="icon search__icon" aria-hidden="true">
                      <use xlink:href="#icon-02"/>
                 </svg> 
            </div>
            <div get-container class="search_num">共有{{homeLayoutListInfo.length}}个搜索结果</div>
            <div class="housing_results">
              <router-link class="link" v-for="(layoutList, index) in homeLayoutListInfo" :to="`/housingTypeDetails/${layoutList.id}`" :key="index">
                 <HomeSearchCard :data="layoutList" isHouseName isHouseAddress/>
              </router-link>                           
            </div>
          
         

    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import HomeSearchCard from "@/common/widget/homeSearchCard.vue";
import { mapState } from "vuex";
import { Popup } from "vant";
import { Cell, CellGroup } from "vant";
import { Toast } from "vant";
export default {
  components: {
    sailPage,
    HomeSearchCard
  },
  computed: {
    ...mapState({
      selectListRegionInfo:state => state.layoutListModule.selectListRegionInfo,
      homeLayoutListInfo:state => state.layoutListModule.homeLayoutListInfo, //获取热门户型列表数据
      selectListAreaInfo:state => state.layoutListModule.selectListAreaInfo,
      selectListPriceInfo:state => state.layoutListModule.selectListPriceInfo,
      selectListHouseTypeInfo:state => state.layoutListModule.selectListHouseTypeInfo
    })
  },
  data: function(){
    return {
      name: "template",
      region_show: false,
      price_show: false,
      area_show: false,
      house_type_show: false,
      // region_toggle: false,
      // price_toggle: false,
      // area_toggle: false,
      // house_toggle: false,
      select_info: {
        regionId : "",
        price : "",
        area : "",
        houseType : "" 
      },
      select_title_obj: {
        region_title : "项目",
        price_title : "价格",
        area_title : "地区",
        house_title : "户型"
      },
      region_selected: false,
      price_selected: false,
      area_selected: false,
      house_selected: false,

    }; 
  },
  asyncData({store,route}) {
    let keyWords = route.params.keyWords; 
    //
    return store.dispatch("layoutListModule/findAllLayoutHouse",{ //户型
      keyWords
    }).then(res=> {
      return store.dispatch("layoutListModule/selectListRegion",{

      }).then(res=> {
        return store.dispatch("layoutListModule/selectListArea",{
          provincecode: 520000,
          cityCode: 520100
        }).then(res=> {
          return store.dispatch("layoutListModule/selectListHouseType",{
                       
          }).then(res=> {

          });
        });
      });
    });

  },
  methods: {
    focus(){
      this.$router.push({ path: "/cleanProjectSearchList" }); // -> 编程式跳转
    },
    show_region(){ //项目下拉
      this.region_show = true;
      this.price_show = false;
      this.area_show = false;
      this.house_type_show = false;
      // this.region_toggle = true
      // if(this.region_toggle == true) {
      //   this.region_show = true
      //   this.region_toggle = false
      // }else if(this.region_toggle = false) {
      //   this.region_show = false
      //   this.region_toggle = true
      // } 
      // 
    },
    show_price(){ //价格下拉
      this.price_show = true;
      this.region_show = false;
      this.area_show = false;
      this.house_type_show = false;
    },
    show_area(){ //地区下拉
      this.price_show = false;
      this.region_show = false;
      this.area_show = true;
      this.house_type_show = false;
         
    },
    show_house_type(){ //户型下拉
      this.price_show = false;
      this.region_show = false;
      this.area_show = false;
      this.house_type_show = true;
    },
    getLoc(){
      //return document.querySelector('.search__box_list') //挂载弹出组件
      //debugger;
      return document.querySelector(".search__box_list"); //挂载弹出组件       
    },
    region_select(title,id, index){ //选择下拉项目筛选  
      this.region_selected = true;    
      this.region_show = false;
      this.price_show = false;
      this.area_show = false;
      this.house_type_show = false;
      this.select_info.regionId = id;
      this.select_title_obj.region_title = title;
      this.$store.commit("layoutListModule/REGION_MARK_SELECTED_ITEM", index);
      Toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$store.dispatch("layoutListModule/findAllLayoutHouse",
        this.select_info
      ).then(res => {
        if(res) {
          Toast.clear();
        }
      });
    },
    price_select(title,price,index){ //选择下拉价格筛选
      this.price_selected = true;
      this.region_show = false;
      this.price_show = false;
      this.area_show = false;
      this.house_type_show = false;
      this.select_info.price = price;
      this.select_title_obj.price_title = title;
      this.$store.commit("layoutListModule/PRICE_MARK_SELECTED_ITEM", index);
      Toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$store.dispatch("layoutListModule/findAllLayoutHouse",
        this.select_info
      ).then(res => {
        if(res) {
          Toast.clear();
        }
      });
    },
    area_select(areaCode,index,areaName) { //选择下拉地区
      this.area_selected = true;     
      this.region_show = false;
      this.price_show = false;
      this.area_show = false;
      this.house_type_show = false;
      this.select_info.area = areaCode;
      this.select_title_obj.area_title = areaName;
      this.$store.commit("layoutListModule/AREA_MARK_SELECTED_ITEM", index);
      Toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$store.dispatch("layoutListModule/findAllLayoutHouse",
        this.select_info
      ).then(res => {
        if(res) {
          Toast.clear();
        }
      });
    },
    house_type_select(title,houseType,index) { //选择下拉户型
      this.house_selected = true; 
      this.region_show = false;
      this.price_show = false;
      this.area_show = false;
      this.house_type_show = false;
      this.select_info.houseType = houseType;
      this.select_title_obj.house_title = title;
      this.$store.commit("layoutListModule/HOUSE_MARK_SELECTED_ITEM", index);
      Toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$store.dispatch("layoutListModule/findAllLayoutHouse",
        this.select_info
      ).then(res => {
        if(res) {
          Toast.clear();
        }
      });
    }
  }
};
</script>
<style lang="less">
@import "~@/common/less/variable.less";
     .search__result-box {
        .van-modal {
            top: 200px; 
            background-color: rgba(0,0,0,.4);
            width:98%;  
            margin-left: 1%;        
        }
        .van-popup--top {
                position: absolute;
                text-align: left;
                text-indent: 30px;
        }
        .mark_selected {
            color: @nice-green;
            text-indent: 5px;
        }
     }
      
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    @nice-screenFont:#464646;
    @nice-screenIcon:#ACACAC;
    @nice-search-gray:#BBBBBB;
    @nice-search-font-gray:#BBBBBB;
    .search__result-box {
        width: 375px;
        min-height: 100vh; 
        background: @nice-bgwhite; 
        .screening_box {
            width: 375px;
            height: 40px;
            display: flex;
            background: @nice-bgwhite;
            border-bottom: 1px solid @nice-searchbg;
            .screen_type {
               width: 93.75px;
               height: 40px;
               line-height: 40px;
               font-size: 14px;
               color: @nice-screenFont;
               .screen__icon {
                  font-size: 10px;
                  color: @nice-screenIcon;
               }
            }
        }
        .popup_position {
            height: 40vh;
            overflow: scroll;
        }
        .search_num {
            width: 370px;
            position: relative;
            height: 31px;
            text-indent: 15px;
            margin:0 auto; 
            background:@nice-searchNumBg;
            line-height: 31px;
            text-align: left;
            font-size: 13px;
            color: @nice-searchNum;
            position: relative;

        }       
       .search__box_list {
           width: 375px;
           height: 44px;
           background: @nice-bgwhite;
           position: relative;
           .search__input {
              width:340.7px;
              height: 30px;
              display: block;
              border-radius: 50px;
              background: @nice-searchbg;                
              border:none;
              margin-left: 17.92px;
              text-indent: 33.89px;
              float: left;
              margin-top: 6px;
              font-size: 14px;
              color: @nice-search-font-gray;
           }           
           .search__icon {
             width: 18.85px;
             height: 18.85px;
             position: absolute;
             left: 26px;
             top: 12px;
             color: @nice-search-gray;
           }
       }
       .search_results {
           width: 100vw;
           min-height: 100vh;
           background: @nice-bgwhite;


       }
    }
</style>