
<template>
  <view class="content"> 
    <backIcon :diff="diff"></backIcon>
    <cartBall :carLength="shopCarLength" :specialArea="specialArea"></cartBall>
    <view class="index_header">
      <view>{{ titLabel }}</view>
    </view>
    <!-- <view class="shareImg" v-if="specialArea == 21" @click="goShare">
      <img src="@/static/images/serach_999.png" alt="">
    </view> -->
    <view class="zhan"></view>
    <view class="contain">
      <view class="c_left">
        <view  v-for="(item, index) in oneList"
              :key="index">
          <view :class="[oneId==item.pkId?'c_left_tt':'c_left_t']" class="c_left_t" @tap="getOclass(item.pkId)">
            <view>{{ item.title }}</view>
            <u-icon name="arrow-right" v-show="oneId != item.pkId"  size="13"></u-icon>
            <u-icon name="arrow-down" v-show="oneId == item.pkId" color="#fff"  size="13"></u-icon>
          </view>
          <transition name="fade">
            <view class="c_left_b" v-show="oneId == item.pkId">
            <view v-for="(ctem, cndex) in twoList"
                :key="cndex" class="c_left_b_i">
                <view :class="[twoId==ctem.pkId?'actTab':'tab_i']"
                  @tap="getTwo(ctem)">
                  <view>{{ ctem.title }}</view>
                </view>
              </view>
            </view>
          </transition>
        </view>
       
      </view>
      <view class="c_right">
        <view  class="c_right_tt">
        <scroll-view :scroll-left="howLeft" scroll-x='true' @scroll="scroll"
                   class="c_right_t">
        <view v-for="item in threeList" :class="[threeId==item.pkId?'actTab1':'tab_i1']"
                @click="getThree(item)" :id="'a'+item.pkId"
                :key="item.pkId">{{ item.title }}</view>
        </scroll-view>
        <view class="c_right_p" @tap="openPop">
          <u-icon name="arrow-down"  size="18"></u-icon>
          </view> 
        </view>
        <view class="typeList">
          <view class="typeL_l">
          <view @tap="selTab(0)" :class="[selVal==0?'actSel':'']">综合</view>
          <view @tap="selTab(1)" :class="['disFlex',selVal==1?'actSel':'']">{{'价格'}}
            <u-icon :color="selVal==1?'#E03030':''" :name="isDao?'arrow-down-fill':'arrow-up-fill'" size="12"></u-icon>
            </view>  
          <view @tap="selTab(2)" :class="['disFlex',selVal==2?'actSel':'']">{{'销量'}}
            <u-icon :color="selVal==2?'#E03030':''" :name="isDao1?'arrow-down-fill':'arrow-up-fill'" size="12"></u-icon>
            </view>
          </view>
          <view class="typeL_r">
            <view class="shareImg" v-if="specialArea == 21" @click="goShare">
      <img src="@/static/images/sx.png" alt="">
    </view>
            </view>  
        </view>
        <view class="goodList">
                    <view v-for="item in goodList" :key="item.waresCode" class="goodList_i" @tap="goDetails(item)">
                        <img :src="item.cover1" class="cover" alt="">
                        <view class="goodList_ir">
                            <view>
                                {{ item.waresName }}
                            </view>
                            <view class="pv" v-if="specialArea != 18">
                                PV:{{ item.waresAchieve }}
                            </view>
                            <view class="pv" v-if="specialArea == 13">
                                BV:{{ item.assAchieve }}
                            </view>
                            <view class="goodList_ib">
                                <view>
                                    {{ item.waresPrice | numberToCurrency | isLocal}}
                                </view>
                                <img @click.stop="addCar(item)" src="@/static/images/cart.png" alt="">
                            </view>
                        </view>
                    </view>
                </view>
      </view>
      <u-popup :show="topShow" mode="top" @close="close">
        <view class="topFlex">
          <view>{{ twoTit }}</view> 
          <view @tap="close">   <u-icon name="arrow-up" size="18"></u-icon></view>   
        </view>
        <view class="btmFlex">
          <view v-for="item in threeList" :class="[threeId==item.pkId?'actTab2':'tab_i2']"
                @click="getThree(item)"
                :key="item.pkId">{{ item.title }}</view>
        </view>
		</u-popup>

    <u-popup :show="rightShow" mode="right" @close="rightShow = false" :closeOnClickOverlay="false">
			<view class="rightPopup">
				<view class="popup_top">
					<view>{{'搜索'}}</view>
					<view class="top_red" @click="rightShow = false">{{'返回'}}</view>
				</view>
        <view class="typesBox">
					<view class="typeTitle">
						{{'商品名称'}}
					</view>
          <view class="choiceBox">
          <view class="flex_btn">
							<u--input :placeholder="'请输入商品名称'"
						v-model="waresName"
						border="none"
				></u--input>
						</view></view>
          </view>
				<view class="typesBox">
					<view class="typeTitle">
						{{'自定义价格区间'}}
					</view>
					<view class="choiceBox">
						<view class="flex_btn">
							<u--input :placeholder="'最低价格'"
						v-model="startPrice"
						border="none"
				></u--input>
						</view>
						<view style="color: #666;">
							—
						</view>
						<view class="flex_btn">
							<u--input :placeholder="'最高价格'"
						v-model="endPrice"
						border="none"
				></u--input>
						</view>
					</view>
				</view>
        <view class="footer">
        <view class="footer_l" @tap="reset">{{'清空筛选条件'}}</view>  
        <view class="footer_r" @tap="getAllGoods">{{'确定'}}</view>  
        </view>

			</view>
		</u-popup>
    </view>

  </view>
</template>

<script>
import backIcon from '@/components/backIcon.vue'
import clTabbar from '@/components/cl-tabbar.vue'
import * as api from '@/config/goods'
import cartBall from '@/components/cartBall.vue'

export default {
  components: {
    'cl-tabbar': clTabbar,
    backIcon,
    cartBall
  },
  data() {
    return {
      isDao:true,
      isDao1:true,
      selVal:0,
      waresName:'',
      startPrice: '',
      endPrice: '',
      howLeft:0,
      topShow:false,
      rightShow:false,
      title: '',
      // 是否显示返回按钮
      isBack: true,
      backColor: 'rgba(165, 42, 42, 0)',
      isKong: false,
      shareImg: require('../../static/images/share.png'),
      addCarImg1: require('../../static/images/addCar1.png'),
      addCarImg2: require('../../static/images/addCar2.png'),
      specialArea: 21,
      goodsList: [],
      source: 0,
      sourceList: [],
      oneList: [],
      oneId: '',
      twoList: [],
      twoId: '',
      threeList:[],
      threeId:'',
      itemChildren: [],
      titLabel:'',
      twoTit:'',
      timeIndex:0,
      dataShow:false,
				value1: "",
        goodList:[],
        diff:0,

        shopCarLength: 0,
    }
  },
  onLoad(options) {
    console.log('%c [ options ]-216', 'font-size:13px; background:#31d3a2; color:#75ffe6;', options)
    // this.getAllGoods()
    // 获取海粉渠道
    // this.getSource()
    this.getClassIfy()
    // this.itemChildren = JSON.parse(options.children)
    this.titLabel = '直供专区'
    this.diff = Number(options.diff) || 0
    // let pages = getCurrentPages()
    //   let prevPage = pages[pages.length - 3]

    //   if (prevPage&&prevPage.route == 'pages/index/index') {
    //     this.diff = 1
    //   }else{
    //     this.diff =0
    //   }
  },
  onShow() {},
  methods: {
    addCar(item) {
            let carList = {
                specialArea: 21,
                number: 1,
                source: 0,
                productGroup: item.productGroup,
                pkId:item.pkId
            }
            api.addShopping(carList).then((res) => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '购物车添加成功' ,
                        icon: 'success',
                        mask: true,
                    })
                    setTimeout(() => {
                        this.$store.dispatch('getCarLength', this.specialArea).then((res) => {
                            this.shopCarLength = res.data.smallCount
                        })
                    }, 200)

                }
            })
        },
    getDate(e) {
				if (this.timeIndex == 1) {
					this.queryParams.endDate = formatMsToDate(e.value)
				} else {
					this.queryParams.startDate = formatMsToDate(e.value)
				}
				this.dataShow = false
			},
    openDate(index) {
				this.timeIndex = index
				this.dataShow = true
			},
    scroll(){
      // this.howLeft
    },
    reset(){
      this.isDao = true
      this.isDao1=true
      this.selVal=0
      this.waresName=''
      this.startPrice= ''
      this.endPrice= ''
    },
    rightClose(){
      this.rightShow = false
    },
    rightOpen(){
      this.rightShow = true
    },
    close(){
      this.topShow = false
    },
    selTab(index){
      if(index==1&&this.selVal == index){
        this.isDao = !this.isDao
      }
      if(index==2&&this.selVal == index){
        this.isDao1 = !this.isDao1
      }else{
        this.selVal = index
      }
      this.getAllGoods()
    },
    openPop(){
      
      console.log('%c [ 11 ]-117', 'font-size:13px; background:#9aac91; color:#def0d5;', 11)
      this.topShow = true
    },
    goShare() {
      this.rightOpen()
      // uni.navigateTo({
      //   url: '/pages/specialArea/share?specialArea=21',
      // })
    },
    setSpecial(item) {
      if (item.value == 21) {
      } else {
        // uni.$emit('returnData', item)
        // uni.navigateBack(1)
      }
    },
    getSource() {
      api.jxhhSource(1).then((res) => {
        this.sourceList = res.data
      })
    },
    goSeach() {},
    getOclass(pkId) {
      this.twoId = ''
      if(this.oneId == pkId){
        this.oneId = ''
      }else{
        this.oneId = pkId
       
        this.twoList = []
        this.getClassIfyTwo(pkId)
      }
      
    },
    getTwo(item) {
            this.twoId = item.pkId
            this.twoTit =  item.title
            this.threeId=''
            let arr = []
            if(this.twoId == ''){
             
              let twoIds = this.twoList.map(item => {
                return item.pkId
              })
              this.trimSpace(twoIds).then(res=>{
                arr = res
                console.log('%c [ arr ]-348', 'font-size:13px; background:#38190d; color:#7c5d51;', arr)
                this.getClassIfyThree(arr)
              })
            }else{
              console.log(2)
              arr = [this.twoId]
              console.log('%c [ arr ]-348', 'font-size:13px; background:#38190d; color:#7c5d51;', arr)
              this.getClassIfyThree(arr)
            }
            
        },
        getThree(item){
            this.threeId = item.pkId
            // let local 
            // var query = uni.createSelectorQuery().in(this).select(`#a${this.threeId}`)  
            //   query.boundingClientRect(res => {  
            //     local = res
            //   }).exec()
            //   this.$nextTick(function() {
            //     this.howLeft = local.left
            //   });
              this.getAllGoods()
            // this.getAllGoods1()
        },
    getClassIfy() {
      api
        .optionList({
          parentIds: [0],
        })
        .then((res) => {
          this.oneList = res.data
          this.oneId = this.oneList[0].pkId
          this.getClassIfyTwo(this.oneList[0].pkId)
        })
    },
    // 获取分类二级
    getClassIfyTwo(pkId) {
      api
        .optionList({
          parentIds: [pkId],
        })
        .then((res) => {
          res.data.unshift({
            title: '全部',
            pkId: '',
          })
          this.twoList = res.data
          let twoIds = res.data.map(item => {
            return item.pkId
          })
          this.twoTit =  this.twoList[0].title
          this.trimSpace(twoIds).then(res=>{
            this.getClassIfyThree(res)
          })
        })
    },
      // 获取分类三级
      getClassIfyThree(twoIds) {
            api
                .optionList({
                    parentIds: twoIds,
                })
                .then((res) => {
                    res.data.unshift({
                        title: '全部',
                        pkId: '',
                    })
                    this.threeList = res.data
                    this.threeId = this.threeList[0].pkId
                    this.getAllGoods()
                    // threeList
                })

        },
        getAllGoods(){
          this.rightShow = false
          api.sharingWares({
            pkCategoryOne:this.oneId,
            priceSorting:this.isDao?1:2,
            salesSorting:this.isDao1?1:2,
                      pkCategoryTwo:this.twoId,
                      pkCategoryThree:this.threeId,
                        waresName: this.waresName,
                        startPrice: this.startPrice,
                        endPrice: this.endPrice,
                    })
                    .then((res) => {
                        this.goodList = res.rows
                        this.total = res.total
                        this.goodList.forEach((item) => {
                            if (item.waresName.length > 13) {
                                item.waresName = item.waresName.substring(0, 13) + '...'
                            }
                        })
                    })
        },
    trimSpace(array) {
          return new Promise((resolve, reject) => {
            for (var i = 0; i < array.length; i++) {
                //这里为过滤的值
                if (array[i] == "" || array[i] == null || typeof(array[i]) == "undefined" || array[i] == '') {
                    array.splice(i, 1);
                    i = i - 1;
                }
            }
            resolve(array)
          })
            
        },
    goDetails(item) {
      uni.navigateTo({
        url:
          '/pages/shareArea/haiDetails?source=' +
          this.source +
          '&specialArea=21' +
          '&pkId=' +
          item.pkId,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.index_header {
  background:  #fff;
  font-size: 18px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  text-align: center;
  padding: 10px 0;
  position: fixed;
    width: 100%;
    z-index: 100000000;
}
.content {
  background: #f9f9f9;
  // height: 100vh;
  display: flex;
  flex-direction: column;
}
.zhan{
  height: 50px;
}
.index_btm {
  flex: 1;
  display: flex;
  height: 78vh;
  .index_l {

  background: #f2f2f2;
    width: 180rpx;
    padding: 10rpx 0;
    font-size: 11px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .index_r {
    flex: 1;
    background: #fff;
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap;
    view {
      display: inline-block;
      margin: 0 40rpx 20rpx 0;
    }
  }
}
.classIfy {
  padding: 0rpx 20rpx;
  margin: 20rpx 0;
  font-size: 26rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.actOne {
  color: #005BAC;
  border-left: 6rpx solid #ed1d25;
}
.tabList {
}
.tab {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  margin-top: 10rpx;
  background-color: #f9f9f9
}
.tab1 {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}

.heng {
  width: 24px;
  height: 2px;
  background: #ed1d25;
  border-radius: 1px 1px 1px 1px;
  margin-top: 4rpx;
}

.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 24rpx;
  .goods_item {
    background: #fff;
    margin-bottom: 20rpx;
    border-radius: 10px;
    overflow: hidden;
    width: 49%;
  }
  .goods_item_bom {
    padding: 6rpx 20rpx 10rpx 20rpx;
    min-height: 248rpx;
    box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
    // border-radius: 10px;
    margin-top: -8px;
  }
  .goodImg {
    height: 274rpx;
    width: 100%;
    display: block;
  }
  .shareImg {
   img{
    height: 54rpx;
    width: 54rpx;
   }
  }
  .tit1_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16rpx;
  }
  .tit1 {
    font-size: 24rpx;
    font-weight: 600;
    color: #333333;
  }
  .tit2 {
    font-size: 18px;
    font-weight: 400;
    color: #b42b2a;
  }
  .tit3 {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
  }
  .tit4 {
    font-size: 11px;
    font-weight: 600;
    color: #999999;
  }
  .disFlex {
    // width: 278px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6rpx;
  }
  .qzbq {
    color: #f33131;
  }
  .md {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    // padding-bottom: 10px;
    img {
      height: 22px;
      width: auto;
      margin-right: 10px;
      margin-bottom: 5px;
    }
  }
  .addCar {
    border: 1px solid #f33131;
    border-radius: 6px;
    font-size: 12px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #f33131;
    text-align: center;
    padding: 6rpx 0;
  }
}
.shareImg{
  // position: fixed;
  // margin: 14rpx 24rpx;
  // z-index: 1000000000;
  // right: 10rpx;
  // top: 10rpx;
  padding-top: 10rpx;
  img{
    width: 36rpx;
    height: 36rpx;
  }
}
.contain{
  // display: flex;
  // height: 100%;
  position: relative;
}
.c_left{
  width: 188rpx;
  background: #F2F2F2;
  font-size: 14px;
position: absolute;
left: 0;
height: 93vh;
overflow-y: auto;
  .c_left_tt{
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: 88rpx;
    padding: 10rpx 20rpx;
    background: #005BAC;
    color: #fff;
  }
  .c_left_t{
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: 88rpx;
    padding: 10rpx 20rpx;
  }
  .c_left_b{
    background: #fff;
    padding: 10rpx 20rpx;

.c_left_b_i{
  margin: 10rpx 0;
}
  }
}
.c_right{
  background: #fff;
  height: 93vh;
  padding-left: 188rpx;
  .c_right_t{
    white-space: nowrap;
		width: 80%;
    // display: flex;
    // align-items: center;
    padding: 18rpx;
  
    
  }
  .c_right_tt{
    position: relative;
    border-bottom: 2rpx solid #EEEEEE;
  }

}
// .fade-enter-active,
// .fade-leave-active {
//   transition: .3s;
// }

// .fade-enter,
// .fade-leave-to {
//   opacity: 0;
// }
.tab_i {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.actTab {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: #005BAC;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  padding: 6rpx 0;
}
.tab_i1 {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  display: inline-block;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 20rpx;
  margin-right: 10rpx;
  background: #F6F6F6;
  border-radius: 20px;
}
.actTab1 {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: #005BAC;
  white-space: nowrap;
  display: inline-block;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  padding: 10rpx 20rpx;
  margin-right: 10rpx;
}
.c_right_p{
  position: absolute;
  padding: 18rpx;
  right: 10rpx;
  top: 10rpx;
  background: #F6F6F6;
  border-radius: 20px;
}

.contain ::v-deep .u-transition{
    top: 50px!important;
  }
  .contain ::v-deep .u-popup__content{
    // border-radius: 0 0 10px 10px;
  }
  .topFlex{
    display: flex;
    justify-content: space-between;
    padding: 20rpx 20rpx 0 20rpx;
  }
  .btmFlex{
    display: flex;

    padding: 20rpx 20rpx 0 20rpx;
    flex-wrap: wrap;
  }
  .tab_i2 {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background: #F6F6F6;
  border-radius: 20px;

  margin-bottom: 20rpx;
}
.actTab2 {
  // width: 120rpx;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: #005BAC;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.rightPopup {
			width: 645rpx;
			.popup_top {
				padding: 25rpx;
				
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
        border-bottom: 2rpx solid #EEEEEE;
				.top_red {
					color: #005BAC;
				}
			}

			.typesBox {
				margin-top: 40rpx;

				.typeTitle {
					padding: 0 24rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
				}

				.choiceBox {
					padding: 0 12rpx;
					display: flex;
					margin-top: 17rpx;
					align-items: center;
					// flex-wrap: wrap;

					.flex_btn {
						background-color: #F4F4F4;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 14rpx 20rpx;
						border-radius: 30rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin: 17rpx 5rpx;
            width: 100%;
					}

					.selectbtn {
						background-color: #005BAC;
						color: #ffffff;
					}

				}
			}
      .footer{
        position: fixed;
        bottom:0;
        
        display: flex;
        align-items: center;
        width: 100%;
        .footer_l{
          width: 327rpx;
          text-align: center;
          background: #F3F3F3;
          height: 100rpx;
          line-height: 100rpx;
        }
        .footer_r{
          width: 327rpx;
          text-align: center;
          background: #005BAC;
          height: 100rpx;
          line-height: 100rpx;
          color: #fff;
        }
      }
		}
    .goodList {
    padding: 0 20rpx;
    // height: 90vh;
    overflow-y: auto;
    .goodList_i {
        display: flex;
        border-bottom: 1px solid #eee;
        padding: 20rpx 0;
        .goodList_ir {
            margin-left: 20rpx;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 24rpx;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            .goodList_ib {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 24rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #005BAC;
                img {
                    width: 56rpx;
                    height: 56rpx;
                }
            }
        }
    }
    .cover {
        width: 152rpx;
        height: 152rpx;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 10rpx;
    }
}
.typeList{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 30rpx 10rpx 20rpx;
  color:#666;
  .typeL_l{
    flex: 1;
    display: flex;
  align-items: center;
  justify-content: space-between;
  }
  .typeL_r{
    display: flex;
  align-items: center;
  margin-left: 20rpx;
  }
}
.disFlex {
  display: flex;
  align-items: center;
}
.actSel{
  color:#E03030
}
</style>
