<template>
  <div class="container">
    <!-- 顶部展开后的阴影 -->
    <div class="boxshadow" v-if="topShow"></div>
    <div class="header" :class="topShow ? 'op0' : ''">
      <div
        class="searchBox"
        :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
      >
        <div class="searchBox_left">
          <!-- <u-icon name="arrow-left" size="20px" color="#000"></u-icon> -->
        </div>
        <div 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="输入商品名称" />
        </div>
      </div>
      <div class="slide">
        <div class="slide_con">
          <div
            v-for="(item, index) in CateList"
            :key="index"
            class="slide_conBox"
            @click="changeCate(item.id)"
          >
            <view class="slide_item">
              <image
                :src="picUrl + item.category_pic"
                mode="aspectFill"
              ></image>
              <text>{{ item.category_name }}</text>
            </view>
          </div>
        </div>

        <div 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>
        </div>
      </div>
    </div>

    <!-- 整体展开的顶部 -->
    <div class="header header2" v-if="topShow">
      <div
        class="searchBox"
        :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
      >
        <div class="searchBox_left">
          <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
        </div>
        <div class="searchBox_ipt">
          <image
            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
            mode="aspectFill"
          ></image>
          <input type="text" placeholder="输入商品名称" />
        </div>
      </div>

      <div class="slide">
        <div class="slide_con">
          <div
            v-for="(item, index) in CateList"
            :key="index"
            class="slide_conBox"
          >
            <view class="slide_item">
              <image
                :src="picUrl + item.category_pic"
                mode="aspectFill"
              ></image>
              <text>{{ item.category_name }}</text>
            </view>
          </div>
        </div>
      </div>

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

    <div class="Con">
      <div class="Con_left">
        <div
          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 }}
        </div>
      </div>
      <div class="Con_right">
        <div class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
          <div class="CateList" ref="cateListRef">
            <div
              class="CateList_Item"
              v-for="(item, index) in tagList"
              :key="item.id"
              :class="index == rightTopActive ? 'CateList_Item_active' : ''"
              @click="checkItem(index)"
            >
              {{ item.tag_name }}
            </div>
          </div>
          <div class="more" @click="changeCateListShow">
            <u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
            <u-icon v-if="cateListShow" name="arrow-up"></u-icon>
          </div>
        </div>
        <!-- 右下展开的内容 -->
        <div class="activeCateList" v-if="cateListShow">
          <div
            class="CateList_Item"
            v-for="(item, index) in tagList"
            :key="index"
            :class="index == rightTopActive ? 'CateList_Item_active' : ''"
            @click="checkItem(index)"
          >
            {{ item.tag_name }}
          </div>
        </div>
        <!-- 右下阴影 -->
        <div class="boxshadow2" v-if="cateListShow"></div>

        <div class="CateInfo" v-for="(item, index) in tagList" :key="item.id">
          <div class="CateInfo_tit">
            {{ item.tag_name }}
          </div>
          <div
            class="CateInfo_Item"
            v-for="items in item.commodity_info_list"
            :key="items.id"
          >
            <div class="CateInfo_Item_Box">
              <div class="CateInfo_Item_left" @click="goods(items)">
                <image
                  :src="picUrl + items.commodity_pic"
                  mode="aspectFill"
                ></image>
              </div>
              <div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
                <div class="CateInfo_Item_right_Tit" @click="goods(items)">
                  {{ items.commodity_name }}
                </div>
                <div
                  class="CateInfo_Item_right_subtit"
                  @click="goods(items)"
                >
                  {{ items.commodity_intro }}
                </div>
                <div class="CateInfo_Item_Money">
                  <div class="CateInfo_Item_Money_left">
                    <span>￥</span
                    >{{ items.commodity_goods_info_list[0].sales_price }}
                  </div>
                  <div
                    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>
                  </div>
                </div>

                <div
                  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>
                </div>

                <div
                  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>
                </div>
              </div>
            </div>

            <div class="GGList" v-if="items.isShow">
              <div
                class="GGItem"
                v-for="ite in items.commodity_goods_info_list"
                @click="goods(items)"
              >
                <div class="GGItem_Image">
                  <image
                    :src="picUrl + ite.commodity_pic"
                    mode="aspectFill"
                  ></image>
                </div>
                <div class="GGItem_Con">
                  <div class="GGItem_Con_Tit">{{ ite.goods_name }}</div>
                  <div class="GGItem_Con_Msg">
                    <div class="GGItem_Con_Msg_left">
                      <span>￥</span>{{ ite.sales_price }}
                    </div>
                    <div 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>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 按钮 -->
          <!-- <div class="btn">
						查看全部商品
						<div class="cir">
							<u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
						</div>
					</div> -->
        </div>
      </div>
    </div>

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

    <div 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> -->
    </div>
  </div>
</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,
      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,

      GGshow: false,
      CateList: [], //分类列表
      currentFirstId: "",
      leftCateList: [], //底部左侧分类
      currentSecondId: "",
      rightCateList: [], //底部右侧分类
      currentThirdId: "",

      tagList: [],
      carNum: "",

      goodsDetail: [],
    };
  },
  methods: {
    changeCate(id) {
      // 根据id查找对应的分类
      const category = this.CateList.find((item) => item.id === id);
      if (category) {
        // 将leftCateList设置为该分类的二级分类，若为null则设为空数组
        this.leftCateList = category.level_two_category || [];
        this.secondId = this.leftCateList[0]?.id;
        this.getGoodsList();
      }
    },
    //顶部分类点击
    changeCateListShow() {
      this.cateListShow = !this.cateListShow;
    },
    //选择右下角分类
    checkItem(index) {
      this.rightTopActive = index;
    },
    //右下角点击更多
    topOpen() {
      this.topShow = !this.topShow;
    },
    // 选择商品规格
    chooseGG(e) {
      e.isShow = !e.isShow;
    },
    //搜索页
    searchPage() {
      NavgateTo("../search/index");
    },
    //商品详情页
    goods(e) {
      NavgateTo(`../goods/index?item=${JSON.stringify(e)}`);
    },

    // 购物车
    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.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 = [];
        return;
      }
      request(apiArr.getGoodsList, "POST", {
        user_id: uni.getStorageSync("userId"),
        id: this.secondId,
      }).then((res) => {
        res.commodity_list.forEach((item) => {
          item.commodity_info_list.forEach((item) => {
            item.commodity_goods_info_list.forEach((param) => {
              this.goodsDetail.forEach((goods) => {
                if (goods.goods_id === param.id) {
                  param.quantity = goods.count;
                }
              });
            });
            item.isShow = false;
          });
        });
        this.tagList = res.commodity_list;
        console.log("🚀 ~ getGoodsList ~ this.tagList:", this.tagList)
      });
    },

    getShopCarList() {
      request(apiArr.getCar, "POST").then((res) => {
        console.log(res);
        this.carNum = res.total;
        this.goodsDetail = res.commodity_cart_list;
      });
    },

    changeLeftCate(e) {
      this.currentLeftCateId = e;
      this.secondId = e;
      this.getGoodsList();
    },
    //商品数量变化
    handleQuantityChange(val, item) {
      if (
        item.commodity_goods_info_list &&
        item.commodity_goods_info_list.length
      ) {
        this.goodsId = item.commodity_goods_info_list[0].id;
      } else {
        this.goodsId = item.id;
      }
      const params = {
        user_id: uni.getStorageSync("userId"),
        goods_id_and_count: [
          {
            goods_id: this.goodsId,
            count: val.value,
          },
        ],
      };
      request(apiArr.updateCar, "POST", params).then((res) => {
        console.log(res);
        this.getShopCarList();
        uni.showToast({
          title: "操作成功！",
          success() {},
        });
      });
    },
  },
  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
    this.getCateList();
    // this.getShopCarList();
  },
  onShow() {
    this.getShopCarList();
    this.getGoodsList();
  },
  onReachBottom() {
    if (this.flag) {
    }
  },
};
</script>

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