<template>
  <view class="page">
    <!-- <view class="cu-custom bg-white solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
      <view class="cu-bar bg-white fixed solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
        <view class="search-form round" @tap="navToSearch" style="height: 64rpx;">
          <text class="cuIcon-search"><text class="padding-sm placeholderStyle">搜索你想要的商品</text></text>
        </view>
      </view>
    </view> -->

    <view style="height:100%;" class="content solid-top">
      <!-- 左边tab栏开始 -->
      <scroll-view class="left" scroll-y>
        <view style="height: 10rpx;width: 100%;" :style="{background: currentIndex == 0?'#ffffff':''}"></view>
        <block v-for="(item, index) in lists" :key="index">

          <view class="item text-center" :class="{ active: index == currentIndex}" @click="handleSelect(item, index)">
            {{ item.title }}
            <view class="cuIconlujing226"></view>
          </view>
        </block>
      </scroll-view>
      <!-- 左边tab栏结束 -->
      <!-- 右边列表开始 -->
      <view class="right">
        <scroll-view class="classify-box" scroll-y :scroll-top="scrollTop" :scroll-into-view="scrollViewId"
          @scroll="onScroll" :scroll-with-animation="true">

          <block >
            <view  class="cateRightBox2" >
              <view class="cateRightBox">
								<!-- @click="navToList(item.name,item.aid)" -->
                <view class="cu-list grid col-3 no-border flex flex-direction" v-if="lists[currentIndex].son_list.length>0">
                  <view @tap="chooseTap(item,i)" style="width: 100%;flex-direction: row;" class="cu-item flex justify-between align-center " v-for="(item, i) in lists[currentIndex].son_list" :key="item.id"
                    >
                    <text class="text-666 text-name">{{ item.title }}</text>
										<image style="width: 32rpx;height: 32rpx;" :src="item.checked?STATIC_URL+'166.png':STATIC_URL+'165.png'"></image>
                  </view>
                </view>
								<fu-empty-ui v-if="lists[currentIndex].son_list.length==0"></fu-empty-ui>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
      <!-- 右边列表结束 -->
    </view>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        scrollViewId: '',
        scrollTop: 0,
        CustomBar: this.CustomBar, //状态栏高度
        StatusBar: this.StatusBar, //状态栏高度
        currentIndex: 0, //选中下标
        lists: [], //列表
        banners: [], //轮播图
        ad: [],// 轮播图广告
        topList: [],
        isLeftClick:false,
				cat_id:'',
				listsData: [], //商品列表
      };
    },
    // computed: {
    //   level2() {
    //     return (this.lists[this.currentIndex] && this.lists[this.currentIndex].child) || [];
    //   }
    // },
    onLoad() {
      this.loadData();
			this.setNavigationBarTitle(this.i18n['选择分类'])
			// #ifdef APP-PLUS
			var webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				 text:this.i18n["确定"],
			});
			// #endif
      // this.getAd();
    },
    onShow() {
      this.setTabBarItem();
    },
		onNavigationBarButtonTap() {
			this.sureBtn()
		},
    methods: {
      getNodesInfo() {
        this.$nextTick(() => {
          //小程序没有doucument和window对象(undefined)
          const query = uni.createSelectorQuery().in(this);
          query.selectAll(".cateRightBox2").boundingClientRect().exec(res => {
            let nodes = res[0];
            let arr = [];
            nodes.map(item => {
              arr.push(item.top);
            })
            this.topList = arr;
          })
        });
      },
      onScroll(e) {
        if(this.isLeftClick){
					this.isLeftClick=false;
					return;
				}
        // let tempTop = e.detail.scrollTop							//scroll期间赋值
        let tempTop = e.target.scrollTop;
        for (let i = 0; i < this.topList.length; i++) {
          let h1 = this.topList[i];
          let h2 = this.topList[i + 1];
          if (tempTop > h1 && tempTop < h2) {
            this.currentIndex = i;
          }
        }
      },
      // /**
      //  * @event
      //  * @description  广告轮播图
      //  * @return {Boolean}
      //  * */
      // getAd() {
      //   this.$api
      //     .post(global.apiUrls.postAdvert, {
      //       typeid: 10
      //     })
      //     .then(res => {
      //       console.log(res, '广告');
      //       if (res.data.code == 1) {
      //         this.ad = res.data.data;
      //       }
      //     });
      // },
      /**
       * @event
       * @description  tab切换
       * @param {Number} item -当前选中数据  //暂时没用
       * @param {Number} index - 选中下标
       * @return {Boolean}
       * */
      handleSelect(item, index) {
				console.log(111111111)
				if(this.currentIndex != index){
					let list=this.lists;
					list.forEach((item,i)=>{
						if(item.son_list.length>0){
							item.son_list.forEach(res=>{
								res.checked=false
							})
						}
					})
					this.lists = list;
					console.log(this.lists)
				}
        this.scrollViewId = "po" + index;
        this.currentIndex = index;
        this.isLeftClick=true;
				this.cat_id=item.aid;
				
				
				// this.getServiceList()
        this.$nextTick(() => {
          this.scrollTop = 0
        });

      },
			chooseTap(item,index){
				let list = this.lists;
				list = list.map((item,i) => {
				  if(this.currentIndex==i){
				    if(item.son_list.length>0){
				    	item.son_list.forEach((res,l)=>{
				    		if(index==l){
									res.checked=true
								}else{
									res.checked=false
								}
				    	})
				    }
				  }
					return item;
				})
				this.lists = list
				this.sureBtn()
			},
			sureBtn(){
				// let proficiency=(this.lists.map((item,index)=>(item.checked ? `${item.id}` : '')).filter(item => item != '')).join(',');
				let id=(this.lists.map((item,index)=>item.son_list.map((res,i)=>(res.checked ? `${res.aid}` : '')).filter(res => res != '')).filter(item => item != '')).join(',')
				let name=(this.lists.map((item,index)=>item.son_list.map((res,i)=>(res.checked ? `${res.title}` : '')).filter(res => res != '')).filter(item => item != '')).join(',')
				console.log(id)
				console.log(name)
				if(!id) return this.$message.info('请选择分类');
				uni.$emit('CHOOSEMENU',{
					id:id,
					name:name
				})
				setTimeout(function(){
					uni.navigateBack({})
				},300)
			},
      /**
       * @event
       * @description  获取分类
       * @return {Boolean}
       * */
      loadData() {
        this.$api.post(global.apiUrls.shopCategorys).then(res => {
          console.log(res);
          if (res.data.code == 1) {
            let list = res.data.data;
            // 判断没有二级分类删除此分类
            // list.forEach((item, index) => {
            //   if (!item.child) {
            //     list.splice(index, 1);
            //   }
            //   // 判断没有三级分类删除此分类
            //   if (this.filterEmpty(item.child)) {
            //     list.splice(index, 1);
            //   }
            // });
						// this.cat_id=list[0].id
						list.forEach(item=>{
							if(item.son_list.length>0){
								item.son_list.forEach(res=>{
									res.checked=false
								})
							}
						})
            this.lists = list;
						console.log(this.lists)
						// this.getServiceList()
            // this.getNodesInfo();
          } else {
            this.$message.error(res.data.msg);
          }
        });
      },
			/**
			 * @getServiceList 获取分类下商品
			 */
			getServiceList(){
				this.listsData=[]
				this.$api.post(global.apiUrls.getServiceList,{
					cid:this.cat_id,
					page:1,
					pageSize:200
				}).then(res=>{
					console.log(res)
					if(res.data.code==1){
						this.listsData=res.data.data.data
					}
				})
			},
			
			
			
      /**
       * @description 判断是否有子分类
       */
      filterEmpty(arr) {
        if (!arr) {
          return false;
        }
        let num = 0;
        arr.forEach(item => {
          if (!item.child) {
            num++;
          }
        });
        if (num == arr.length) {
          return true;
        } else {
          return false;
        }
      },
      /**
       * @event
       * @description  去分类列表页
       * @return {Boolean}
       * */
      navToList(name,cid) {
        this.$urouter.navigateTo({
          url: '/pages/goods/goodsdetail/goods-detail/index',
          params: {
            goods_id: cid,
            // keyWords:name
          }
        });
      },
      /**
       * @event
       * @description  去搜索页面
       * @return {Boolean}
       * */
      navToSearch() {
        this.$urouter.navigateTo('/pages/index/search/search/index');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    height: 100vh;
    background: #f8f8f8;
    overflow: hidden;

    .content {
      display: flex;

      .left {
        width: 168rpx;
        min-width: 168rpx;
        height: 100%;
        .item {
          width: 100%;
          height: 100rpx;
          line-height: 100rpx;
          transition: all 0.2s;
          font-size: 28rpx;
          color: #999;
        }

        .item.active {
          font-size: 28rpx;
          color: #FF9300;
          font-weight: bold;
          background: #FFFFFF;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 6rpx;
            height: 24rpx;
            float: left;
            background: #FF9300;
            border-radius: 4rpx;
          }
        }
      }

      .right {
        flex: 1;
        /* background-color: #FFFFFF; */
      }
    }
  }

  .right {
    height: 100%;
    display: flex;
    flex-direction: column;

    .one-ad {
      /* padding: 0 12px; */
      height: 164rpx;
      /* padding: 10rpx 20rpx 10rpx 20rpx; */
      border-radius: 0rpx;
      margin: 24rpx 0 32rpx;

      .ad-img {
        width: 100%;
        height: 100%;
        border-radius: 0rpx;
      }
    }

    .swiper-box {
      padding: 24rpx;

      .swiper {
        height: 180rpx;

        .swiper-item {
          .swiper-item-img {
            width: 100%;
            height: 100%;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .classify-box {
      height: 100%;
      padding: 0 12rpx;
      background: #fff;
      .block-120 {
        width: 146rpx;
        height: 146rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .cateRightBox {
        overflow: hidden;
        background: #fff;
        // margin-bottom: 20rpx;
        // border-radius: 16rpx;
        padding: 0 20rpx;

        /* &:nth-child(1) {
        border-radius: 0;
      } */
      }

      .cateRightBox2:last-child {
        padding-bottom: 20rpx;
      }
    }
  }

  .cu-bar .search-form {
    line-height: 52rpx;
    height: 52rpx;
  }

  .text-df {
    justify-content: left;
    align-items: left;

    view {
      width: 120rpx;
      height: 3rpx;
      background: #ccc;
      margin: 0 15rpx;
    }
  }

  .placeholderStyle {
    font-size: 26rpx;
    color: grey;
  }

  .block-24 {
    width: 24rpx;
    height: 24rpx;
    font-size: 24rpx;
  }

  .fu-cate-block {
    justify-content: space-between !important;
    padding-top: 32rpx;
    font-size: 28rpx;
    padding-left: 24rpx;
  }

  .text-name {
    font-size: 24rpx;
  }
  .cu-list.grid.no-border>.cu-item{
    padding-top: 24rpx;
    padding-bottom: 0!important;
  }
  .cu-list.grid>.cu-item uni-text{
    margin-top: 16rpx;
  }
  .cu-list.grid.no-border{
    padding: 20rpx 0;
  }
</style>
