<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">
						<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" 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.id)">
								<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.id)">{{items.commodity_name}}</div>
								<div class="CateInfo_Item_right_subtit" @click="goods(items.id)">{{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">
										<u-number-box v-model="value">
											<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">{{
												value }}</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.id)">
								<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="value">
												<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">{{
														value }}</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="2" />

		<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,
			topShow: false,

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

			tagList:[],
			carNum:"",
		}
	},
	methods: {
		//顶部分类点击
		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?id=${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
				this.secondId = res.commodity_category_list[0].level_two_category[0].id
				this.getGoodsList()
			})
		},

		getGoodsList(){
			request(apiArr.getGoodsList,'POST',{
				user_id:"",
				id:this.secondId
			}).then(res=>{
				res.commodity_list.forEach(item => {
					item.commodity_info_list.forEach(item=>{
						item.isShow = false
					})
				});
				this.tagList = res.commodity_list
			})
		},

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

		changeLeftCate(e){
			this.secondId = e
			this.getGoodsList()
		},

	},
	onLoad(options) {
		const meun = menuButtonInfo();
		this.top = meun.top;
		this.localHeight = meun.height;
		this.getCateList()
		this.getShopCarList()
	},
	onReachBottom() {
		if (this.flag) {

		}
	},
}
</script>

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