<template>
  <view
    class="HMfilterDropdown"
    :class="{ setDropdownBottom: maskVisibility }"
    :style="{ top: menuTop + 'rpx' }"
  >
    <!-- 顶部菜单 -->
    <!-- <view class="nav">
      <block v-for="(item, index) in menu" :key="index">
        <view class="first-menu" :class="{ on: showPage == index }" @tap="togglePage(index)">
          <text class="name">item.name</text>
          <text
            class="iconfont triangle"
            :style="'transform:rotate(' + triangleDeg[index] + 'deg);'"
          />
        </view>
      </block>
    </view> -->
    <!-- 遮罩层 -->
    <!-- <view
      class="mask"
      :class="{ show: isShowMask, hide: maskVisibility != true }"
      @tap="hideMenu(false)"
    />
    <block v-for="(page, page_index) in subData" :key="page_index">
      <view
        class="sub-menu-class"
        :class="{ show: showPage == page_index, hide: pageState[page_index] != true }"
      > -->
    <!-- 分类 -->
    <!-- <block v-if="page.type == 'hierarchy-column' && page.subCategory.length > 0">
          <scroll-view
            class="sub-menu-list"
            :class="[activeMenuArr[page_index].length > 1 ? 'first' : 'alone']"
            :scroll-y="true"
            :scroll-into-view="'first_id' + firstScrollInto"
          >
            <block v-for="(sub, index) in page.subCategory" :key="index">
              <view
                :id="'first_id' + index"
                class="sub-menu"
                :class="{ on: activeMenuArr[page_index][0] == index }"
                @tap="selectHierarchyMenu(page_index, index, nullish)"
              >
                <view class="menu-name">
                  <text>{{ sub.name }}</text>
                  <text class="iconfont selected" />
                </view>
              </view>
            </block>
          </scroll-view> -->
    <!-- <block v-for="(sub, index) in page.subCategory" :key="index">
            <scroll-view
              v-if="activeMenuArr[page_index][0] == index && sub.subCategory.length > 0"
              class="sub-menu-list not-first"
              :scroll-y="true"
              :scroll-into-view="'second_id' + secondScrollInto"
            >
              <block v-for="(sub_second, second_index) in sub.subCategory" :key="second_index">
                <view
                  :id="'second_id' + second_index"
                  class="sub-menu"
                  :class="{ on: activeMenuArr[page_index][1] == second_index }"
                >
                  <view
                    class="menu-name"
                    @tap="
                      selectHierarchyMenu(page_index, activeMenuArr[page_index][0], second_index)
                    "
                  > -->
    <!-- <text>{{ sub_second.name }}</text>
                  </view>
                </view>
              </block>
            </scroll-view>
          </block> -->
    <!-- 第三级菜单 -->
    <!-- <block v-for="(sub, index) in page.subCategory" :key="index">
            <block v-for="(sub_second, second_index) in sub.subCategory" :key="second_index">
              <scroll-view
                v-if="
                  activeMenuArr[page_index][0] == index &&
                    activeMenuArr[page_index][1] == second_index &&
                    sub_second.subCategory.length > 0
                "
                class="sub-menu-list not-first third"
                :scroll-y="true"
                :scroll-into-view="'third_id' + thirdScrollInto"
              >
                <block v-for="(sub_third, third_index) in sub_second.subCategory" :key="third_index">
                  <view
                    :id="'third_id' + third_index"
                    class="sub-menu"
                    :class="{ on: activeMenuArr[page_index][2] == third_index }"
                  >
                    <view
                      class="menu-name"
                      @tap="
                        selectHierarchyMenu(
                          page_index,
                          activeMenuArr[page_index][0],
                          second_index,
                          third_index
                        )
                      "
                    >
                      <text>{{ sub_third.name }}</text>
                    </view>
                  </view>
                </block>
              </scroll-view>
            </block>
          </block> -->
    <!-- </block> -->
    <!-- 推荐 -->
    <!-- <block v-if="page.type == 'rank'">
          <view>
            <scroll-view class="sub-menu-list" :scroll-y="true">
              <view v-for="(rankCondition, rank_index) in page.subCategory" :key="rank_index">
                <view
                  :class="{ on: rankCondition.selected }"
                  @tap="selectRankCondition(page_index, rank_index)"
                  >{{ rankCondition.name }}</view
                >
              </view>
            </scroll-view>
          </view>
        </block> -->
    <!-- 价格 -->
    <!-- <block v-if="page.type == 'radio'">
          <view class="filter">
            <scroll-view class="menu-box" :scroll-y="true">
              <view v-for="(box, box_index) in page.subCategory" :key="box_index" class="box">
                <view class="title">{{ box.name }}</view>
                <view class="labels">
                  <view
                    v-for="(label, label_index) in box.subCategory"
                    :key="label_index"
                    :class="{ on: label.selected }"
                    @tap="selectRadioLabel(page_index, box_index, label_index)"
                    >{{ label.name }}</view
                  >
                </view>
              </view>
            </scroll-view>
            <view class="btn-box">
              <view class="reset" @tap="resetFilterData(page_index)">重置</view>
              <view class="submit" @tap="setFilterData(page_index)">确定</view>
            </view>
          </view>
        </block>
      </view>
    </block>
  </view> -->
    <view class="nav">
      <!-- 顶部菜单栏 -->
      <block v-for="(item, index) in menu" :key="index">
        <view class="first-menu" :class="{ on: showPage === index }" @tap="togglePage(index)">
          <text class="name">{{ item.name }}</text>
          <text
            class="iconfont triangle"
            :style="'transform:rotate(' + triangleDeg[index] + 'deg);'"
          />
        </view>
      </block>
    </view>
    <!-- 遮罩层 -->
    <view
      class="mask"
      :class="{ show: isShowMask, hide: maskVisibility !== true }"
      @tap="hideMenu(false)"
    />
    <!-- 下拉菜单 -->
    <block v-for="(page, page_index) in menu" :key="page_index">
      <view
        class="sub-menu-class"
        :class="{ show: showPage === page_index, hide: pageState[page_index] !== true }"
      >
        <!-- 分类 -->
        <block v-if="page.type === 'hierarchy' && page.subCategory.length > 0">
          <scroll-view
            class="sub-menu-list"
            :class="[activeMenuArr[page_index].length > 1 ? 'first' : 'alone']"
            :scroll-y="true"
          >
            <block v-for="(sub, first_index) in page.subCategory" :key="first_index">
              <view
                class="sub-menu"
                :class="{ on: activeMenuArr[page_index][0] === first_index }"
                @tap="selectHierarchyMenu(page_index, index, null, null)"
              >
                <view class="menu-name">
                  <text>{{ sub.cidName }}</text>
                  <text class="iconfont selected" />
                </view>
              </view>
            </block>
          </scroll-view>
          <block v-for="(sub, first_index) in page.subCategory" :key="first_index">
            <scroll-view
              v-if="activeMenuArr[page_index][0] == index && sub.subCategory.length > 0"
              class="sub-menu-list not-first"
              :scroll-y="true"
            >
              <block v-for="(sub_second, second_index) in sub.subCategory" :key="second_index">
                <view
                  class="sub-menu"
                  :class="{ on: activeMenuArr[page_index][1] == second_index }"
                >
                  <view
                    class="menu-name"
                    @tap="
                      selectHierarchyMenu(
                        page_index,
                        activeMenuArr[page_index][0],
                        second_index,
                        null
                      )
                    "
                  >
                    <text>{{ sub_second.cidName }}</text>
                  </view>
                </view>
              </block>
            </scroll-view>
          </block>
          <!-- 第三级菜单 -->
          <block v-for="(sub, first_index) in page.subCategory" :key="first_index">
            <block v-for="(sub_second, second_index) in sub.subCategory" :key="second_index">
              <scroll-view
                v-if="
                  activeMenuArr[page_index][0] == index &&
                    activeMenuArr[page_index][1] == second_index &&
                    sub_second.subCategory.length > 0
                "
                class="sub-menu-list not-first third"
                :scroll-y="true"
              >
                <block
                  v-for="(sub_third, third_index) in sub_second.subCategory"
                  :key="third_index"
                >
                  <view
                    class="sub-menu"
                    :class="{ on: activeMenuArr[page_index][2] == third_index }"
                  >
                    <view
                      class="menu-name"
                      @tap="
                        selectHierarchyMenu(
                          page_index,
                          activeMenuArr[page_index][0],
                          second_index,
                          third_index
                        )
                      "
                    >
                      <text>{{ sub_third.cidName }}</text>
                    </view>
                  </view>
                </block>
              </scroll-view>
            </block>
          </block>
        </block>
        <!-- 排序 -->
        <block v-if="page.type === 'rank'">
          <view>
            <scroll-view class="sub-menu-list" :scroll-y="true">
              <view v-for="(rankCondition, rank_index) in page.subCategory" :key="rank_index">
                <view
                  :class="{ on: rankCondition.selected }"
                  @tap="selectRankCondition(page_index, rank_index)"
                  >{{ rankCondition.name }}</view
                >
              </view>
            </scroll-view>
          </view>
        </block>
        <!-- 价格 -->
        <block v-if="page.type === 'radio'">
          <view class="filter">
            <view v-for="(item, index) in page.priceArea" :key="index">
              <view class="priceInterval" @tap="selectRadioLabel(page_index, index)">
                <text class="front">{{ item.minPrice }}</text>
                <p>-</p>
                <text class="back">{{ item.maxPrice }}</text>
              </view>
            </view>
            <view class="priceInterval">
              <input class="front input" type="text" placeholder="最低价" />
              <p>-</p>
              <input class="back input" type="text" placeholder="最高价" />
            </view>
            <view class="btn-box">
              <view class="reset" @tap="reset(page_index)">重置</view>
              <view class="submit" @tap="submit(page_index)">确定</view>
            </view>
          </view>
        </block>
      </view>
    </block>
  </view>
</template>
<script>
export default {
  props: {
    menuTop: {
      type: Number,
      default: 0
    },
    filterData: {
      type: Object,
      default: () => {}
    },
    updateMenuName: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      menu: [
        {
          name: "分类",
          type: "hierarchy"
        },
        {
          name: "排序",
          type: "rank"
        },
        {
          name: "价格",
          type: "radio"
        }
      ],
      menuData: [], //菜单数据
      showPage: -1, //菜单页面显示
      pageState: [], //页面状态
      activeMenuArr: [], //UI状态
      shadowActiveMenuArr: [], //记录选中
      triangleDeg: [], //三角形的翻转动画控制
      isShowMask: false, //遮罩层显示/隐藏动画控制
      maskVisibility: false //遮罩层显示/隐藏状态
    };
  },
  //   data() {
  //     return {
  //       menuData: [],
  //       subData: [], //菜单数据
  //       menu: [], //顶部菜单数据
  //       showPage: -1, //菜单页面显示/隐藏动画控制
  //       pageState: [], //页面的状态
  //       activeMenuArr: [], //UI状态
  //       shadowActiveMenuArr: [], //记录选中
  //       defaultActive: [],
  //       triangleDeg: [], //小三角形的翻转动画控制
  //       isShowMask: false, //遮罩层显示/隐藏动画控制
  //       maskVisibility: false, //遮罩层显示/隐藏状态
  //       //滚动区域定位
  //       firstScrollInto: 0,
  //       secondScrollInto: 0,
  //       thirdScrollInto: 0,
  //       componentTop: 0 //组件top
  //     };
  //   },

  //   watch: {
  //     filterData: {
  //       handler(newVal) {
  //         this.menuData = JSON.parse(JSON.stringify(newVal));
  //         this.initMenu(); //filterData重新赋值初始化菜单
  //       },
  //       immediate: true,
  //       deep: true
  //     }
  //     // defaultSelected(newVal) {
  //     //   if (newVal.length == 0) {
  //     //     return;
  //     //   }
  //     //   this.defaultActive = JSON.parse(JSON.stringify(newVal));
  //     //   this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
  //     //   this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
  //     // }
  //   },
  watch: {
    filterData: {
      handler(newVal) {
        this.menuData = JSON.parse(JSON.stringify(newVal));
        this.initMenu();
      }
    }
  },
  methods: {
    initMenu() {
      this.menuData.frontCategoryList.unshift({
        cidName: "全部",
        subCategory: []
      });
      this.menu[0].subCategory = this.menuData.frontCategoryList;
      this.menu[2].priceArea = this.menuData.priceArea;
      for (let i = 0; i < this.menu.length; i++) {
        this.menu[i] = this.processSubMenu(this.menu[i]);
        this.triangleDeg.push(0);
        this.pageState.push(false);
      }
      this.activeMenuArr = [[null, null, null], [null], [null, null]];
      this.shadowActiveMenuArr = [[null, null, null], [null], [null, null]];
    },
    processSubMenu(menu) {
      if (
        Object.prototype.hasOwnProperty.call(menu, "subCategory") &&
        menu.subCategory.length > 0
      ) {
        for (let i = 0; i < menu.subCategory.length; i++) {
          menu.subCategory[i] = this.processSubMenu(menu.subCategory[i]);
        }
      } else {
        menu.subCategory = [];
      }
      return menu;
    },
    selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
      if (
        level2_index == null &&
        level3_index == null &&
        this.shadowActiveMenuArr[page_index].length > 0 &&
        this.shadowActiveMenuArr[page_index][0] == level1_index
      ) {
        this.activeMenuArr.splice(
          page_index,
          1,
          JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))
        );
      }
    },
    togglePage(index) {
      if (this.isToggleing) {
        return;
      }
      this.isToggleing = true;
      setTimeout(() => {
        this.isToggleing = false;
      }, 150);
      if (index == this.showPage) {
        this.hideMenu();
      } else {
        this.showMenu(index);
      }
    },
    hideMenu(isTriggerConfirm) {
      this.hideMenuLayer(true);
      this.hideMaskLayer();
      this.showPage = -1;
      if (isTriggerConfirm) {
        this.confirm();
      }
    },
    showMenu(index) {
      if (this.showPage > -1) {
        this.hideMenuLayer(false);
      }
      this.showMenuLayer(index);
      this.showMaskLayer();
    },
    showMaskLayer() {
      this.maskVisibility = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.isShowMask = true;
        }, 0);
      });
    },
    hideMaskLayer() {
      this.isShowMask = false;
      setTimeout(() => {
        this.maskVisibility = false;
      }, 200);
    },
    hideMenuLayer(isAnimation) {
      this.triangleDeg[this.showPage] = 0;
      let tmpIndex = this.showPage;
      if (isAnimation) {
        setTimeout(() => {
          this.pageState.splice(tmpIndex, 1, false);
        }, 200);
      } else {
        this.pageState.splice(tmpIndex, 1, false);
      }
      this.firstScrollInto = null;
      this.secondScrollInto = null;
    },
    showMenuLayer(index) {
      this.processPage(index);
      this.pageState.splice(index, 1, true);
      this.$nextTick(() => {
        setTimeout(() => {
          this.showPage = index;
        }, 0);
      });
      this.triangleDeg[index] = 180;
    },
    reloadActiveMenuArr() {
      for (let i = 0; i < this.menuData.length; i++) {
        let tmpitem = this.menuData[i];
        let tmpArr = this.processActive(tmpitem);
        tmpitem = this.processSubMenu(tmpitem);
        if (this.activeMenuArr[i].length != tmpArr.length) {
          this.menuData[i] = tmpitem;
          this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
          this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
        }
      }
      this.subData = this.menuData;
      this.$forceUpdate();
    },
    processPage(index) {
      //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
      this.reloadActiveMenuArr();
      //重置UI控制数组
      this.activeMenuArr.splice(index, 1, this.shadowActiveMenuArr[index]);
      if (this.menu[index].type == "filter") {
        //重载筛选页选中状态
        let level = this.shadowActiveMenuArr[index].length;
        for (let i = 0; i < level; i++) {
          let box = this.subData[index].subCategory[i].subCategory;
          for (let j = 0; j < box.length; j++) {
            if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
              this.subData[index].subCategory[i].subCategory[j].selected = true;
            } else {
              this.subData[index].subCategory[i].subCategory[j].selected = false;
            }
          }
        }
      } else if (this.menu[index].type == "hierarchy") {
        return;
      } else if (this.menu[index].type == "hierarchy-column") {
        return;
      } else if (this.menu[index].type == "radio") {
        //重载筛选页选中状态
        // let level = this.shadowActiveMenuArr[index].length;
        // for (let i = 0; i < level; i++) {
        //   let box = this.subData[index].subCategory[i].subCategory;
        //   for (let j = 0; j < box.length; j++) {
        //     if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
        //       this.subData[index].subCategory[i].subCategory[j].selected = true;
        //     } else {
        //       this.subData[index].subCategory[i].subCategory[j].selected = false;
        //     }
        //   }
        // }
      }
    }
  }
  //   methods: {
  //     initMenu() {
  //       let tmpMenuActiveArr = [];
  //       let tmpMenu = [];
  //       for (let i = 0; i < this.menuData.length; i++) {
  //         let tmpitem = this.menuData[i];
  //         tmpMenu.push({
  //           //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
  //           name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.subCategory[0].name),
  //           type: tmpitem.type
  //         });
  //         //初始化选中项数组-ui状态
  //         tmpMenuActiveArr.push(this.processActive(tmpitem));
  //         //初始化角度数组
  //         this.triangleDeg.push(0);
  //         //初始化控制显示状态数组
  //         this.pageState.push(false);
  //         //递归处理子菜单数据
  //         tmpitem = this.processSubMenu(tmpitem);
  //         this.menuData[i] = tmpitem;
  //       }
  //       this.menu = tmpMenu;
  //       //初始化选中项数组
  //       tmpMenuActiveArr =
  //         this.defaultActive.length > 0
  //           ? this.defaultActive
  //           : this.activeMenuArr.length > 0
  //           ? this.activeMenuArr
  //           : tmpMenuActiveArr;
  //       this.defaultActive = [];
  //       this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
  //       this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
  //       //加载菜单数据
  //       this.subData = this.menuData;
  //     } //选中
  //   selectHierarchyMenu(page_index, level1_index, level2_index) {
  //     //读取记录
  //     if (
  //       level2_index == null &&
  //       this.shadowActiveMenuArr[page_index].length > 0 &&
  //       this.shadowActiveMenuArr[page_index][0] == level1_index
  //     ) {
  //       this.activeMenuArr.splice(
  //         page_index,
  //         1,
  //         JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))
  //       );
  //     }
  //     this.activeMenuArr[page_index].splice(0, 1, level1_index);
  //     let tmpMemu = this.subData[page_index].subCategory[level1_index];
  //     if (tmpMemu.subCategory.length == 0) {
  //       this.selectedMemu(page_index, level1_index, level2_index);
  //     } else if (level2_index != null) {
  //       this.activeMenuArr[page_index].splice(1, 1, level2_index);
  //       tmpMemu = tmpMemu.subCategory[level2_index];
  //       if (tmpMemu.subCategory.length == 0 || this.menu[page_index].type == "hierarchy") {
  //         this.selectedMemu(page_index, level1_index, level2_index);
  //       }
  //     }
  //   },
  //   selectedMemu(page_index, level1_index, level2_index) {
  //     let sub = this.subData[page_index].subCategory[level1_index].subCategory[level2_index];
  //     if (this.updateMenuName) {
  //       this.menu[page_index].name =
  //         (level2_index != null && sub.name) || this.subData[page_index].subCategory[level1_index].name;
  //     }
  //     this.shadowActiveMenuArr[page_index] = JSON.parse(
  //       JSON.stringify(this.activeMenuArr[page_index])
  //     );
  //     this.hideMenu(true);
  //   },
  //   setFilterData(page_index) {
  //     this.shadowActiveMenuArr[page_index] = JSON.parse(
  //       JSON.stringify(this.activeMenuArr[page_index])
  //     );
  //     this.hideMenu(true);
  //   },
  //   resetFilterData(page_index) {
  //     let tmpArr = [];
  //     let level = this.shadowActiveMenuArr[page_index].length;
  //     while (level > 0) {
  //       tmpArr.push([]);
  //       let box = this.subData[page_index].subCategory[level - 1].subCategory;
  //       for (let i = 0; i < box.length; i++) {
  //         this.subData[page_index].subCategory[level - 1].subCategory[i].selected = false;
  //       }
  //       level--;
  //     }
  //     this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
  //     this.$forceUpdate();
  //   },
  //   selectRadioLabel(page_index, box_index, label_index) {
  //     let activeIndex = this.activeMenuArr[page_index][box_index][0];
  //     if (activeIndex == label_index) {
  //       this.subData[page_index].subCategory[box_index].subCategory[activeIndex].selected = false;
  //       this.activeMenuArr[page_index][box_index][0] = null;
  //     } else {
  //       if (
  //         activeIndex != null &&
  //         activeIndex < this.subData[page_index].subCategory[box_index].subCategory.length
  //       ) {
  //         this.subData[page_index].subCategory[box_index].subCategory[activeIndex].selected = false;
  //       }
  //       this.subData[page_index].subCategory[box_index].subCategory[label_index].selected = true;
  //       this.activeMenuArr[page_index][box_index][0] = label_index;
  //     }
  //     this.$forceUpdate();
  //   },
  //   selectRankCondition(page_index, rank_index) {
  //     let activeIndex = this.activeMenuArr[page_index][0];
  //     if (activeIndex == rank_index) {
  //       this.subData[page_index].subCategory[activeIndex].selected = false;
  //       this.activeMenuArr[page_index][0] = null;
  //     } else {
  //       if (activeIndex != null && activeIndex < this.subData[page_index].subCategory.length) {
  //         this.subData[page_index].subCategory[activeIndex].selected = false;
  //       }
  //       this.subData[page_index].subCategory[activeIndex].selected = true;
  //       this.activeMenuArr[page_index][0] = rank_index;
  //     }
  //   },
  //   togglePage(index) {
  //     if (this.isToggleing) {
  //       return;
  //     }
  //     this.isToggleing = true;
  //     setTimeout(() => {
  //       this.isToggleing = false;
  //     }, 150);
  //     if (index == this.showPage) {
  //       this.hideMenu();
  //     } else {
  //       this.showMenu(index);
  //     }
  //   },
  //   hideMenu(isTriggerConfirm) {
  //     this.hideMenuLayer(true);
  //     this.hideMaskLayer();
  //     this.showPage = -1;
  //     if (isTriggerConfirm) {
  //       this.confirm();
  //     }
  //   },
  //   showMenu(index) {
  //     if (this.showPage > -1) {
  //       this.hideMenuLayer(false);
  //     }
  //     this.showMenuLayer(index);
  //     this.showMaskLayer();
  //   },
  //   hideMaskLayer() {
  //     this.isShowMask = false;
  //     setTimeout(() => {
  //       this.maskVisibility = false;
  //     }, 200);
  //   },
  //   hideMenuLayer(isAnimation) {
  //     this.triangleDeg[this.showPage] = 0;
  //     let tmpIndex = this.showPage;
  //     if (isAnimation) {
  //       setTimeout(() => {
  //         this.pageState.splice(tmpIndex, 1, false);
  //       }, 200);
  //     } else {
  //       this.pageState.splice(tmpIndex, 1, false);
  //     }
  //     this.firstScrollInto = null;
  //     this.secondScrollInto = null;
  //   },
  //   showMenuLayer(index) {
  //     this.processPage(index);
  //     this.pageState.splice(index, 1, true);
  //     this.$nextTick(() => {
  //       setTimeout(() => {
  //         this.showPage = index;
  //       }, 0);
  //     });
  //     this.triangleDeg[index] = 180;
  //   },
  //   processActive(tmpitem) {
  //     let tmpArr = [];
  //     if (
  //       (tmpitem.type == "hierarchy" || tmpitem.type == "hierarchy-column") &&
  //       tmpitem.hasOwnProperty("subCategory") &&
  //       tmpitem.subCategory.length > 0
  //     ) {
  //       let level = this.getMaxFloor(tmpitem.subCategory);
  //       while (level > 0) {
  //         tmpArr.push(null);
  //         level--;
  //       }
  //     } else if (tmpitem.type == "filter") {
  //       let level = tmpitem.subCategory.length;
  //       while (level > 0) {
  //         tmpArr.push([]);
  //         level--;
  //       }
  //     } else if (tmpitem.type == "radio") {
  //       let level = tmpitem.subCategory.length;
  //       while (level > 0) {
  //         tmpArr.push([]);
  //         level--;
  //       }
  //     }
  //     return tmpArr;
  //   },
  //   processSubMenu(menu) {
  //     if (menu.hasOwnProperty("subCategory") && menu.subCategory.length > 0) {
  //       for (let i = 0; i < menu.subCategory.length; i++) {
  //         menu.subCategory[i] = this.processSubMenu(menu.subCategory[i]);
  //       }
  //     } else {
  //       menu.subCategory = [];
  //     }
  //     return menu;
  //   },
  //   getMaxFloor(treeData) {
  //     let max = 0;
  //     function each(data, floor) {
  //       data.forEach(e => {
  //         max = floor > max ? floor : max;
  //         if (e.hasOwnProperty("subCategory") && e.subCategory.length > 0) {
  //           each(e.subCategory, floor + 1);
  //         }
  //       });
  //     }
  //     each(treeData, 1);
  //     return max;
  //   }
  //   }
};
//
</script>
<style lang="scss">
.HMfilterDropdown {
  flex-shrink: 0;
  width: 100%;
  position: fixed;
  // position: sticky;
  z-index: 997;
  flex-wrap: nowrap;
  display: flex;
  flex-direction: row;
  top: var(--window-top);
  left: 0;
  // top:100px;
  overflow-y: hidden;
  &.setDropdownBottom {
    // height: 345px;
    bottom: 0;
  }
  view {
    display: flex;
    flex-wrap: nowrap;
  }
}
.region {
  flex: 1;
  height: 44px;
}
.nav {
  width: 100%;
  height: 44px;
  border-bottom: solid 1rpx #eee;
  z-index: 12;
  background-color: #ffffff;
  flex-direction: row;
  .first-menu {
    width: 100%;
    font-size: 13px;
    color: #757575;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: color 0.2s linear;

    &.on {
      color: #ec652b;

      .iconfont {
        color: #ec652b;
      }
    }
    .name {
      height: 20px;
      text-align: center;
      text-overflow: clip;
      overflow: hidden;
    }
    .iconfont {
      width: 13px;
      height: 13px;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s linear, color 0.2s linear;
    }
  }
}
.sub-menu-class {
  width: 100%;
  position: absolute;
  left: 0;
  transform: translate3d(0, -100%, 0);
  max-height: 345px;
  background-color: #ffffff;
  z-index: 11;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex-direction: row;
  transition: transform 0.15s linear;
  &.hide {
    display: none;
  }

  &.show {
    transform: translate3d(0, calc(44px + 1rpx), 0);
  }
}
.sub-menu-list {
  width: 100%;
  height: 345px;
  flex-direction: column;
  .sub-menu {
    min-height: 44px;
    font-size: 13px;
    flex-direction: column;
    padding-right: 15px;
    > .menu-name {
      height: 44px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      > .iconfont {
        display: none;
        font-size: 18px;
        color: #ec652b;
      }
    }
  }
  &.first {
    flex-shrink: 0;
    width: 236rpx;
    background-color: #f0f0f0;
    .sub-menu {
      padding-left: 15px;

      &.on {
        background-color: #fff;
      }
    }
    box-shadow: 5rpx 0 5rpx rgba($color: #000000, $alpha: 0.1);
  }
  &.alone {
    max-height: 345px;
    min-height: 170px;
    height: auto;
    .sub-menu {
      min-height: calc(44px - 1rpx);
      margin-left: 15px;
      border-bottom: solid 1rpx #e5e5e5;

      &.on {
        color: #ec652b;

        > .menu-name {
          > .iconfont {
            display: block;
          }
        }
      }
    }
  }
  &.third {
    box-shadow: 5rpx 0 20rpx rgba($color: #000000, $alpha: 0.2) inset;
  }
  &.not-first {
    box-shadow: 5rpx 0 5rpx rgba($color: #000000, $alpha: 0.1);
    .sub-menu {
      min-height: calc(44px - 1rpx);
      margin-left: 15px;
      border-bottom: solid 1rpx #e5e5e5;
      > .menu-name {
        height: calc(44px - 1rpx);
        > .iconfont {
          display: none;
          font-size: 18px;
          color: #ec652b;
        }
      }
      &.on {
        color: #ec652b;
        > .menu-name {
          > .iconfont {
            display: block;
          }
        }
      }
      .more-sub-menu {
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 9px;
        > text {
          height: 30px;
          border-radius: 3px;
          background-color: #f5f5f5;
          color: #9b9b9b;
          margin-bottom: 6px;
          margin-right: 6px;
          text-align: center;
          line-height: 30px;
          border: solid #f5f5f5 1rpx;
          flex: 0 0 calc(33.33% - 6px);
          overflow: hidden;
          font-size: 12px;
          &:nth-child(3n) {
            margin-right: 0;
          }
          &.on {
            border-color: #f6c8ac;
            color: #ec652b;
          }
          .iconfont {
            color: #9b9b9b;
          }
        }
      }
    }
  }
}
.filter {
  width: 100%;
  height: 345px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .menu-box {
    width: 698rpx;
    height: calc(345px - 75px);
    flex-shrink: 1;
    .box {
      width: 100%;
      padding-top: 16px;
      flex-direction: column;
      .title {
        width: 100%;
        font-size: 13px;
        color: #888;
      }
      .labels {
        flex-direction: row;
        flex-wrap: wrap;
        .on {
          border-color: #ec652b;
          background-color: #ec652b;
          color: #fff;
        }
        > view {
          width: calc((698rpx - 30rpx * 3) / 4 - 1rpx * 2);
          height: 30px;
          border: solid 1rpx #adadad;
          border-radius: 2px;
          margin-right: 30rpx;
          margin-top: 8px;
          font-size: 12px;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          &:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
    }
  }
  .btn-box {
    flex-shrink: 0;
    width: 698rpx;
    height: 75px;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    > view {
      width: 320rpx;
      height: 40px;
      border-radius: 40px;
      border: solid 1rpx #ec652b;
      align-items: center;
      justify-content: center;
    }
    .reset {
      color: #ec652b;
    }
    .submit {
      color: #fff;
      background-color: #ec652b;
    }
  }
}
.mask {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.15s linear;
  &.show {
    background-color: rgba(0, 0, 0, 0.5);
  }
  &.hide {
    display: none;
  }
}
/* 字体图标 */
@font-face {
  font-family: "HM-FD-font";
  src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=");
}
.iconfont {
  font-family: "HM-FD-font" !important;
  font-size: 13px;
  font-style: normal;
  color: #757575;
  &.triangle {
    &:before {
      content: "\e65a";
    }
  }
  &.selected {
    &:before {
      content: "\e607";
    }
  }
}
</style>
