<template>
	<!-- #ifdef H5 -->
	<zj-page-layout>
	  <template slot="header">
	    <view class="search-container">
        <view class="mask" @tap.stop="searchData"></view>
	      <u-search
	        shape="round"
	        :showAction="false"
	        placeholder="搜索商品名称或型号"
	        v-model="keyword"
          disabled
	        @click="searchData">
	      </u-search>
	    </view>
	  </template>

		<view class="main-container">
			<view class="left">
				<block v-for="(item, index) in leftList" :key='index'>
					<view class="item ellipsis" :class="leftCurrent == item.categoryId ? 'current':''" @tap="changeLeft(item.categoryId)">{{item.name}}</view>
				</block>
			</view>
			<view class="right">
        <view class="list-container" style="margin-bottom: 20rpx;" v-if="brandList.length > 0">
          <view class="title">热门品牌</view>
          <view class="list">
            <block v-for="(item, index) in brandList" :key='index'>
            	<view class="item" @tap="clickBrand(item.id, item.brandName)">
            		<image :src="item.imageUrl" mode="aspectFit"></image>
            		<text class="name ellipsis">{{item.brandName}}</text>
            	</view>
            </block>
          </view>
        </view>

        <view class="list-container">
          <view class="title">二级分类</view>
          <view class="list">
            <block v-for="(item, index) in rightList" :key='index'>
            	<view class="item" @tap="clickCategory(item.categoryId, item.name)">
            		<image :src="item.imgUrl" mode="aspectFit"></image>
            		<text class="name ellipsis">{{item.name}}</text>
            	</view>
            </block>
            <Loading :type="2" :loadStatus="loadStatus" :dataList="rightList" />
          </view>
        </view>
			</view>
		</view>

  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageGoods/pages/classify`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
	export default {
		data() {
			return {
				keyword: '',
				leftList: [],
				leftCurrent: 0,
				rightList: [],
        loadStatus: 0,
        brandList: [],
        isTradein: false,
			}
		},

		onLoad({categoryId, isTradein}) {
      this.isTradein = !!Number(isTradein);
			this.getLeftList(categoryId);
		},

		methods: {
			// 获取一级菜单
			getLeftList(categoryId) {
				this.$api.get('/goods/category/list', {
          type: 1,
          yjhx: this.isTradein
        }).then(res => {
					this.leftList = res.data;
					if(categoryId) {
						this.leftCurrent = categoryId;
					}else {
						this.leftCurrent = res.data.length > 0 ? res.data[0].categoryId : 0;
					}
					this.getRightList();
          this.getBrandList();
				})
			},

      getBrandList() {
        this.$api.get('/goods/category/brand', {
          categoryId: this.leftCurrent,
        }).then(res => {
          this.brandList = res.data;
        })
      },

			// 获取二级菜单
			getRightList() {
				this.loadStatus = 1;
				this.$api.get('/goods/category/list', {
          parentId: this.leftCurrent,
          name: this.keyword,
          type: 1,
          yjhx: this.isTradein
				}).then(res => {
					this.loadStatus = 0;
					let list = res.data;
					if(list.length < 1){
						this.loadStatus = 2;
					}
					this.rightList = list;
				}).catch(() => {
					this.loadStatus = 2;
				})
			},

			// 切换一级菜单
			changeLeft(pid) {
				this.leftCurrent = pid;
				this.getRightList();
        this.getBrandList();
			},

			// 搜索
			searchData() {
				this.$navToPage({
          url: '/packageGoods/pages/search'
        })
			},

      // 点击二级分类
			clickCategory(cid, cname) {
				this.$navToPage({
          url: `/packageGoods/pages/list?pid=${this.leftCurrent}&cid=${cid}&cname=${cname}&isTradein=${this.isTradein ? 1 : 0}`
				})
			},

      // 点击品牌
      clickBrand(brandId, brandName) {
        this.$navToPage({
          url: `/packageGoods/pages/list?pid=${this.leftCurrent}&brandId=${brandId}&brandName=${brandName}&isTradein=${this.isTradein ? 1 : 0}`
        })
      }
		}
	}
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
	.search-container {
		background: #ffffff;
	  padding: 20rpx;
    position: relative;
    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 999;
    }
		::v-deep .u-search {
			height: 60rpx;
	    input {
	      background: #F7F8FF !important;
	    }
			.u-search__content {
	      background: #F7F8FF !important;
				height: 60rpx;
			}
		}
	}
	.main-container {
		display: flex;
		height: calc(100vh - 88rpx);
		.left {
			width: 220rpx;
			height: 100%;
			overflow-y: scroll;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			flex-shrink: 0;
			.item {
				margin-bottom: 40rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 48rpx;
				border-radius: 48rpx;
				text-align: center;
				&.current {
					color: #FFFFFF;
					background: $theme-color;
				}
			}
		}
		.right {
      flex: 1;
			max-height: calc(100% - 20rpx);
			overflow-y: scroll;
			box-sizing: border-box;
      padding: 20rpx;
      .list-container {
        background: #FFFFFF;
        border-radius: 10rpx;
        padding: 20rpx;
        .title {
          font-weight: 600;
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          .item {
          	display: flex;
          	flex-direction: column;
          	align-items: center;
          	margin-right: 20rpx;
          	margin-top: 20rpx;
          	width: calc((100% - 40rpx) / 3);
          	font-size: 24rpx;
          	image {
          		width: 100%;
          		height: 140rpx;
          		margin-bottom: 8rpx;
          	}
          	.name {
          		width: 150rpx;
          		text-align: center;
          	}
          	&:nth-child(3n) {
          		margin-right: 0;
          	}
          }
        }
      }
		}
	}
</style>
