<template>
  <div class="search">
    <!-- 搜索 -->
    <header>
      <form action="/" class="search-wrap pr">
        <i class="icon icon-jiantou-zuo" @click="onCancel"/>
        <van-search
          v-model="value"
          placeholder="目的地、区域、公寓名称"
          show-action
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </header>
    <div class="search-list">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check='false'
          :offset="200"
          @load="onLoad"
        >
          <div class="list" v-for="(item, index) in data" :key="index" @click="goNextPage(item)">
            <div class="flex">
              <p class="lineHidden">{{item.name}}</p>
              <i class="icon icon-zuobiao" v-show="item.type === 'address'"/>
              <i class="icon icon-gongyu" v-show="item.type === 'building'"/>
            </div>
          </div>
        </van-list>
        <is-empty v-if="isEmpty"></is-empty>
      </van-pull-refresh>
      <!-- <p class="more">加载更多...</p> -->
    </div>
  </div>
</template>

<script>
import IsEmpty from "@/components/common/IsEmpty";

export default {
  components: {
    IsEmpty
  },
  data() {
    return {
      value: "",
      data: [],
      pages: {},
      page: 0,
      isEmpty: false,
      lastId: null,
      loading: false,
      finished: false,
      isLoading: false,
      lang: this.$store.state.langStr,
      cityItem: this.$util.storage.fetch("CityItem")
    };
  },
  created() {
    this.verificationCity();
  },
  watch: {
    value(val) {
      let _this = this;
      clearTimeout(this.timer);
      this.timer = setTimeout(function() {
        _this.value = val;
        _this.getData();
      }, 500);
    }
  },
  methods: {
    // 重新请求国家城市进行验证
    getCountryList() {
      let params = {};
      params.url = this.$apis.api_national_real_all_city;
      this.$net.req(params, this).then(res => {
        this.$store.commit("setCountryArr", res.data);
        this.verificationCity();
      });
    },
    // 验证城市
    verificationCity() {
      let cityName = this.$route.params.cityTag;
      let countryArr = this.$store.state.countryArr;
      let isTrue = null;
      if (countryArr.length) {
        countryArr.some(el => {
          el.son.some(element => {
            if (cityName == element.other_name) {
              isTrue = true;
              this.$util.storage.save("CityItem", element);
              this.cityItem = element;
              return true;
            }
          });
        });
      } else {
        this.getCountryList();
      }
      if (!isTrue && countryArr.length) {
        this.$Dialog
          .alert({
            message: "城市信息错误，请重新选择。"
          })
          .then(() => {
            this.$router.push({
              path: `/${this.lang}/guide`
            });
          });
      }
    },
    // 上拉加载
    onLoad() {
      setTimeout(() => {
        this.getData("onLoad");
      }, 500);
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.getData("onRefresh");
      }, 500);
    },
    // 获取数据
    getData(val) {
      let params = {};
      params.url = this.$apis.api_search_fill;
      if (val !== "onLoad") {
        this.page = 0;
        this.lastId = null;
      }
      this.page = this.page + 1;
      params.data = {
        id: this.cityItem.id,
        keywords: this.value,
        lastId: this.lastId,
        limit: 10
      };
      this.$net.req(params, this).then(
        res => {
          let data = res.data.list;
          this.lastId = data.slice(-1).id;
          this.pages.totalCount = res.data.totalCount;
          if (val === "onLoad") {
            this.loading = false;
            if (this.page * params.data.limit >= this.pages.totalCount) {
              this.finished = true;
              this.isEmpty = true;
            }
            this.data = this.data.concat(data);
          } else {
            this.data = data;
          }
          if (val === "onRefresh") {
            this.$toast("刷新成功");
            this.isLoading = false;
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 跳转页面
    goNextPage(item) {
      if (item.type === "address") {
        this.$router.push({
          path: `/${this.lang}/${this.cityItem.other_name}/buildings`,
          query: {
            locationId: item.id
          }
        });
      } else if (item.type === "building") {
        this.$router.push({
          path: "/" + this.lang + "/building/" + item.id
        });
      }
    },
    // 搜索确定
    onSearch() {},
    // 搜索取消
    onCancel() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    // building列表页
    search() {
      this.$router.push({
        path: `/${this.lang}/${this.cityItem.other_name}/buildings`
      });
    }
  }
};
</script>

<style scoped lang='less'>
.search {
  position: relative;
  height: 100vh;
  header {
    padding: 5px 8px 15px;
    position: relative;
    z-index: 3;
    border-bottom: 1px solid #ddd;
    .search-wrap {
      height: 45px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      .van-search {
        background: #fff !important;
      }
      input {
        height: 45px;
        line-height: 45px;
        border-radius: 4px;
        border: 0;
        font-size: 14px;
        color: #bbb;
        width: 100%;
        padding: 4px 10px 4px 30px;
        background: rgba(250, 250, 250, 1);
      }
      input::-webkit-input-placeholder {
        color: #bbb;
      }
      .input:-moz-placeholder {
        color: #bbb;
      }
      .input:-ms-input-placeholder {
        color: #bbb;
      }
      i {
        position: absolute;
        left: 0;
        top: 5px;
        width: 32px;
        height: 32px;
        font-size: 22px;
        text-align: center;
        line-height: 32px;
      }
    }
  }
  .search-list {
    height: 100vh;
    overflow: auto;
    .list {
      padding: 0 20px;
      > div {
        height: 60px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
        p {
          color: #333;
          font-size: 15px;
        }
        i {
          width: 32px;
          height: 32px;
          font-size: 20px;
          text-align: center;
          line-height: 32px;
          color: #ff3d2c;
          flex-shrink: 0;
        }
      }
    }
    .more {
      margin: 20px 0;
      font-size: 14px;
      color: #999;
      font-weight: 400;
      text-align: center;
    }
  }
}
</style>
