<template>
  <view class="page">
    <u-navbar placeholder fixed>
      <template slot="left">
        <view style="display: flex;align-items: center;height: 44px;">
          <image style="height: 30px;" src="@/static/logo-chang.jpg" mode="heightFix"></image>
        </view>
      </template>
    </u-navbar>
    <!-- 搜索 -->
    <u-sticky :offset-top="stickyTop" zIndex="999">
      <view class="search-fix fixed" v-if="scrollTop < 30">
        <view class="search">
          <u-notice-bar bgColor="#ffffff" direction="column" :text="hotKeywords" speed="250"
                        @click="onNoticeBar"></u-notice-bar>
          <!-- <uni-data-select class="select-width" v-model="where.region" :localdata="region"
            placeholder="所在区域"></uni-data-select> -->
          <view class="input">
            <u-search placeholder="您想找哪里" bgColor="#ffffff" v-model="where.keywords" :showAction="false"
                      :animation="true" @search="onSearch"></u-search>
          </view>
        </view>
      </view>
      <view class="search-fix" v-else>
        <view class="search">
          <u-notice-bar bgColor="#ffffff" direction="column" :text="hotKeywords" speed="250"></u-notice-bar>
          <!-- <uni-data-select class="select-width" v-model="where.region" :localdata="region"
            placeholder="所在区域"></uni-data-select> -->
          <view class="input">
            <u-search placeholder="您想找哪里" bgColor="#ffffff" v-model="where.keywords" :showAction="false"
                      :animation="true" @search="onSearch"></u-search>
          </view>
        </view>
      </view>
    </u-sticky>
    <!-- 幻灯片 -->
    <view class="swiper">
      <u-swiper :list="swiperList" :height="180" :radius="0" @click="click"></u-swiper>
    </view>
    <view class="ai-entry" @click="goAiHouse">
      <view class="ai-entry-left">
        <image class="ai-avatar"
               :src="aiEntryImage"
               mode="aspectFill"></image>
        <view class="ai-entry-text">
          <view class="ai-entry-title">AI 找房</view>
          <view class="ai-entry-desc">输入需求，自动筛选匹配房源</view>
        </view>
      </view>
      <view class="ai-entry-btn">AI找房</view>
    </view>
    <!-- 选项卡 -->
    <view class="tabs">
      <u-tabs :list="menu" @click="onClick"></u-tabs>
    </view>
    <uv-waterfall ref="waterfall" v-model="list" left-gap="10" right-gap="10" column-gap="8"
                  @changeList="changeList">
      <!-- 第一列数据 -->
      <template v-slot:list1>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view class="house-list">
          <block v-for="(item,index) in list1" :key="index">
            <view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
              <image :src="item.files[0].url" mode="widthFix">
              </image>
              <view class="info">
                <view class="title">{{ item.houseTitle }}</view>
                <view class="desc">
                  <text>{{ item.extent }}m²|{{ item.toward }}</text>
                </view>
                <view class="price">{{ item.monthlyRent }}元/月</view>
              </view>
            </view>
          </block>
        </view>
      </template>
      <!-- 第二列数据 -->
      <template v-slot:list2>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view class="house-list">
          <block v-for="(item,index) in list2" :key="index">
            <view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
              <image :src="item.files[0].url" mode="widthFix">
              </image>
              <view class="info">
                <view class="title">{{ item.houseTitle }}</view>
                <view class="desc">
                  <text>{{ item.extent }}m²|{{ item.toward }}</text>
                </view>
                <view class="price">{{ item.monthlyRent }}元/月</view>
              </view>
            </view>
          </block>
        </view>
      </template>
    </uv-waterfall>
    <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length == 0">
    </u-empty>
    <view class="ai-float-entry" v-if="showAiFloatEntry" @click="goAiHouse">
      <image
        class="ai-float-image"
        :src="aiFloatImage"
        mode="aspectFill"
      ></image>
    </view>
    <!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
      @scrolltolower="lower" @scroll="onScroll">
      <view class="house-list" v-if="list.length > 0">
        <block v-for="(item,index) in list" :key="index">
          <view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
            <image :src="item.files[0].url" mode="widthFix">
            </image>
            <view class="info">
              <view class="title">{{ item.houseTitle }}</view>
              <view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
              <view class="price">{{ item.rent }}元/月</view>
            </view>
          </view>
        </block>
      </view>
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length == 0">
      </u-empty>
    </scroll-view> -->
  </view>
</template>

<script>
import * as Util from '@/utils/util.js'
import store from '@/store'
import storage from '@/utils/storage'
import * as DictApi from '@/api/dict.js'
import * as HouseInfoApi from '@/api/house-info.js'
import * as HouseAiConfigApi from '@/api/house-ai-config.js'

const DEFAULT_AI_ENTRY_IMAGE = 'https://oss.wsdns.cn/20260626/f5f7d5996e4f45ce8bb24c7c455d07d4.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90'
const DEFAULT_AI_FLOAT_IMAGE = 'https://oss.wsdns.cn/20260626/e666a52de6724578b6df007fcacbbe21.gif?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90'
const menu = [{
  name: '为您推荐',
  reset: true
},
  {
    name: '特价好房',
    reset: false
  }
];
const loginUserId = uni.getStorageSync('userId')

export default {
  data() {
    return {
      list: [],
      list1: [],
      list2: [],
      loadMore: true,
      status: '加载更多',
      page: 1,
      where: {
        recommend: 1,
        status: 0
      },
      region: [],
      // 控制onShow事件是否刷新订单列表
      canReset: false,
      disabled: false,
      swiperList: [
        'https://oss.wsdns.cn/20240708/9e1f58e7fc7b4bad92edd852ff34dbcb.png?x-oss-process=image/resize,w_750/quality,Q_90',
        'https://oss.wsdns.cn/20240708/c95838b78b5746eb934daffb12a2efdc.png?x-oss-process=image/resize,w_750/quality,Q_90',
      ],
      hotKeywords: [
        '五象航洋城',
        '富雅国际金融中心'
      ],
      menu,
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      stickyTop: 60,
      aiEntryBottom: 0,
      showAiFloatEntry: false,
      aiEntryImage: DEFAULT_AI_ENTRY_IMAGE,
      aiFloatImage: DEFAULT_AI_FLOAT_IMAGE
    };

  },
  onLoad() {
    this.loadAiConfig()
    this.getDict()
    this.list = []
    this.onRefreshList()
    uni.$u.mpShare = {
      title: '爱尚家找房'
    }

    uni.getSystemInfo({
      success: (res) => {
        this.stickyTop = res.statusBarHeight + 44 + 20
      }
    })
  },
  onShow() {
  },
  onReady() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.updateAiEntryPosition()
      }, 300)
    })
  },
  onBackPress() {
  },
  onUnload() {

  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
    this.updateAiFloatEntry()
  },
  // 触底函数
  onReachBottom() {
    console.log("触底函数: ");
    const app = this
    if (app.loadMore) {
      app.page = ++app.page;
      app.onRefreshList()
    }
  },
  methods: {
    changeList(e) {
      this[e.name].push(e.value);
    },
    getDict() {
      DictApi.getDictionaryOptions({
        dictCode: 'region'
      }).then(res => {
        this.region = res.data.map(d => {
          return {
            value: d.dictDataCode,
            text: d.dictDataName
          }
        })
      })
    },
    async loadAiConfig() {
      try {
        const result = await HouseAiConfigApi.getCurrentHouseAiConfig()
        const data = result && result.data ? result.data : result
        this.aiEntryImage = data?.aiEntryImage || DEFAULT_AI_ENTRY_IMAGE
        this.aiFloatImage = data?.aiFloatImage || DEFAULT_AI_FLOAT_IMAGE
      } catch (error) {
        this.aiEntryImage = DEFAULT_AI_ENTRY_IMAGE
        this.aiFloatImage = DEFAULT_AI_FLOAT_IMAGE
      }
    },
    onRefreshList() {
      const app = this
      const userId = uni.getStorageSync('userId')
      app.where.page = app.page
      return new Promise((resolve, reject) => {
        HouseInfoApi.pageHouseInfo(app.where)
          .then(result => {
            const list = result.data.list.map(d => {
              d.files = JSON.parse(d.files) || []
              return d
            })
            // 合并新数据
            app.list.push.apply(app.list, list);
            if (result.data.count > app.list.length) {
              app.canReset = true
            } else {
              app.canReset = false
            }
            resolve(list)
          })
      })
    },
    onClick(e) {
      const index = e.index
      this.where = {}
      if (index == 0) {
        this.where.recommend = 1
        this.where.status = 0
      }
      if (index == 1) {
        this.where.mustSee = 1
        this.where.status = 0
      }
      this.onSearch()
    },
    onNoticeBar(index) {
      // console.log('this.hotKeywords[index]: ',this.hotKeywords[index]);
      this.where.keywords = this.hotKeywords[index]
      this.onSearch()
    },
    goAiHouse() {
      uni.navigateTo({
        url: '/pages/ai-house/index'
      })
    },
    updateAiEntryPosition() {
      uni.createSelectorQuery()
        .in(this)
        .select('.ai-entry')
        .boundingClientRect(rect => {
          if (!rect) return
          this.aiEntryBottom = rect.top + rect.height + this.scrollTop
          this.updateAiFloatEntry()
        })
        .exec()
    },
    updateAiFloatEntry() {
      this.showAiFloatEntry = this.aiEntryBottom > 0 && this.scrollTop >= this.aiEntryBottom
    },
    onSearch() {
      this.list = [];
      this.$refs.waterfall.clear();
      this.list1 = [];
      this.list2 = [];
      this.page = 1
      this.onRefreshList()
      // this.$push('/sub_pages/member/member', this.where)
    },
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
.page {
  .search-fix {
    width: 600rpx;
    margin: auto;
    background-color: #ffffff;
    display: flex;
    border-radius: 100rpx;
    box-shadow: 0 3rpx 10rpx 0px #cccccc;

    .search {
      width: 580rpx;
      margin: 15rpx auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .region {
        width: 170rpx;
        color: #666666;
        font-size: 28rpx;
      }

      .input {
        width: 330rpx;
      }
    }
  }

  .fixed {
    position: fixed;
    top: 300rpx;
    left: 75rpx;
  }

  .no-fixed {
    position: absolute;
    top: 0rpx;
    left: 75rpx;
  }

  .tabs {
    //margin-top: 80rpx;
  }

  .ai-entry {
    width: calc(100% - 88rpx);
    margin: 26rpx 20rpx;
    padding: 22rpx 24rpx;
    border-radius: 999rpx;
    border: 2rpx solid transparent;
    background: #ffffff;
    background-origin: border-box;
    background-clip: padding-box;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #4f7cff, #32c5a6);
    background-clip: padding-box, border-box;
    box-shadow: 0 10rpx 28rpx rgba(63, 114, 244, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ai-entry-left {
      display: flex;
      align-items: center;
    }

    .ai-avatar {
      width: 92rpx;
      height: 92rpx;
      border-radius: 50%;
      background: #ffffff;
      flex-shrink: 0;
    }

    .ai-entry-text {
      margin-left: 18rpx;
      display: flex;
      flex-direction: column;

      .ai-entry-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #1f2a37;
      }

      .ai-entry-desc {
        margin-top: 8rpx;
        font-size: 24rpx;
        color: #667085;
      }
    }

    .ai-entry-btn {
      min-width: 160rpx;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      color: #ffffff;
      font-size: 28rpx;
      font-weight: 600;
      border-radius: 999rpx;
      background: linear-gradient(to right, #3f72f4, #7a9cf3);
      box-shadow: 0 10rpx 20rpx rgba(63, 114, 244, 0.22);
    }
  }

  .ai-float-entry {
    position: fixed;
    right: 28rpx;
    bottom: calc(48rpx + env(safe-area-inset-bottom));
    z-index: 1000;
    width: 132rpx;
    height: 132rpx;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 12rpx 32rpx rgba(31, 42, 55, 0.2);
  }

  .ai-float-image {
    display: block;
    width: 132rpx;
    height: 132rpx;
  }

  .house-list {
    // width: 700rpx;
    // margin: 20rpx auto;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;

    .item {
      margin-bottom: 40rpx;
      border-radius: 20rpx;
      // box-shadow: 0 3rpx 10rpx 0px #cccccc;
      background-color: #ffffff;
      width: 338rpx;

      image {
        border-radius: 20rpx 20rpx 0 0;
        height: 420rpx;
        width: 338rpx;
      }

      .info {
        padding: 20rpx 20rpx;
        display: flex;
        flex-direction: column;

        .title {
          font-size: 30rpx;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden; //溢出内容隐藏
          text-overflow: ellipsis; //文本溢出部分用省略号表示
          display: -webkit-box; //特别显示模式
          -webkit-line-clamp: 2; //行数
          line-clamp: 2;
          -webkit-box-orient: vertical; //盒子中内容竖直排列
        }

        .desc {
          color: #999999;
          font-size: 28rpx;
        }

        .price {
          color: #ff0000;
          font-size: 30rpx;
        }
      }
    }
  }
}

.select-width {
  width: 200rpx;
}
</style>
