<template>
  <view class="gg">
    <u-navbar :border-bottom="false" :is-back="false">
      <view class="u-flex u-m-l-20 u-m-r-20 gg-search-navbar">
        <view class="u-font-xl u-m-r-20">分类</view>
        <view class="gg-notice-search-bar">
          <u-icon class="gg-notice-search-bar-left-icon" name="search"></u-icon>
          <u-notice-bar
              :border-radius="30"
              :is-circular="false"
              :list="list"
              :more-icon="false"
              :volume-icon="false"
              class="gg-notice-search-bar-u-notice-bar"
              mode="vertical"
              type="none"
          ></u-notice-bar>
        </view>
      </view>
    </u-navbar>

    <view class="gg-menu-wrap">
      <scroll-view :scroll-top="scrollTop" class="gg-tab-view menu-scroll-view" scroll-with-animation scroll-y>
        <view
            v-for="(item, index) in categories"
            :key="item.id"
            :class="[current === index ? 'gg-tab-item-active' : '']"
            :data-current="index"
            class="gg-tab-item"
            @tap.stop="swichCategory(item.id, index)"
        >
          <text class="u-line-1">{{ item.name }}</text>
        </view>
      </scroll-view>

      <scroll-view class="gg-right-box" scroll-y @scrolltolower="loadMore">
        <view v-for="(item, index) in searchResult.content" :key="item.id" @click="gotoProductItem(item.id)">
          <view class="u-m-b-10 u-m-l-20 u-m-r-20 u-flex gg-product-item">
            <ListImgItem
                :showBottom="item.skuType === 0 && item.isNewPerson === 1"
                :showLeft="item.skuType === 1"
                :showRight="false"
                :src="item.imgUrl"
                height="200rpx"
                width="200rpx"
            >
              <template #left>秒杀商品</template>
            </ListImgItem>
            <view class="gg-product-item-msg u-border-bottom u-p-b-20 u-m-l-20">
              <view>
                <view class="u-font-lg">{{ item.title }}</view>
                <view class="u-type-info u-font-sm">已售{{ item.sale }}/剩余{{ item.stock }}</view>
                <block v-if="item.ruleList">
                  <view v-for="(rule, ruleIndex) in item.ruleList" :key="ruleIndex" class="u-font-xs u-type-error-dark">
                    {{ rule }}
                  </view>
                </block>
              </view>
              <view class="u-flex u-row-between">
                <view class="u-type-error gg-product-item-msg-price-container">
                  <text>￥</text>
                  <text class="gg-product-item-msg-price-container-value">{{ item.price }}</text>
                </view>
                <AddToCart :shopDetail="item"></AddToCart>
              </view>
            </view>
          </view>
          <u-gap height="20"></u-gap>
        </view>

        <!-- 如果列表没有更多数据，则显示分隔线 -->
        <u-divider v-if="!(searchResult.first && searchResult.empty) && searchResult.last" :height="60"
                   bg-color="transparent">我是有底线的
        </u-divider>
        <!-- 如果列表没有数据，则显示空内容 -->
        <u-empty :show="searchResult.first && searchResult.empty" mode="list"></u-empty>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import {mapState, mapActions} from 'vuex';

export default {
  data() {
    return {
      list: ['最见搜索关键字', '暂时未处理搜索页', '可以考虑最见关键字'],
      current: 0, // 预设当前项的值
      categoryId: 0, // 当前选中的分类Id
      scrollTop: 0, //tab标题的滚动条位置
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      filter: {
        page: 1, // 当前页码
        limit: 5, // 每页记录数
        keyword: '', // 关键字
        wareId: ''
      },
      searchResult: {
        content: [],
        last: false
      } // 搜索商品结果对象
    };
  },
  computed: {
    ...mapState('categoriesModule', ['categories'])
  },
  methods: {
    ...mapActions('categoriesModule', ['getCategoriesAction']),
    ...mapActions('cartModule', ['getCartListAction']),
    /*
    为什么不使用scroll-into-view而使用手动计算的方式，
    这是因为scroll-into-view不会进行居中菜单位置的定位处理，
    为了更好的用户操作体验，可以让当前选中菜单定位于整体滚动的居中位置
    */
    // 点击左边的栏目切换
    async swichCategory(categoryId, index) {
      Object.assign(this.$data.searchResult, this.$options.data().searchResult); // 这里重置 searchResult 下的所有数据
      Object.assign(this.$data.filter, this.$options.data().filter); // 这里重置 filter 下的所有数据

      this.categoryId = categoryId;
      if (index == this.current) return; // 防止选中分类的再次点击
      this.current = index;
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('menu-scroll-view', 'menuHeight');
        await this.getElRect('gg-tab-item', 'menuItemHeight');
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;

      // 获取右侧商品搜索结果数据
      this.getCategoryProductList();
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
            .select('.' + elClass)
            .fields({size: true}, res => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  this.getElRect(elClass);
                }, 10);
                return;
              }
              this[dataVal] = res.height;
            })
            .exec();
      });
    },
    // 获取分类商品列表
    async getCategoryProductList() {
      const o = {
        categoryId: this.categoryId,
        page: this.filter.page,
        keyword: this.filter.keyword,
        limit: this.filter.limit,
        wareId: this.filter.wareId
      };
      let result = await this.$u.api.getSearchSku(o);
      this.searchResult = {...result, content: [...this.searchResult.content, ...result.content]};
    },
    // 加载更多数据
    loadMore() {
      if (!this.searchResult.last) {
        this.filter.page = this.filter.page + 1;
        this.getCategoryProductList();
      }
    },
    // 跳转到商品详情页
    gotoProductItem(skuId) {
      this.$u.route('/pages/homeItem/homeItem', {
        skuId
      });
    }
  },
  async mounted() {
    await this.getCategoriesAction(); // 从仓库中获取分类列表
    this.categoryId = this.categories[0].id; // 获取第一个分类的id
    await this.getCategoryProductList(); // 商品数据搜索请求
    // 需要获取购物车数据列表，将最新获取的数据渲染到页面
    this.getCartListAction();
  }
};
</script>

<style lang="scss" scoped>
.gg {
  height: calc(100vh);
  display: flex;
  flex-direction: column;

  &-search-navbar {
    margin-top: -20rpx;
    width: 100%;
  }

  /* 滚动信息搜索框 */
  &-notice-search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #ededed;
    border-radius: 30rpx;

    /* 滚动信息搜索框左侧图标 */
    &-left-icon {
      position: relative;
      left: 20rpx;
      color: $u-light-color;
    }

    /* 滚动信息搜索框中的字体设置 */
    &-u-notice-bar {
      flex: 1;
      /* 深层穿透修改子组件字体颜色样式 */
      ::v-deep .u-news-item {
        color: $u-light-color !important;
      }
    }
  }

  /* 菜单包装器 */
  &-menu-wrap {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  /* 左侧sv选项卡模式菜单 */
  &-tab-view {
    width: 200rpx;
    height: 100%;
  }

  /* 左侧菜单选项卡项 */
  &-tab-item {
    height: 110rpx;
    background: #f6f6f6;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #444;
    font-weight: 400;
    line-height: 1;

    /* 激活状态 */
    &-active {
      position: relative;
      color: $u-type-warning;
      font-size: 30rpx;
      font-weight: 600;
      background: #fff;
      /* 伪类处理 */
      &::before {
        content: '';
        position: absolute;
        border-left: 4px solid $u-type-warning;
        height: 32rpx;
        left: 0;
        top: 39rpx;
      }
    }
  }

  /* 产品列表项 */
  &-product-item {
    height: 210rpx;

    &-msg {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &-price-container {
        &-value {
          font-size: 40rpx;
        }
      }
    }
  }

  &-right-box {
    background-color: rgb(250, 250, 250);
  }
}
</style>
