<template>
  <sail-page type="cleanProjectSearchList" title="简洁搜索">
    <div slot="content" class="clearSearch_box">         
       <div class="search__box">
            <input type="search" @input="searchEvent(search_value)" v-model="search_value" class="search__input" ref="searchInput" @keyup.enter="enter_search" autocomplete="off" autocapitalize="off" autocorrect="off" placeholder="搜索" autofocus="autofocus">           
            <p class="go_back" @click="back">返回</p>
            <svg class="icon close__icon" @click="clean_value" aria-hidden="true">
                 <use xlink:href="#icon-guanbi"/>
            </svg> 
       </div>
       
          <emptyPageCard :isEmptyType="searchListInfo.length===0?'search':'normal'"/>
          <van-cell-group v-for="(result, index) in searchListInfo" :key="index">
             <van-cell v-if="result.type == '项目'" class="project_style" :title="result.type" :value="result.title" :to="`/projectDetails/${result.id}`" clickable/>
             <van-cell v-if="result.type == '户型'" class="house_style" :title="result.type" :value="result.title" :to="`/housingTypeDetails/${result.id}`" clickable/>                   
          </van-cell-group> 
    </div>
  </sail-page>
</template>
<script type="text/javascript">
 
</script>
<script>
  import sailPage from '@/components/sail-page.vue'
  import { mapState } from 'vuex'
  import { Cell, CellGroup } from 'vant';
  import { Toast } from "vant";
  import emptyPageCard from '@/common/widget/emptyPageCard.vue'
  export default {
    components: {
      sailPage,
      emptyPageCard
    },
    computed:{
      ...mapState({
         searchListInfo:state => state.cleanSearchModule.searchListInfo
      })
    },
    data:function(){
      return {
         search_value:''
      }
    },
    methods:{
      back() {
        this.$router.back()
      },
      searchEvent(keyWords) {
        
        this.$store.dispatch('cleanSearchModule/cleanSearch',{
          keyWords
      }).then(res => {

      })
      },
      clean_value() {
        this.search_value = '';
          this.$store.dispatch('cleanSearchModule/cleanSearch',{
            keyWords:''
        }).then(res => {

        })

      },
      enter_search(){
        //
        if (this.search_value != ''){
           this.$router.push({ path: `/mixSearchList/${this.search_value}` }); // -> 编程式跳转
        }else {
           Toast.fail({
             duration: 1000,
             message: '搜索不能为空'
           })
          return false;
        }
        
      }
  }
  }
</script>
<style lang="less">
  @import "~@/common/less/variable.less";
  @nice-searchbg:#F2F2F2;
  @nice-houseColor:#FF7F00;
  @nice-project:#666666;
  .clearSearch_box {	
      .project_style {
         //border:1px solid @nice-red;
         color: @nice-red;
         .van-cell__title {
            text-align: left;
            text-indent: 20px;
            flex: none;
            span {
              border:1px solid @nice-red;      
              padding: 2px 5px;
              border-radius: 10px;
           }
            
         }                         
      }
      .house_style {
         //border:1px solid @nice-houseColor;
         color: @nice-houseColor;       
         .van-cell__title {
            text-align: left;
            text-indent: 20px;
            flex: none;
            span {
              border:1px solid @nice-houseColor;      
              padding: 2px 5px;
              border-radius: 10px;
           }
            
         }
        
         
      }
      
      .van-cell__value {
          text-align: left;
          color: @nice-project;
          font-size: 16px;  
          flex: none;
          text-indent: 15px;   
      }
 }
</style>
<style lang="less" scoped>
     @import "~@/common/less/variable.less";    
     @nice-houseColor:#FF7F00;
     @nice-project:#666666;
     @nice-close-gray:#BABABA;
     .clearSearch_box {
         width: 375px;
         min-height: 100vh;
         background: @nice-bgwhite;        
    	   .search__box {
             width: 375px;
             height: 44px;
             background: @nice-bgwhite;
             display: flex;
             border-bottom: 1px solid @nice-searchbg;
             position: relative;
             .search__input {
                width:285px;
                height: 30px;
                display: block;
                border-radius: 50px;
                background: @nice-searchbg;                
                border:none;
                margin-left: 15px;
                text-indent: 16.8px;
                margin-top: 8px;
                font-size: 16px;
             }
             .go_back {
                width:40px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 12px;
                color: @nice-fontColor;
                margin:9px 0 0 15px;

             }
             .close__icon {
               width: 15px;
               height: 15px;
               position: absolute;
               right: 88px;
               top: 15px;
               color: @nice-close-gray;
             }
         }
         .search_result {
             width: 375px;
             height: 40px;
             //border-bottom: 1px solid @nice-searchbg;
             display: flex;
             line-height: 40px;
             font-size: 16px;
             color: @nice-project;            
             .project_identity {
                width: 41.16px;
                height: 17px;               
                font-size: 11px;
                text-align: center;
                line-height: 19px;
                margin:10px 12px 9px 20px;
                display: block;
                border-radius: 10px;
             }
             

         }
     }

</style>