<template>
    <view class="Search">
          <custom-navbar title="搜索园所" id="custom-navbar"/>
          <view class="search-btn">
             <van-search
                show-action
                shape="round"
                :value="value"
                :focus="true"
                placeholder="请输入园所关键词"
                @search="changeValue"
                @cancel="cancelSearch"
            />
          </view>

        <view class="garden-list">
            <garden-card :districtGardenData='districtGardenData'  />
        </view>
         
          <!-- <view class="search-list">
              <view class="search-list-item" @click="searchSchool(item)" v-for="item in searchList" :key="item.id">
                <text 
                    v-for="(ele,index) in item.labelList" 
                    :key="index"
                    :style="{color: value.includes(ele) ? '#42516C' : ''}"
                    >
                        {{ele}}
                </text>
              </view>
          </view> -->
    </view>
</template>

<script>
import CustomNavbar from '@/components/CustomNavbar'
import { dimSearch } from '@/api/districtGarden.js'

import Tip from '@/utils/tip.js'

export default {
  name: 'Search',
  components: {
      CustomNavbar
  },
  computed: {
      searchList () {
          if (this.value === '') return []
          const result = this.searchResult.filter( item => {
           
              item.labelList = item.schoolName.split('')
            return item.schoolName.includes(this.value)
          })
          return result
      }
  },
  
  data () {
      return {
          value: '',
          searchResult: [],
          districtGardenData: []
      }
  },
  methods: {
    // 查询对应搜索结果
    searchSchool (item) {
        console.log(item);
        uni.redirectTo({
            url: `/pages/districtGarden/index?name=${item.schoolName}`
        })
    },
    //  搜索
      async dimSearch (schoolName) {
        const { data, status } = await dimSearch({schoolName})
        if (status === 200) {
            if (data.length === 0) {
                this.districtGardenData = []
                Tip.error('没有搜索到园所')
                return 
            }
            this.districtGardenData = Object.freeze(data)
        }
      },
      search (e) {
        this.searchSchool(e.detail)
      },
      cancelSearch () {
          uni.navigateBack({
            delta: 1
          })
      },
      changeValue(e) {
        if (e.detail.length === 0) {
            return
        }
        this.dimSearch(e.detail) 
          this.value = e.detail
      }
  }
}
</script>
<style scoped lang="less">
.Search {
    height: 100vh;
    background: #F5F6FA;
}
.search-list {
    margin-top: 10rpx;
    background-color: #fff;
    padding: 0 32rpx;
    &-item {
        height: 92rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 2rpx solid #F6F6F6;
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #9C9AAB;
        box-sizing: border-box;
    }
}

.search-btn {
    width: 100%;
    height: 102rpx;
    box-shadow: 0rpx 6rpx 88rpx 0rpx rgba(0, 0, 0, 0.04);
   
}

/deep/ .van-icon-search {
    display: none;
}
/deep/ .van-search__action {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
}


// 园所列表
    .garden-list {
         width: 686rpx;
         margin: 0 auto;
    }

</style>