<template>
  <view class="container">
    <!-- 顶部展开后的阴影 -->
    <view class="boxshadow" v-if="topShow"></view>
    <view class="header">
      <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
        <view class="searchBox_left" @click="back">
          <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
        </view>
        <view class="searchBox_ipt" @click="searchPage">
          <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
            mode="aspectFill"></image>
          <input disabled type="text" placeholder="输入商品名称" />
        </view>
      </view>
      <view class="slide">
        <view class="slide_con">
          <view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)">
            <view class="slide_item" :class="item.id === currentCategoryId ? 'slide_item_active' : ''">
              <image :src="picUrl + item.category_pic" mode="aspectFill"></image>
              <text>{{ item.category_name }}</text>
            </view>
          </view>
        </view>

        <view class="open" @click="topOpen" v-if="!topShow">
          展 开
          <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
            mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <!-- 整体展开的顶部 -->
    <view class="header header2" v-if="topShow">
      <view class="slide">
        <view class="slide_con">
          <view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)">
            <view class="slide_item" :class="item.id === currentCategoryId ? 'slide_item_active' : ''">
              <image :src="picUrl + item.category_pic" mode="aspectFill"></image>
              <text>{{ item.category_name }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="hides" @click="topOpen">
        收起 <u-icon name="arrow-up"></u-icon>
      </view>
    </view>

    <view class="Con">
      <view class="Con_left">
        <view class="CateItem" :class="item.id === currentLeftCateId ? 'CateItem_active' : ''"
          v-for="item in leftCateList" :key="item.id" @click="changeLeftCate(item.id)">
          <!-- <image v-if="false" class="hot"
						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_hot.png"
						mode="aspectFill">
					</image> -->
          <!-- <image class="bao"
						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
						mode="aspectFill"></image> -->
          {{ item.category_name }}
        </view>
      </view>
      <view class="Con_right" v-if="tagList1.length > 0">
        <view class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
          <view class="CateList" ref="cateListRef">
            <view class="CateList_Item" v-for="(item, index) in tagList" :key="item.id"
              :class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">
              {{ item.tag_name }}
            </view>
          </view>
          <view class="more" @click="changeCateListShow">
            <u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
            <u-icon v-if="cateListShow" name="arrow-up"></u-icon>
          </view>
        </view>
        <!-- 右下展开的内容 -->
        <view class="activeCateList" v-if="cateListShow">
          <view class="CateList_Item" v-for="(item, index) in tagList" :key="index"
            :class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">
            {{ item.tag_name }}
          </view>
        </view>
        <!-- 右下阴影 -->
        <view class="boxshadow2" v-if="cateListShow" @click="changeCateListShow"></view>

        <view class="CateIte">
          <view class="CateInfo"
            v-for="item in (selectedTagId === 'all' ? tagList.slice(1) : [tagList.find(t => t.id === selectedTagId) || {}])"
            :key="item.id">
            <view class="CateInfo_tit">
              {{ item.tag_name }}
            </view>
            <view class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id">
              <view class="CateInfo_Item_Box">
                <view class="CateInfo_Item_left" @click="goods(items)">
                  <view class="tag tag-img" v-if="
                    !items.commodity_goods_info_list[1] &&
                    items.commodity_goods_info_list[0].is_same_day
                  ">当日达</view>
                  <image :src="picUrl + items.commodity_pic" mode="aspectFill"></image>
                </view>
                <view class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
                  <view class="CateInfo_Item_right_Tit" @click="goods(items)">
                    <view class="tag tag-text" v-if="
                      !items.commodity_goods_info_list[1] &&
                      items.commodity_goods_info_list[0].is_same_day
                    ">当日达</view>
                    {{ items.commodity_name }}
                  </view>
                  <view class="CateInfo_Item_right_subtit" @click="goods(items)">
                    {{ items.commodity_intro }}
                  </view>
                  <view class="CateInfo_Item_Money">
                    <view class="CateInfo_Item_Money_left">
                      {{ getPriceRange(items.commodity_goods_info_list) }}
                    </view>
                    <view class="CateInfo_Item_Money_right" v-if="!(items.commodity_goods_info_list.length > 1)">
                      <u-number-box :min="0" v-model="items.commodity_goods_info_list[0].quantity"
                        @change="(value) => handleQuantityChange(value, items)">
                        <view slot="minus" class="minus">
                          <u-icon name="minus" size="20"></u-icon>
                        </view>
                        <text slot="input" style="width: 50px; text-align: center" class="input">{{
                          items.commodity_goods_info_list[0].quantity
                            ? items.commodity_goods_info_list[0].quantity
                            : 0
                        }}</text>
                        <view slot="plus" class="plus">
                          <u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
                        </view>
                      </u-number-box>
                    </view>
                  </view>

                  <view class="gg" @click="chooseGG(items)" v-if="
                    items.commodity_goods_info_list.length > 1 && !items.isShow
                  ">
                    选择规格
                    <u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
                  </view>

                  <view class="gg" @click="chooseGG(items)" v-if="
                    items.commodity_goods_info_list.length > 1 && items.isShow
                  ">
                    收起
                    <u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
                  </view>
                </view>
              </view>

              <view class="GGList" v-if="items.isShow">
                <view class="GGItem" v-for="ite in items.commodity_goods_info_list" :key="ite.id" @click="goods(items)">
                  <view class="GGItem_Image">
                    <view class="tag tag-img" v-if="ite.is_same_day">当日达</view>
                    <image :src="picUrl + ite.commodity_pic" mode="aspectFill"></image>
                  </view>
                  <view class="GGItem_Con">
                    <view class="GGItem_Con_Tit">
                      <view class="tag tag-text" v-if="ite.is_same_day">当日达</view>
                      {{ ite.goods_name }}
                    </view>
                    <view class="GGItem_Con_Msg">
                      <view class="GGItem_Con_Msg_left">
                        <span>￥</span>{{ ite.sales_price }}
                      </view>
                      <view class="GGItem_Con_Msg_right">
                        <u-number-box v-model="ite.quantity" :min="0"
                          @change="(value) => handleQuantityChange(value, ite)">
                          <view slot="minus" class="minus">
                            <u-icon name="minus" size="20"></u-icon>
                          </view>
                          <text slot="input" style="width: 50px; text-align: center" class="input">{{ ite.quantity ?
                            ite.quantity : 0 }}</text>
                          <view slot="plus" class="plus">
                            <u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
                          </view>
                        </u-number-box>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 按钮 -->
            <!-- <view class="btn">
						查看全部商品
						<view class="cir">
							<u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
						</view>
					</view> -->
          </view>
        </view>
      </view>
      <view class="Con_right" v-else>
        <view class="empty">
          <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png"
            mode="aspectFill"></image>
          暂无数据
        </view>
      </view>
    </view>

    <!-- <nav-footer :current="3" /> -->

    <view class="shop_car" @click="shopCar">
      <u-badge numberType="limit" type="error" max="99" :value="carNum"></u-badge>
      <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"></image>
      <!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_empty.png"></image> -->
    </view>
  </view>
</template>

<script>
import { apiArr } from "../../../api/shop";
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
export default {
  data() {
    return {
      picUrl,
      flag: false,
      top: "",
      localHeight: "",
      search: "",
      value: "1",
      cateListShow: false,
      conRightElement: null,
      iconList: [
        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
          name: "休闲零食",
        },

        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
          name: "肉蛋果蔬",
        },
        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
          name: "酒水饮料",
        },
        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
          name: "家具电器",
        },
        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
          name: "电脑手机",
        },
        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
          name: "休闲零食",
        },
        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
          name: "肉蛋果蔬",
        },
        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
          name: "酒水饮料",
        },
        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
          name: "家具电器",
        },
        {
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
          name: "电脑手机",
        },
      ],

      rightTopActive: 0,
      currentLeftCateId: null,
      topShow: false,
      currentCategoryId: null,

      GGshow: false,
      originalTagList: [], // 存储原始的tagList数据
      selectedTagId: null, // 当前选中的标签ID
      CateList: [], //分类列表
      currentFirstId: "",
      leftCateList: [], //底部左侧分类
      currentSecondId: "",
      rightCateList: [], //底部右侧分类
      currentThirdId: "",

      tagList: [],
      tagList1: [],
      carNum: "",

      goodsDetail: [],

      showTag: false, //当日达标签
    };
  },
  methods: {
    back() {
      NavgateTo('1')
    },



    changeCate(id) {
      this.checkItem(0)
      // 更新当前选中的顶级分类ID
      this.currentCategoryId = id;
      // 根据id查找对应的分类
      const category = this.CateList.find((item) => item.id === id);
      if (category) {
        // 将leftCateList设置为该分类的二级分类，若为null则设为空数组
        this.leftCateList = category.level_two_category || [];
        if (this.leftCateList.length > 0) {
          this.currentLeftCateId = this.leftCateList[0].id;
          this.secondId = this.leftCateList[0].id;
        } else {
          this.currentLeftCateId = null;
          this.secondId = null;
        }
        this.getGoodsList();
      }
      this.topShow = false;
    },
    //顶部分类点击
    changeCateListShow() {
      this.cateListShow = !this.cateListShow;
    },
    //选择右下角分类
    checkItem(index) {
      this.cateListShow = false
      this.rightTopActive = index;
      // 获取选中的标签ID
      this.selectedTagId = this.tagList[index]?.id;
    },
    //右下角点击更多
    topOpen() {
      this.topShow = !this.topShow;
    },
    // 选择商品规格
    chooseGG(targetItems) {
      // 遍历tagList找到目标对象（排除"全部"选项，从索引1开始）
      for (let i = 1; i < this.tagList.length; i++) {
        const tagItem = this.tagList[i];
        const infoIndex = tagItem.commodity_info_list.findIndex(item => item.id === targetItems.id);
        if (infoIndex > -1) {
          // 直接修改数据源中的对象，确保响应式
          const currentItem = tagItem.commodity_info_list[infoIndex];
          this.$set(currentItem, 'isShow', !currentItem.isShow);
          console.log("修改后数据源中的isShow:", currentItem.isShow);
          break;
        }
      }
    },
    //搜索页
    searchPage() {
      NavgateTo("../search/index");
    },
    //商品详情页
    goods(e) {
      NavgateTo(`../goods/index?item=${JSON.stringify(e)}`);
      // NavgateTo("../goods/index");
    },

    // 购物车
    shopCar() {
      NavgateTo("../shopCar/index");
    },
    //分类列表
    getCateList() {
      request(apiArr.goodsCateList, "POST", {}).then((res) => {
        console.log(res);
        this.CateList = res.commodity_category_list;
        this.firstId = res.commodity_category_list[0].id;
        // 设置默认选中第一个分类
        this.currentCategoryId = this.firstId;
        this.leftCateList =
          res.commodity_category_list[0].level_two_category || [];
        if (this.leftCateList.length > 0) {
          this.currentLeftCateId = this.leftCateList[0].id;
          this.secondId = this.leftCateList[0].id;
        } else {
          this.currentLeftCateId = null;
          this.secondId = null;
        }
        this.getGoodsList();
      });
    },

    getGoodsList() {
      if (!this.secondId) {
        this.tagList = [];
        this.originalTagList = [];
        return;
      }
      request(apiArr.getGoodsList, "POST", {
        user_id: uni.getStorageSync("userId"),
        id: this.secondId,
      }).then((res) => {
        // 深拷贝接口数据，避免引用问题
        const commodityList = JSON.parse(JSON.stringify(res.commodity_list));
        commodityList.forEach((tagItem) => { // 重命名外层变量，避免嵌套冲突
          tagItem.commodity_info_list.forEach((infoItem) => { // 内层变量重命名
            // 初始化isShow为响应式属性
            this.$set(infoItem, 'isShow', false);
            infoItem.commodity_goods_info_list.forEach((param) => {
              this.goodsDetail.forEach((goods) => {
                if (goods.goods_id === param.id) {
                  this.$set(param, 'quantity', goods.count); // 同步数量也要用$set
                }
              });
            });
          });
        });
        this.originalTagList = commodityList;
        this.tagList1 = commodityList;
        // 重新构建tagList，确保使用拷贝后的响应式数据
        this.tagList = [{ id: 'all', tag_name: '全部' }, ...commodityList];
        this.rightTopActive = 0;
        this.selectedTagId = 'all';
      });
    },

    getShopCarList() {
      request(apiArr.getCar, "POST").then((res) => {
        this.carNum = res.total;
        // 合并当日达和普通商品数据
        this.goodsDetail = [].concat(res.same_day_cart_list, res.normal_cart_list)
          .flatMap(supplier => supplier.commodity_cart_and_goods_model);
      });
    },

    changeLeftCate(e) {
      this.currentLeftCateId = e;
      this.secondId = e;
      this.getGoodsList();
    },
    //商品数量变化
    handleQuantityChange(val, item) {
      // 先在前端直接更新数量，确保页面显示及时变化
      // 注意：这里的val可能是直接的数值，也可能是包含value属性的对象
      // 我们需要先确定正确的值
      const quantity = typeof val === 'object' && val !== null && 'value' in val ? val.value : val;

      // 对于有规格的主商品（绑定到items.commodity_goods_info_list[0].quantity）
      if (
        item.commodity_goods_info_list &&
        item.commodity_goods_info_list.length
      ) {
        this.goodsId = item.commodity_goods_info_list[0].id;
        // 使用$set确保响应式更新
        this.$set(item.commodity_goods_info_list[0], 'quantity', quantity);
      }
      // 对于规格列表中的商品（绑定到ite.quantity）
      else {
        this.goodsId = item.id;
        // 使用$set确保响应式更新
        this.$set(item, 'quantity', quantity);
      }

      const params = {
        user_id: uni.getStorageSync("userId"),
        goods_id_and_count: [
          {
            goods_id: this.goodsId,
            count: quantity,
          },
        ],
      };

      // 发送请求更新后端数据
      request(apiArr.updateCar, "POST", params).then((res) => {
        console.log(res);
        // 先更新购物车数据
        this.getShopCarList();

        // 延迟一小段时间，确保goodsDetail已经更新
        setTimeout(() => {
          // 重新同步商品列表中的数量
          this.syncGoodsQuantities();
        }, 100);

        uni.showToast({
          title: "操作成功！",
          success() { },
        });
      });
    },

    // 同步商品列表中的数量
    syncGoodsQuantities() {
      // 遍历所有商品，同步数量
      this.tagList.forEach((tagItem) => {
        if (tagItem.commodity_info_list) {
          tagItem.commodity_info_list.forEach((infoItem) => {
            infoItem.commodity_goods_info_list.forEach((param) => {
              const goods = this.goodsDetail.find(g => g.goods_id === param.id);
              if (goods) {
                this.$set(param, 'quantity', goods.count);
              }
            });
          });
        }
      });
    },
    getPriceRange(goodsList) {
      if (!goodsList || goodsList.length === 0) return '￥0';
      const prices = goodsList.map(item => Number(item.sales_price));
      const minPrice = Math.min(...prices);
      const maxPrice = Math.max(...prices);
      return minPrice === maxPrice ? `￥${minPrice}` : `￥${minPrice} ~ ￥${maxPrice}`;
    },
  },
  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
    this.getCateList();
    // this.getShopCarList();
  },
  onShow() {
    this.getShopCarList();
    this.getGoodsList();
  },

  onHide() {
    // 移除滚动事件监听
    if (this.conRightElement) {
      this.conRightElement = null;
    }
  },
  onReachBottom() {
    if (this.flag) {
    }
  },
};
</script>

<style>
@import url("./index.css");
</style>