<template>
  <div class="container" ref="content" @scroll="contentScroll">
    <div class="top" ref="top">
      <div class="location" @click="goLocation">
        <img src="@/assets/home_icon_dingwei.png" alt>
        <span>{{city.split('市')[0]}}</span>
      </div>

      <div class="search">
        <div class="searchContent" @click="goSearch">
          <img src="@/assets/home_icon_search.png" alt>
          <span>搜索小区/商圈/地铁站</span>
        </div>
      </div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in bannerList" :style="{backgroundImage:'url('+item.image+')'}"></div>
        </div>
      </div>
    </div>

    <div v-if="showFixedSearch" ref="searchFixed" class="search searchFixed">
      <div class="searchContent" @click="goSearch">
        <img src="@/assets/home_icon_search.png" alt>
        <span>搜索小区/商圈/地铁站</span>
      </div>
    </div>

    <div class="menu">
      <router-link :to="{name:'getMore',query:{rentingType:'0'},params:{isNext:1}}" class="menu-item">
        <img src="@/assets/home_icon_zhengzhu.png" alt>
        <span>整租</span>
      </router-link>
      <router-link :to="{name:'getMore',query:{rentingType:'1'},params:{isNext:1}}" class="menu-item">
        <img src="@/assets/home_icon_hezhu.png" alt>
        <span>合租</span>
      </router-link>
      <router-link :to="{name:'getMore',query:{rentingType:'2'},params:{isNext:1}}" class="menu-item">
        <img src="@/assets/home_icon_pinpai.png" alt>
        <span>品牌公寓</span>
      </router-link>
      <!-- <div class="menu-item">
                <img src="@/assets/home_icon_ditu.png" alt="">
                <span>地图找房</span>
      </div>-->
    </div>
    <div class="home-title" style="margin-top:0.9rem">精选优质房源</div>
    <div class="home-subtitle" style="margin-top:0.08rem">保证品质和舒适型的精选房源</div>
    <div class="goodsList" v-if="list.length>0" ref="goodsList" @scroll="goodScroll">
      <div class="goodsListContent" :style="{width:list.length*4.2+'rem'}">
        <miniGoodsItem v-for="item in list" :goodsInfo="item"></miniGoodsItem>
      </div>
    </div>
    <div class="showMore" @click="getMore">查看更多优质房源</div>
    <template v-if="recomend.length>0">
      <div class="home-title" style="margin-top:0.9rem">为你推荐</div>
      <!-- <div @click="screenStart" ref="screenBox">
                <screen ref='screenContent'></screen>
      </div>-->
      <div class="largeGoodsList" ref="largeGoodsList">
        <largeGoodsItem :goodsInfo="item" :hasLine="index!=recomend.length-1" v-for="(item,index) in recomend"></largeGoodsItem>
      </div>
    </template>

    <template>
      <div class="left"></div>
    </template>
  </div>
</template>
<script>
import GmButton from '@/components/Button'
import miniGoodsItem from '@/components/MiniGoodsItem'
import screen from '@/components/Screen'
import largeGoodsItem from '@/components/LargeGoodsItem'
import { mapState } from "vuex";
import swiper from 'swiper'
export default {
  data() {
    return {
      city: '南京市',
      list: [],
      recomend: [],
      showFixedSearch: false,
      selectcurrentPage: 0,
      selectFlag: false,
      recommendcurrentPage: 0,
      recommendFlag: false,
      bannerList: []
    }
  },
  created() {
    this.$http.get({
      url: '/bannerInfo/all',
      data: {}
    }).then(res => {
      if (res.success) {
        this.bannerList = res.data
        setTimeout(() => {
          var mySwiper = new Swiper('.swiper-container', {
            autoplay: 5000,
          }, 1000)
        })
      }
    })
    // setTimeout(() => {

    //     wx.getLocation({
    //         type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
    //         success: function (res) {
    //             console.log(res)
    //         }
    //     })
    // }, 1000)
    var geolocation = new qq.maps.Geolocation(
      "GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K",
      "享居屋"
    );
    if (this.locationInfo) {
      this.city = this.locationInfo.fullName
      this.getSelect()
      this.getrecommend()
    }
    else {

      geolocation.getLocation(res => {
        alert(res)

        if (this.city != res.city) {
          this.$alert({ title: '', content: '系统定位您当前在:' + res.city + '，是否切换到' + res.city + '？', showCancel: true, }, () => {
            this.city = res.city
            res.code = res.adcode.toString().slice(0, 4) + '00'
            res.fullName = res.city
            console.log(res)
            this.$store.commit('updateLocationInfo', res)

          }, () => {
            this.$http.get({
              url: '/districtInfo/getOne',
              data: {
                fullName: this.city
              }
            }).then(res => {

              if (res.success) {
                // res.data.city=res.data.fullName
                this.$store.commit('updateLocationInfo', res.data)

                this.getSelect()
                this.getrecommend()
              }
            });

          }, () => {
            this.getSelect()
            this.getrecommend()
          })
        }
        else {
          this.$http.get({
            url: '/districtInfo/getOne',
            data: {
              fullName: this.city
            }
          }).then(res => {

            if (res.success) {
              this.$store.commit('updateLocationInfo', res.data)

              this.getSelect()
              this.getrecommend()
            }
          });
        }
      })

      setTimeout(() => {
        if (!this.locationInfo) {
          this.$alert({ title: '获取定位失败', content: '很抱歉获取定位失败，您可以尝试手动切换城市。', showCancel: false, }, () => {

          })

          this.$http.get({
            url: '/districtInfo/getOne',
            data: {
              fullName: this.city
            }
          }).then(res => {

            if (res.success) {
              // res.data.city=res.data.fullName
              this.$store.commit('updateLocationInfo', res.data)

              this.getSelect()
              this.getrecommend()
            }
          })
        }
      }, 2000)
    }



    wx.ready(() => {
      wx.onMenuShareTimeline({
        title: `享居屋租房———首页`,
        link: 'http://www.xiangjuwu.com/wx/auth?redirectUri=home',
        imgUrl: 'http://www.xiangjuwu.com/images/logo.png'
      })
      wx.onMenuShareAppMessage({
        title: '享居屋租房———首页',
        desc: `让租房变的简单`,
        link: 'http://www.xiangjuwu.com/wx/auth?redirectUri=home',
        imgUrl: 'http://www.xiangjuwu.com/images/logo.png'
      })



    })


    if (this.redirect) {
      this.$router.push(this.redirect)
    }



  },
  watch: {
    city() {
      this.selectcurrentPage = 0
      this.recommendcurrentPage = 0
      this.getSelect()
      this.getrecommend()
    }
  },
  computed: {
    ...mapState(["locationInfo", "redirect"]),
  },
  methods: {
    goLocation() {
      this.$router.push({
        name: 'location'
      })
    },
    goodScroll() {
      var scrollLeft = this.$refs.goodsList.scrollLeft
      var width = this.$refs.goodsList.offsetWidth
      var Allwidth = this.$refs.goodsList.scrollWidth

      if (scrollLeft + width >= Allwidth && this.selectFlag) {

        this.getSelect()
      }
    },
    contentScroll() {
      var scrollTop = this.$refs.content.scrollTop
      var height = this.$refs.content.offsetHeight
      var AllHeight = this.$refs.content.scrollHeight

      if (scrollTop + height >= AllHeight && this.recommendFlag) {
        this.getrecommend()
      }

      if (scrollTop >= this.$refs.top.offsetHeight) {
        // console.log('到了')

      }
      else {
        this.showFixedSearch = false
      }

      // var screenTop = this.$refs.screenBox.offsetTop
      if (this.showFixedSearch) {
        var searchFixed = this.$refs.searchFixed.offsetHeight

        if (scrollTop + searchFixed >= screenTop) {
          this.$refs.searchFixed.style.transform = 'translateY(' + (screenTop - scrollTop - searchFixed) + 'px)'
        }
        else {
          this.$refs.searchFixed.style.transform = 'translateY(0px)'
        }
      }

    },
    goSearch() {
      this.$router.push({
        name: 'search',
        params: {
          'isNext': 1
        }
      })
    },
    screenStart() {
      var AllHeight = this.$refs.content.scrollHeight
      var top = this.$refs.screenBox.offsetTop
      var height = this.$refs.content.offsetHeight

      if (top + height > AllHeight) {
        console.log(AllHeight, top, height)
        console.log(this.$refs.largeGoodsList)
        this.$refs.largeGoodsList.style.marginBottom = top + height - AllHeight + 'px'
      }
      this.$refs.content.scrollTop = top
      this.$refs.screenContent.changeShowSreen(true)
    },
    getSelect() {
      // 精选
      // this.$store.commit('updateLoading', true)
      this.selectFlag = false
      if (this.selectcurrentPage == 0) {
        this.list = []
      }
      this.selectcurrentPage++
      this.$http.get({
        url: '/houseInfo/page',
        data: {
          currentPage: this.selectcurrentPage,
          pageNumber: 20,
          selectedFlag: 'Y',
          statusFlag: 1,
          cityCode: this.locationInfo.code
        }
      }).then(res => {
        // this.$store.commit('updateLoading', false)
        if (res.success) {
          var list = res.data.pp
          if (res.data.page.currentPage == 1) {
            this.list = []
          }
          list.forEach(item => {
            this.list.push(item)
          })
          if (res.data.page.totalPage > res.data.page.currentPage) {
            this.selectFlag = true
          }
        } else {

        }
      });
    },
    getrecommend() {
      // 精选

      this.$loadData({ type: 'isHome', msg: '正在加载数据' })
      this.recommendFlag = false
      if (this.recommendcurrentPage == 0) {
        this.recomend = []
      }
      this.recommendcurrentPage++
      this.$http.get({
        url: '/houseInfo/page',
        data: {
          currentPage: this.recommendcurrentPage,
          pageNumber: 20,
          recommendFlag: 'Y',
          statusFlag: 1,
          cityCode: this.locationInfo.code
        }
      }).then(res => {
        this.$loadData.close()
        if (res.success) {
          var list = res.data.pp
          list.forEach(item => {
            this.recomend.push(item)
          })
          if (res.data.page.totalPage > res.data.page.currentPage) {
            this.recommendFlag = true
          }
        } else {

        }
      });
    },
    getMore() {
      this.$router.push({
        name: 'getRecommend',
        query: {
          recommendFlag: 'Y'
        },
        params: {
          isNext: 1
        }
      })
    }
  },
  components: { GmButton, miniGoodsItem, largeGoodsItem, screen }
}
</script>
<style lang="less" scoped>
@import "../swiper.css";
.container {
  background-color: #fff;
}

.top {
  min-height: 4rem;
  height: 4rem;
  background: rgba(44, 74, 98, 0.1);
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  .location {
    padding: 0 0.24rem 0 0.2rem;
    height: 0.6rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.3rem;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0.24rem;
    left: 0.3rem;
    z-index: 2;
    white-space: nowrap;
    img {
      width: 0.28rm;
      height: 0.28rem;
    }

    span {
      font-size: 0.24rem;
      color: rgba(255, 255, 255, 1);
      line-height: 0.34rem;
      margin-left: 0.08rem;
    }
  }

  .swiper-container {
    width: 100%;
    height: 100%;
    z-index: 1;
    .swiper-slide {
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}
.search {
  border-radius: 0.4rem 0.4rem 0 0;
  height: 0.4rem;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  z-index: 2;
  .searchContent {
    margin: 0 0.3rem;
    height: 0.8rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rem 0.12rem 0.32rem 0rem rgba(147, 147, 147, 0.5);
    border-radius: 0.44rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 0.32rem;
      height: 0.32rem;
    }

    span {
      font-size: 0.24rem;
      font-weight: bold;
      color: rgba(173, 173, 173, 1);
      line-height: 0.34rem;
      margin-left: 0.1rem;
    }
  }

  &.searchFixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1.2rem;
    padding: 0.2rem 0;
    border-radius: 0;

    .searchContent {
      transform: translateY(0);
      box-shadow: none;
      background-color: #f2f4f5;
    }
  }
}

.menu {
  display: flex;
  margin-top: 0.66rem;
  justify-content: space-around;
  min-height: 1.58rem;
  padding: 0 0.3rem;
  .menu-item {
    display: flex;
    flex-direction: column;
    // flex-grow: 1;
    align-items: center;
    img {
      width: 1.04rem;
      height: 1.04rem;
    }
    span {
      font-size: 0.24rem;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      line-height: 0.34rem;
      margin-top: 0.2rem;
    }
  }
}

.home-title {
  font-size: 0.4rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  line-height: 0.56rem;
  padding: 0 0.3rem;
}
.home-subtitle {
  font-size: 0.28rem;
  color: rgba(102, 102, 102, 1);
  line-height: 0.4rem;
  padding: 0 0.3rem;
}

.goodsList {
  overflow-x: auto;
  height: 5.08rem;
  min-height: 5.08rem;
  padding: 0.4rem 0 0.5rem 0;
  .goodsListContent {
    padding: 0 0.3rem 0 0.1rem;
    display: flex;
  }
}
.showMore {
  width: 2.6rem;
  height: 0.56rem;
  border-radius: 0.04rem;
  border: 0.02rem solid rgba(21, 168, 170, 1);
  font-size: 0.26rem;
  text-align: center;
  color: rgba(21, 168, 170, 1);
  line-height: 0.56rem;
  margin: 0 0.3rem;
}
.siliterTop {
  height: 0.88rem;
  min-height: 0.88rem;
}
.largeGoodsList {
  padding-bottom: 1rem;
}
</style>


