<!--
  页面：未来到家（原「到家服务」，按设计稿重做）
  说明：顶部红头（品牌 + 城市 + 关键词搜索）；二级分类以「金刚区」展示；
        下面商品用瀑布流（与首页好店一致：两列、图片按原始宽高比）。
        大类「到家服务 / 家政服务」的 tab 忽略，金刚区改为铺开展示两大类下的全部小类
        （后端 /service/category/sub-list）。默认瀑布流取金刚区第一个小类的商品列表。
-->
<template>
  <view class="fh-page">
    <!-- 顶部红头 -->
    <view class="fh-hd" :style="{ paddingTop: statusBarTop + 'px' }">
      <view class="fh-hd-top">
        <view class="fh-back" @tap="goBack">
          <u-icon name="arrow-left" color="#fff" size="36"></u-icon>
        </view>
        <view class="fh-brand">
          <text class="fh-brand-title">未来到家</text>
          <text class="fh-brand-sub">专业服务 · 品质到家</text>
        </view>
      </view>

      <!-- 搜索栏 -->
      <view class="fh-search">
        <view class="fh-search-city">
          <text class="fh-city-name">{{ cityName }}</text>
          <text class="fh-city-arrow">▾</text>
        </view>
        <input class="fh-search-input" v-model="keyword" placeholder="空调清洗" placeholder-class="fh-search-ph"
          confirm-type="search" @confirm="doSearch" />
        <view class="fh-search-btn" @tap="doSearch">搜索</view>
      </view>
    </view>

    <view class="fh-body">
      <!-- 金刚区：二级分类 -->
      <view class="fh-grid" v-if="categoryList.length">
        <view class="fh-grid-item" v-for="cat in categoryList" :key="cat.id" @tap="selectCate(cat)">
          <image class="fh-grid-icon" :src="picUrl + cat.category_pic" mode="aspectFit" />
          <text class="fh-grid-txt" :class="{ on: currentCate === cat.id }">{{ cat.category_name }}</text>
        </view>
      </view>

      <!-- 商品瀑布流（与首页好店一致：两列，图片按原始宽高比） -->
      <view class="wf">
        <view class="wf-col">
          <view class="wf-card" v-for="item in leftCol" :key="item.id" @tap="toDetail(item)">
            <image class="wf-img" :src="item.showImg" :style="{ height: item.imgH + 'rpx' }" mode="aspectFill" />
            <view class="wf-meta">
              <view class="wf-name">{{ item.service_name }}</view>
              <view class="wf-desc" v-if="item.intro">{{ item.intro }}</view>
              <text class="wf-tag" v-if="cateMap[item.category_id]">{{ cateMap[item.category_id] }}</text>
              <view class="wf-foot">
                <text class="wf-price" v-if="item.price_desc">{{ item.price_desc }}</text>
                <text class="wf-book">去预约</text>
              </view>
            </view>
          </view>
        </view>
        <view class="wf-col">
          <view class="wf-card" v-for="item in rightCol" :key="item.id" @tap="toDetail(item)">
            <image class="wf-img" :src="item.showImg" :style="{ height: item.imgH + 'rpx' }" mode="aspectFill" />
            <view class="wf-meta">
              <view class="wf-name">{{ item.service_name }}</view>
              <view class="wf-desc" v-if="item.intro">{{ item.intro }}</view>
              <text class="wf-tag" v-if="cateMap[item.category_id]">{{ cateMap[item.category_id] }}</text>
              <view class="wf-foot">
                <text class="wf-price" v-if="item.price_desc">{{ item.price_desc }}</text>
                <text class="wf-book">去预约</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="wf-more" v-if="hasMore && (leftCol.length || rightCol.length)">上拉加载更多</view>
      <view class="wf-more" v-else-if="leftCol.length || rightCol.length">没有更多了</view>
      <view class="fh-empty" v-if="!leftCol.length && !rightCol.length && !loadingMore">暂无服务</view>
    </view>
  </view>
</template>

<script>
import { request, picUrl, NavgateTo, menuButtonInfo } from '@/utils'
import { apiArr } from '@/api/homeService'

// 瀑布单列图片宽度（rpx）：与首页好店一致 (750-60)/2 = 345
const WF_COL_W = 345
// 卡片文字区估算高度，仅用于两列高度均衡
const WF_META_H = 150

export default {
  data() {
    return {
      picUrl,
      statusBarTop: 0,
      cityName: '定位中',
      keyword: '',
      categoryList: [],
      cateMap: {},        // 分类 id → 名称，用作商品卡片的红色标签
      currentCate: 0,
      // 瀑布两列
      leftCol: [],
      rightCol: [],
      colHeights: [0, 0],
      page_num: 1,
      page_size: 10,
      hasMore: true,
      loadingMore: false
    }
  },
  onLoad() {
    const menu = menuButtonInfo()
    this.statusBarTop = menu.top || 0
    const loc = uni.getStorageSync('location') || {}
    this.cityName = loc.cityName || '定位中'
    this.initData()
  },
  onPullDownRefresh() {
    this.initData().finally(() => uni.stopPullDownRefresh())
  },
  onReachBottom() {
    if (this.hasMore && !this.loadingMore) this.loadList(false)
  },
  methods: {
    async initData() {
      await this.loadCategory()
      // 默认取金刚区第一个分类的商品列表
      this.currentCate = this.categoryList.length ? this.categoryList[0].id : 0
      this.keyword = ''
      await this.loadList(true)
    },
    async loadCategory() {
      try {
        // 两大类(到家1+家政2)全部小类合并，供金刚区铺开展示
        const res = await request(apiArr.categorySubList, 'POST', {}, {}, false)
        this.categoryList = (res && res.rows) ? res.rows : []
        const map = {}
        this.categoryList.forEach(c => { map[c.id] = c.category_name })
        this.cateMap = map
      } catch (e) {
        this.categoryList = []
        this.cateMap = {}
      }
    },
    selectCate(cat) {
      // 金刚区图标点击 → 打开服务目录页（左侧小类导航 + 右侧分组商品），定位到该小类
      NavgateTo('/packages/homeService/catalog/index?cate_id=' + cat.id, { isLogin: false })
    },
    doSearch() {
      // 关键词搜索：跨分类
      this.currentCate = 0
      this.loadList(true)
    },
    async loadList(reset) {
      if (this.loadingMore) return
      this.loadingMore = true
      if (reset) {
        this.page_num = 1
        this.hasMore = true
        this.leftCol = []
        this.rightCol = []
        this.colHeights = [0, 0]
      }
      try {
        const res = await request(apiArr.serviceList, 'POST', {
          // service_type 传 0(不限)：金刚区含两大类小类，靠 category_id 唯一定位；搜索时跨两大类
          service_type: 0,
          category_id: this.currentCate,
          keyword: this.keyword,
          page_num: this.page_num,
          page_size: this.page_size
        }, {}, false)
        const rows = (res && res.rows) ? res.rows : []
        rows.forEach((item) => {
          // 封面图可能是逗号分隔多张，列表取第一张
          const cover0 = item.cover_pic ? String(item.cover_pic).split(',')[0] : ''
          item.showImg = cover0 ? picUrl + cover0 : ''
        })
        this.hasMore = rows.length === this.page_size
        if (this.hasMore) this.page_num++
        await this.appendMasonry(rows)
      } catch (e) {
        console.warn('服务列表加载失败:', e)
      } finally {
        this.loadingMore = false
      }
    },
    // 逐条量图片宽高比 → 追加到较矮的一列，制造瀑布（与首页好店一致）
    async appendMasonry(rows) {
      for (const item of rows) {
        let ratio = 0.8
        if (item.showImg) {
          try {
            const info = await new Promise((resolve, reject) => {
              uni.getImageInfo({ src: item.showImg, success: resolve, fail: reject })
            })
            if (info && info.width) ratio = info.height / info.width
          } catch (e) { /* 用默认比例 */ }
        }
        item.imgH = Math.round(WF_COL_W * ratio)
        const target = this.colHeights[0] <= this.colHeights[1] ? 0 : 1
        if (target === 0) this.leftCol.push(item)
        else this.rightCol.push(item)
        this.colHeights[target] += item.imgH + WF_META_H
      }
    },
    toDetail(item) {
      NavgateTo('/packages/homeService/detail/index?id=' + item.id)
    },
    goBack() {
      uni.navigateBack({ delta: 1, fail: () => { NavgateTo('/pages/index2/index2') } })
    }
  }
}
</script>

<style scoped>
page { background: #f5f6f8; }
.fh-page { min-height: 100vh; background: #f5f6f8; }

/* ===== 顶部红头（吸顶：搜索栏不随页面滚动） ===== */
.fh-hd {
  position: sticky;
  top: 0;
  z-index: 100;
  /* 设计稿：横向红色渐变 90deg #FF1A1F → #FF634A */
  background: linear-gradient(90deg, #ff1a1f 0%, #ff634a 100%);
  padding-left: 28rpx;
  padding-right: 28rpx;
  padding-bottom: 28rpx;
}
.fh-hd-top {
  position: relative;
  display: flex;
  align-items: center;
  height: 80rpx;
}
.fh-back {
  position: absolute;
  left: 0;
  top: 0;
  height: 80rpx;
  display: flex;
  align-items: center;
  padding-right: 16rpx;
}
.fh-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 56rpx;
}
.fh-brand-title {
  /* 设计稿 33px ≈ 58rpx */
  font-size: 58rpx;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2rpx;
}
.fh-brand-sub {
  margin-top: 8rpx;
  /* 设计稿 12px ≈ 21rpx */
  font-size: 21rpx;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 4rpx;
}

/* 搜索栏 */
.fh-search {
  display: flex;
  align-items: center;
  height: 77rpx;
  margin-top: 22rpx;
  background: #fff;
  border-radius: 42rpx;
  padding: 0 8rpx 0 26rpx;
}
.fh-search-city {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* 设计稿城市 16px ≈ 28rpx，#111111 */
  font-size: 28rpx;
  color: #111;
  max-width: 180rpx;
}
.fh-city-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fh-city-arrow {
  margin-left: 6rpx;
  font-size: 22rpx;
  color: #666;
}
.fh-search-city::after {
  content: '';
  width: 2rpx;
  height: 34rpx;
  background: #d9d9d9;
  margin: 0 20rpx;
}
.fh-search-input {
  flex: 1;
  /* 设计稿搜索词 15px ≈ 26rpx */
  font-size: 26rpx;
  color: #333;
}
.fh-search-ph { color: #a0a0a0; }
.fh-search-btn {
  flex-shrink: 0;
  /* 设计稿搜索按钮 64×36px ≈ 112×63rpx，#FF3929，radius 18px≈31rpx */
  height: 63rpx;
  line-height: 63rpx;
  min-width: 112rpx;
  text-align: center;
  padding: 0 26rpx;
  background: #ff3929;
  color: #fff;
  font-size: 26rpx;
  font-weight: 700;
  border-radius: 31rpx;
}

/* ===== 主体 ===== */
.fh-body {
  position: relative;
  margin-top: -12rpx;
  padding: 20rpx 20rpx 40rpx;
}

/* 金刚区 */
.fh-grid {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 6rpx 4rpx;
}
.fh-grid-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 26rpx;
}
.fh-grid-icon {
  /* 设计稿分类图标底 46×46px ≈ 80rpx，浅暖底 #FFF4F0 */
  width: 80rpx;
  height: 80rpx;
  border-radius: 18rpx;
  background: #fff4f0;
  box-sizing: border-box;
  padding: 8rpx;
}
.fh-grid-txt {
  margin-top: 12rpx;
  /* 设计稿分类文字 14px ≈ 24rpx，#111111 */
  font-size: 24rpx;
  color: #111;
  text-align: center;
}
.fh-grid-txt.on {
  color: #ff3929;
  font-weight: 600;
}

/* ===== 瀑布流（与首页好店一致） ===== */
.wf {
  display: flex;
  align-items: flex-start;
  margin-top: 20rpx;
}
.wf-col {
  width: 345rpx;
}
.wf-col:first-child {
  margin-right: 20rpx;
}
.wf-card {
  background: #fff;
  /* 设计稿卡片：1px #EDEDED 描边，radius 10px≈17rpx */
  border: 1rpx solid #ededed;
  border-radius: 17rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}
.wf-img {
  width: 100%;
  display: block;
  background: #eee;
}
.wf-meta {
  padding: 16rpx 14rpx;
}
.wf-name {
  /* 设计稿标题 15px≈26rpx，#111111 */
  font-size: 26rpx;
  font-weight: 700;
  color: #111;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wf-desc {
  margin-top: 8rpx;
  /* 设计稿描述 11px≈19rpx，#777777 */
  font-size: 19rpx;
  color: #777;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 服务标签：浅底红框红字胶囊 */
.wf-tag {
  display: inline-block;
  margin-top: 12rpx;
  background: #fff6f4;
  border: 1rpx solid #ff4a38;
  border-radius: 7rpx;
  color: #ff3929;
  font-size: 18rpx;
  line-height: 1.4;
  padding: 2rpx 10rpx;
}
.wf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14rpx;
}
.wf-price {
  /* 设计稿价格 16px≈28rpx，#FF3929 */
  font-size: 28rpx;
  font-weight: 700;
  color: #ff3929;
}
.wf-book {
  flex-shrink: 0;
  /* 设计稿预约按钮：纯红 #FF3929，radius 15px≈26rpx */
  background: #ff3929;
  color: #fff;
  font-size: 22rpx;
  font-weight: 700;
  padding: 10rpx 24rpx;
  border-radius: 26rpx;
}
.wf-more {
  text-align: center;
  color: #999;
  font-size: 24rpx;
  padding: 24rpx 0 20rpx;
}
.fh-empty {
  text-align: center;
  color: #999;
  font-size: 26rpx;
  padding: 100rpx 0;
}
</style>
