<template>
  <view style="background: #FFF;border-radius: 32rpx 32rpx 0 0;margin-top: 25rpx;">
    <view class="selects-page" style="">
	  <view style="position: relative;" @click="brandClick()" :class="brandFlag?'selectedTxt':''">品牌
	  <view class="" style="position: absolute;top:-20rpx;right: -8rpx;" v-if="brandFlag && selectedFirstColumnIndex ">
	  	<image src="@/static/bg/yuandian.png" style="width: 12rpx;height: 12rpx;" mode=""></image>
	  </view>
	  </view>
      <view @click="beerClick()" style="margin-left: 100rpx; position: relative;" :class="beerFlag?'selectedTxt':''">啤酒风格
		<view class="" style="position: absolute;top:-20rpx;right: -8rpx;" v-if="beerFlag && selectedThreeColumnIndexes.length>0 ">
			<image src="@/static/bg/yuandian.png" style="width: 12rpx;height: 12rpx;" mode=""></image>
		</view>
	  </view>
    </view>
    <view class='productNav' v-if="brandFlag">
      <!-- 左侧导航 -->
      <view class='left' >
        <view style="position: relative;" :class="posi == item.id ? 'selected' : 'normal'" @tap="switchNav(item)" v-for="(item, index) in dataList" :key="index">
          {{ item.name }}
		  <view class="" style="position: absolute;top:-20rpx;right: 8rpx;" v-if="(posi == item.id ) && selectedFirstColumnIndex ">
		  	<image src="@/static/bg/yuandian.png" style="width: 12rpx;height: 12rpx;" mode=""></image>
		  </view>
        </view>
      </view>
      <!-- 右侧内容 -->
      <view class='right'>
        <view class="content">
		<view class="divider"></view>
          <!-- 第一列 -->
          <scroll-view
            scroll-y="true"
            class="scroll-1"
            @scroll="scrollLeft"
            
            :scroll-top="scrollTopLeft"
          >
            <!-- 添加“全部”按钮 -->
            <view
              class="wh-1"
              style="margin:0 auto 26rpx auto;"
              @tap="selectFirstColumnAll"
            >
              <view class="right-one"  :class="isFirstColumnAllSelected ? 'selecteds' : ''">全部</view>
            </view>
            <view
              :id="item.id"
              v-for="(item, index) in selectedData"
              :key="index"
              @tap="selectFirstColumn(item)"
              class="wh-1" style="margin:0 auto 26rpx auto;"
            >
              <view class="right-one"  :class="selectedFirstColumnIndex === item.id ? 'selecteds' : ''">{{ item.name }}</view>
            </view>
          </scroll-view>

          <!-- 分割线 -->
          <view class="divider"></view>

          <!-- 第二列 -->
          <scroll-view
            scroll-y="true"
            class="scroll"
            @scroll="scrollRight"
            :scroll-into-view="posi"
            :scroll-top="scrollTopRight"
          >
            <!-- 添加“全部”按钮 -->
            <view
              class=""
              style="margin: 0 24rpx 24rpx 24rpx;"
              @tap="selectSecondColumnAll"
            >
              <view class="right-one" style="padding: 20rpx 0;" :class="isSecondColumnAllSelected ? 'selecteds' : ''">全部</view>
            </view>
            <view
              :id="item.id"
              v-for="(item, index) in selectedSecondColumnData"
              :key="item.ids"
              @tap="toggleSecondColumnSelection(item)"
              class=""
            >
              <view class="right-one" 
                :class="selectedSecondColumnIndexes.includes(item.ids) ? 'selecteds' : ''"
                style="padding:20rpx 0;margin: 0 24rpx 24rpx 24rpx;">{{ item.name }}</view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
	<view class="" v-if="beerFlag" style="padding: 0 44rpx 0 54rpx;">
		  <!-- 第一列 -->
		  <scroll-view
		    scroll-y="true"
		    class="scroll"
		    @scroll="scrollLeft"
		    :scroll-into-view="posi"
		  >
		    <!-- 添加“全部”按钮 -->
		    <view
		      style="margin:0 auto 26rpx auto;"
		      @tap="selectBeerAll"
		    >
		      <view class="right-one" style="padding:20rpx 0;" :class="selectBeerSelected ? 'selecteds' : ''">全部</view>
		    </view>
		    <view
		      :id="item.id"
		      v-for="(item, index) in beerList"
		      :key="index"
		      @tap="toggleThreeColumnSelection(item)"
		      class="" 
		    >
		      <view class="right-one"  style="padding:20rpx 0;margin: 0 0 24rpx 0;" :class="selectedThreeColumnIndexes.includes(item.id) ? 'selecteds' : ''">{{ item.name }}</view>
		    </view>
		  </scroll-view>
	</view>
	<view class="flex align-center" style="width:100%;margin:0 22rpx; font-size: 28rpx;padding-bottom: 20rpx;">
		<view class="btns btn1" style="">重置</view>
		<view class="btns btn2" style="color:#FFF;">确认</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posi: '1', // 当前选中的左侧导航项
      scrollTopLeft: 0, // 左侧滚动位置
      scrollTopRight: 0, // 右侧滚动位置
      data: [], // 模拟数据
      dataList: [{name:'国家/地区',id:'1'},{name:'我的关注',id:'2'}], // 循环数据
      dataEleHeight: [], // 获取data数组中各个元素的高度
      topList: [], // 计算得到各个元素与顶部的距离
      scrollHeight: 500, // 滚动区域的高度
      flag: true, // 判断左侧是否做高亮显示判断
      selectedFirstColumnIndex: '', // 当前选中的第一列索引
      isFirstColumnAllSelected: true, // 第一列“全部”按钮的选中状态
      selectedData: [
        {name:'浙江',id:'1-1',parentId: '1'},
        {name:'呼市',id:'1-2',parentId: '1'},
        {name:'北京',id:'1-3',parentId: '1'},
        {name:'天津',id:'1-4',parentId: '1'},
        {name:'上海',id:'1-5',parentId: '1'},
      ], // 根据选中的左侧按钮更新右侧第一列显示的数据
      selectedSecondColumnData: [
        {name:'风格1',parentId:'1-1',ids: '02'},
        {name:'风格2',parentId:'1-1',ids: '03'},
        {name:'风格3',parentId:'1-1',ids: '04'},
        {name:'风格4',parentId:'1-1',ids: '05'},
        {name:'风格5',parentId:'1-1',ids: '06'},
      ], // 根据选中的第一列数据更新右侧第二列显示的数据
      selectedSecondColumnIndexes: [], // 右侧第二列选中的索引数组
      isSecondColumnAllSelected: true, // 第二列“全部”按钮的选中状态
	  beerFlag:false,
	  brandFlag: true,
	  beerList:[
		  {name:'西打酒1',id: '01'},
		  {name:'西打酒2',id: '02'},
		  {name:'西打酒3',id: '03'},
		  {name:'西打酒4',id: '04'},
		  {name:'西打酒5',id: '05'},
	  ],
	  selectBeerSelected: true,
	  selectedThreeColumnIndexes: []//啤酒风格选中的索引数组，
    };
  },
  methods: {
	beerClick() {
		this.beerFlag = true
		this.brandFlag = false
	},
	brandClick(){
		this.brandFlag = true
		this.beerFlag = false
		
	},
    // 左侧导航切换
    switchNav(item, index) {
      if (this.posi !== item.id) {
        this.posi = item.id;
        this.selectedFirstColumnIndex = null; // 清空第一列选中状态
        this.isFirstColumnAllSelected = false; // 清空第一列“全部”按钮选中状态
        this.selectedData = []; // 更新右侧第一列显示的数据
        this.selectedSecondColumnData = []; // 更新右侧第二列显示的数据
        this.selectedSecondColumnIndexes = []; // 清空右侧第二列选中状态
        this.isSecondColumnAllSelected = false; // 清空第二列“全部”按钮选中状态
      } else {
        // 重复点击一样要定位到最开头的位置
        this.scrollTopLeft = this.topList[index];
        this.scrollTopRight = this.topList[index];
      }
    },

    // 选择第一列
    selectFirstColumn(row) {
      this.selectedFirstColumnIndex = row.id;
      this.isFirstColumnAllSelected = false; // 取消“全部”按钮的选中状态
      // 清空右侧第二列选中状态
      this.selectedSecondColumnIndexes = [];
      this.isSecondColumnAllSelected = false; // 取消第二列“全部”按钮的选中状态
    },

    // 选择第一列“全部”按钮
    selectFirstColumnAll() {
      this.isFirstColumnAllSelected = !this.isFirstColumnAllSelected;
      if (this.isFirstColumnAllSelected) {
        this.selectedFirstColumnIndex = null; // 清空第一列选中状态
		this.selectedSecondColumnIndexes = [];
      }
    },

    // 切换右侧第二列选中状态
    toggleSecondColumnSelection(item) {
      if (this.selectedSecondColumnIndexes.includes(item.ids)) {
        this.selectedSecondColumnIndexes = this.selectedSecondColumnIndexes.filter(i => i !== item.ids);
      } else {
        this.selectedSecondColumnIndexes.push(item.ids);
      }
      this.isSecondColumnAllSelected = false; // 取消“全部”按钮的选中状态
    },

    // 选择第二列“全部”按钮
    selectSecondColumnAll() {
      this.isSecondColumnAllSelected = !this.isSecondColumnAllSelected;
      if (this.isSecondColumnAllSelected) {
        this.selectedSecondColumnIndexes = []; // 清空第二列选中状态
      }
    },
	//选择啤酒风格全部按钮
	selectBeerAll() {
		this.selectBeerSelected = !this.selectBeerSelected
		
		if (this.selectedThreeColumnIndexes) {
		  this.selectedThreeColumnIndexes = []; // 清空第二列选中状态
		}
	},
	toggleThreeColumnSelection(item) {
		if (this.selectedThreeColumnIndexes.includes(item.id)) {
		  this.selectedThreeColumnIndexes = this.selectedThreeColumnIndexes.filter(i => i !== item.id);
		} else {
		  this.selectedThreeColumnIndexes.push(item.id);
		}
		this.selectBeerSelected = false; // 取消“全部”按钮的选中状态
	},
    // 左侧滚动事件（取消滚动功能）
    scrollLeft(e) {
      // 不做任何处理，取消滚动功能
    },

    // 右侧滚动事件
    scrollRight(e) {
      // let index = this.posi.substring(2);
      // if (this.flag) {
      //   for (let i in this.topList) {
      //     if (
      //       i < this.topList.length - 1 &&
      //       this.topList[i] <= e.detail.scrollTop &&
      //       e.detail.scrollTop < this.topList[parseInt(i) + 1]
      //     ) {
      //       this.posi = this.dataList[i].id;
      //       break;
      //     }
      //     this.posi = this.dataList[i].id;
      //   }
      // }
      // this.flag = true;
      // this.scrollTopRight = e.detail.scrollTop;
    },
  },
};
</script>

<style>
.selects-page{
	text-align: center; 
	display: flex;
	justify-content: center; 
	align-items: center;
	padding:0rpx 0 56rpx 0;
	background: #FFF;
	font-size: 32rpx;
	font-weight: 600;
	color: #030303;
}
.productNav {
  display: flex;
  flex-direction: row;
  font-family: Roboto;
  background-color: #fff;
  padding-bottom: 20rpx;
}
.left {
  width: 25%;
  font-size: 30rpx;
  /* background-color: #f4f4f4; */
}
.left view {
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
}
.selected {
  background-color: #fff;
  /* border-left: 2px solid #e54847; */
  font-weight: bold;
  color: #4E63E0;
}
.normal {
  background-color: #FFFFFF;
  border-bottom: 1px solid #f2f2f2;
}
.right {
  width: 75%;
  margin: 0;
}
.right-one{
  border: 1px solid #606060;
  text-align: center;
  color: #606060;
  border-radius: 16rpx;
}
.wh-1{
  width: 130rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.scroll {
  height: 424rpx;
  text-align: center;
}
.scroll-1 {
  height: 424rpx;
  width: 174rpx;
  text-align: center;
  margin: 0 22rpx;
}
.title {
  background: #FFFFFF;
  color: white;
}
.content {
  display: flex;
  flex-direction: row;
}
.column {
  flex: 1;
}
.divider {
  width: 1px;
  background-color: #ccc;
  /* margin: 0 10rpx; */
}
.selecteds{
  border: 1px solid #19367A;
  color: #19367A;
}
.btns{
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
}
.btn1 {
	width: 28%;
}
.btn2 {
	border-radius: 8px;
	background: #4E63E0;
	width: 66%;
}
.selectedTxt{
	color: #19367A;
}
</style>