<template>
  <view class="container">
    <view class="head">
      <view class="top" :style="{ backgroundImage: topBg }">
        <wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
      </view>
      <view class="bootom">
        <view class="bootom-top">
          <view class="option" @tap="locationFiltering(0)">
            <text :class="{ rotate: rotate }">全部烧烤烤肉</text>
            <wd-icon
              :class="{ rotate: rotate }"
              name="fill-arrow-down"
              size="24rpx"
              class="icon"
            ></wd-icon>
          </view>
          <view class="option" @tap="locationFiltering(1)">
            <text :class="{ rotate: rotate2 }">附近</text>
            <wd-icon
              :class="{ rotate: rotate2 }"
              name="fill-arrow-down"
              size="24rpx"
              class="icon"
            ></wd-icon>
          </view>
          <view class="option" @tap="locationFiltering(2)">
            <text :class="{ rotate: rotate3 }">智能排序</text>
            <wd-icon
              :class="{ rotate: rotate3 }"
              name="fill-arrow-down"
              size="24rpx"
              class="icon"
            ></wd-icon>
          </view>
        </view>
        <!-- 标签 -->
        <!-- <view class="bootom-bottom">
          <view
            @tap="choice(index)"
            class="item"
            :class="{ light: active === index }"
            v-for="(item, index) in business"
            :key="index"
          >
            {{ item }}
          </view>
        </view> -->
        <!-- 美食类别 -->
        <Classification v-show="rotate" :category="categoryData" @foodCategory="foodCategory" />
        <!-- 附近筛选 -->
        <Position v-show="rotate2" @nearby="nearby" @popular="popular" @region="region" />
        <!-- 排序筛选 -->
        <Sort v-show="rotate3" @sortParams="sortParams" />
      </view>
    </view>
    <FoodDetails :cardData="cardData" />
    <wd-status-tip image="content" tip="暂无内容" v-if="cardData.length === 0" />
    <view
      style="width: 100%; text-align: center; font-size: 24rpx; margin: 10rpx 0; color: #888989"
      v-if="show"
    >
      没有更多啦~
    </view>
  </view>
</template>

<script setup>
import {} from 'vue';
import FoodDetails from '../../components/index/FoodDetails.vue';
import Classification from '../../components/index/Classification.vue';
import Position from '../../components/index/Position.vue';
import Sort from '../../components/index/Sort.vue';
import { merchantList, getByParentId, getByType } from '../../api/index';

const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
const active = ref(null);
const rotate = ref(false);
const rotate2 = ref(false);
const rotate3 = ref(false);
const topBg = ref(null);
const categoryData = ref([]);
const show = ref(false);
const cardData = ref([]);
let total;
const paramsId = {
  parentId: null,
};
const listParams = {
  current: 1,
  size: 10,
  lon: 106.68650025025502,
  lat: 26.567192352601154,
};
onMounted(() => {
  getMerchantList();
});

onLoad((options) => {
  const { categoryId, place } = options;
  paramsId.parentId = categoryId;
  getByParentIdData();
  getByType({ place }).then((res) => {
    topBg.value = `url(${import.meta.env.VITE_APP_IMG_URL + res.data[0].imgUrl})`;
  });
});
// distance参数来源
const nearby = (distance) => {
  console.log('distance', distance);
  reset();
  if (distance === 0) {
    delete listParams.distance;
  } else {
    listParams.distance = distance;
  }
  getMerchantList();
};
// communityName参数来源
const popular = (communityName) => {
  console.log('communityName', communityName);
  reset();
  listParams.communityName = communityName;
  if (listParams.area) {
    delete listParams.area;
  }
  getMerchantList();
};
// 重置数据
const reset = () => {
  listParams.current = 1;
  cardData.value = [];
  show.value = false;
};

// area参数来源
const region = (area) => {
  console.log('area', area);
  reset();
  listParams.area = area;
  if (listParams.communityName) {
    delete listParams.communityName;
  }
  getMerchantList();
};
// categoryId参数来源
const foodCategory = (categoryId) => {
  reset();
  listParams.categoryIds = [categoryId];
  getMerchantList();
};
// 排序参数来源
const sortParams = (params) => {
  reset();
  const { sortName, sortMode } = params;
  listParams.sortName = sortName;
  listParams.sortMode = sortMode;
  getMerchantList();
};
// 根据父级分类id查询子分类列表
const getByParentIdData = () => {
  getByParentId(paramsId).then((res) => {
    categoryData.value = res.data;
  });
};

const back = () => {
  xma.navigateBack({
    delta: 1,
  });
};
// 商家列表分页-搜索列表
const getMerchantList = () => {
  xma.showLoading({
    title: '加载中',
  });
  merchantList(listParams).then((res) => {
    total = res.data.totalElements;
    xma.hideLoading();
    console.log('商家列表', res);
    res.data.content.forEach((item) => {
      item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
      if (item.evaluationVos.length > 0) {
        item.evaluationVos[0].avatar =
          import.meta.env.VITE_APP_IMG_URL + item.evaluationVos[0].avatar;
      }
      if (item.labels) {
        item.labels = item.labels.split(',');
      }
    });
    cardData.value = [...cardData.value, ...res.data.content];
  });
};
onReachBottom(() => {
  if (cardData.value.length < total) {
    listParams.current++;
    getMerchantList();
    return;
  }
  show.value = true;
});
const choice = (index) => {
  active.value = index;
};

const locationFiltering = (index) => {
  switch (index) {
    case 0:
      rotate.value = !rotate.value;
      rotate2.value = false;
      rotate3.value = false;
      break;
    case 1:
      rotate2.value = !rotate2.value;
      rotate.value = false;
      rotate3.value = false;
      break;
    case 2:
      rotate3.value = !rotate3.value;
      rotate.value = false;
      rotate2.value = false;
      break;
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #f3f3f3;
}
.head {
  width: 100%;
  margin-bottom: 10rpx;
  // height: 480rpx;
  .top {
    height: 356rpx;
    // background: url('../../static/index/taste.png');
    background-size: 100% 100%;
    .icon {
      font-size: 28rpx;
      margin-top: 70rpx;
      margin-left: 40rpx;
      color: white;
    }
  }
  .bootom {
    // height: 124rpx;
    height: 80rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 6rpx;
    background: #ffffff;
    position: relative;
    .bootom-top {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      justify-content: space-between;
      .option {
        text {
          font-size: 24rpx;
          color: #343434;
        }
        .red {
          color: #fa5151;
        }
        .icon {
          color: #d8d8d8;
          transform: rotate(-180deg);
          transition: all 0.3s linear;
        }
        .rotate {
          transform: rotate(0deg);
          transition: all 0.3s linear;
          color: #fa5151;
        }
      }
    }
    .bootom-bottom {
      display: flex;
      align-items: center;
      padding-left: 40rpx;
      .item {
        height: 36rpx;
        width: 96rpx;
        border-radius: 6rpx;
        font-size: 20rpx;
        text-align: center;
        line-height: 36rpx;
        color: #abaaaa;
        background: #eeeeee;
        margin-right: 20rpx;
      }
      .light {
        color: #ff7c00;
        background: #ffdcbb;
      }
    }
  }
}
</style>
