<template>

    <view
      class="HMfilterDropdown"
      @touchmove.stop.prevent="discard"
      @tap.stop="discard"
    >
      <view class="nav">
        <block
          v-for="(item,index) in menu"
          :key="index"
        >
          <view
            class="first-menu"
            :class="{'on':showPage==index || on[index] === 1}"

            @tap="togglePage(index, false)"

            v-if="!item.isNoPull"
          >
            <text class="name">{{item.name}}</text>
            <text
              class="iconfont triangle"
              :style="'transform:rotate('+triangleDeg[index]+'deg);'"
            ></text>
          </view>
          <view
            class="first-menu"
            :class="{'on':showPage==index || on[index] === 1}"
            @tap="showAll()"
            v-else
          >
            <text class="name">{{item.name}}</text>
          </view>
        </block>
      </view>
      <view
        class="mask"
        :class="{'show':isShowMask,'hide':maskVisibility!=true}"
        @tap="togglePage(showPage)"
      ></view>
      <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'&& page.submenu.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.submenu"
                :key="index"
              >
                <view
                  class="sub-menu"
                  :id="'first_id'+index"
                  :class="{'on':activeMenuArr[page_index][0]==index}"
                  @tap="selectHierarchyMenu(page_index,index,null,null)"
                >
                  <view class="menu-name">
                    <text>{{sub.name}}</text>
                    <text class="iconfont selected"></text>
                  </view>
                </view>
              </block>
            </scroll-view>
            <block
              v-for="(sub,index) in page.submenu"
              :key="index"
            >
              <scroll-view
                class="sub-menu-list not-first"
                :scroll-y="true"
                v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
                :scroll-into-view="'second_id'+secondScrollInto"
              >
                <block
                  v-for="(sub_second,second_index) in sub.submenu"
                  :key="second_index"
                >
                  <view
                    class="sub-menu"
                    :id="'second_id'+second_index"
                    :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.name}}</text>
                      <text class="iconfont selected"></text>
                    </view>
                    <view
                      class="more-sub-menu"
                      v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"
                    >
                      <block
                        v-for="(sub2,sub2_index) in sub_second.submenu"
                        :key="sub2_index"
                      >
                        <text
                          v-if="sub_second.showAllSub || (sub2_index<8)"
                          :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
                          @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)"
                        >{{sub2.name}}</text>
                        <text
                          v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9"
                          @tap="showMoreSub(second_index)"
                        >更多<text class="iconfont triangle"></text></text>
                      </block>
                    </view>
                  </view>
                </block>
              </scroll-view>
            </block>
          </block>
          <block v-if="page.type=='filter' || page.type=='checkbox'">
            <view class="filter">
              <scroll-view
                class="menu-box"
                :scroll-y="true"
              >
                <view
                  class="box"
                  v-for="(box,box_index) in page.submenu"
                  :key="box_index"
                >
                  <view class="title">{{box.name}}</view>
                  <view class="labels">
                    <view
                      v-for="(label,label_index) in box.submenu"
                      :key="label_index"
                      @tap="selectFilterLabel(page_index, box_index, label_index)"
                      :class="{'on': label.selected}"
                    >{{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>
          <block v-if="page.type=='radio'">
            <view class="filter">
              <scroll-view
                class="menu-box"
                :scroll-y="true"
              >
                <view
                  class="box"
                  v-for="(box,box_index) in page.submenu"
                  :key="box_index"
                >
                  <view class="title">{{box.name}}</view>
                  <view class="labels">
                    <view
                      v-for="(label,label_index) in box.submenu"
                      :key="label_index"
                      @tap="selectRadioLabel(page_index,box_index,label_index)"
                      :class="{'on':label.selected}"
                    >{{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>

  </template>
  <script>

  export default {
    data () {
      return {
        subData: [], // 菜单数据
        menu: [], // 顶部横条数据
        showPage: -1, // 菜单页面显示/隐藏动画控制
        pageState: [], // 页面的状态
        activeMenuArr: [], // UI状态
        shadowActiveMenuArr: [], // 记录选中
        defaultActive: [],
        triangleDeg: [], // 小三角形的翻转动画控制
        isShowMask: false, // 遮罩层显示/隐藏动画控制
        maskVisibility: false, // 遮罩层显示/隐藏状态
        // 滚动区域定位
        firstScrollInto: 0,
        secondScrollInto: 0,
        componentTop: 0, // 组件top
        isReadNewSelect: false,
        on: [1, 0, 0, 0, 0],

        selectedData: {},

      }
    },
    props: {
      filterData: {
        value: Array,

        default: [],

      },
      defaultSelected: {
        value: Array,

        default: [],

      },
      updateMenuName: {
        value: Boolean,

        default: true,

      },
      dataFormat: {
        value: String,

        default: 'Array',
      },

    },
    watch: {
      filterData: {
        handler () {
          this.initMenu() // filterData重新赋值初始化菜单
        },

        immediate: 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))

      },

    },
    methods: {
      initMenu () {
        let tmpMenuActiveArr = []
        const tmpMenu = []
        for (let i = 0; i < this.filterData.length; i++) {
          let tmpitem = this.filterData[i]
          tmpMenu.push({
            // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
            name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name),
            type: tmpitem.type,

            isNoPull: tmpitem.isNoPull,

          })
          // 初始化选中项数组-ui状态
          tmpMenuActiveArr.push(this.processActive(tmpitem))
          // 初始化角度数组
          this.triangleDeg.push(0)
          // 初始化控制显示状态数组
          this.pageState.push(false)
          // 递归处理子菜单数据
          tmpitem = this.processSubMenu(tmpitem)
          this.filterData[i] = tmpitem
          if (tmpitem.type === 'filter') {
            for (let i = 0; i < tmpitem.length; i++) {
              this.selectedData[`${tmpitem.submenu[i].value}`] = []
            }
          }
        }
        console.log('this.selectedData', this.selectedData)
        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.filterData
      },
      // 展开更多
      showMoreSub (index) {
        this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true
        this.$forceUpdate()
      },
      // 选中

      selectHierarchyMenu (pageIndex, level1Index, level2Index, level3Index) {

        // 读取记录

        if (level1Index != null && level2Index == null && level3Index == null && this.shadowActiveMenuArr[pageIndex][0] === level1Index) {
          this.activeMenuArr.splice(pageIndex, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[pageIndex])))

        } else {

          this.activeMenuArr[pageIndex].splice(0, 1, level1Index);
          (level2Index != null || this.activeMenuArr[pageIndex].length >= 2) && (this.activeMenuArr[pageIndex].splice(1, 1, level2Index) || this.activeMenuArr[pageIndex].splice(1, 1));
          (level3Index != null || this.activeMenuArr[pageIndex].length >= 3) && (this.activeMenuArr[pageIndex].splice(2, 1, level3Index) || this.activeMenuArr[pageIndex].splice(2, 1))

        }
        // 写入结果

        if (level3Index != null || level2Index != null || (level1Index != null && this.subData[pageIndex].submenu[level1Index].submenu.length === 0)

        ) {

          // const sub = this.subData[pageIndex].submenu[level1Index].submenu[level2Index]
          this.shadowActiveMenuArr[pageIndex] = JSON.parse(JSON.stringify(this.activeMenuArr[pageIndex]))

          this.togglePage(this.showPage)
        }
      },
      // 写入结果，筛选

      setFilterData (pageIndex) {
        this.shadowActiveMenuArr[pageIndex] = JSON.parse(JSON.stringify(this.activeMenuArr[pageIndex]))

        this.togglePage(this.showPage)
      },
      // 重置结果和ui，筛选

      resetFilterData (pageIndex) {

        const tmpArr = []

        let level = this.shadowActiveMenuArr[pageIndex].length

        while (level > 0) {
          tmpArr.push([])

          const box = this.subData[pageIndex].submenu[level - 1].submenu

          for (let i = 0; i < box.length; i++) {

            this.subData[pageIndex].submenu[level - 1].submenu[i].selected = false

          }
          level--
        }

        this.activeMenuArr[pageIndex] = JSON.parse(JSON.stringify(tmpArr))

        this.$forceUpdate()
      },
      // 选中筛选类label-UI状态
      selectFilterLabel (page_index, box_index, label_index) {
        const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index)

        const data = this.filterData[page_index].submenu
        const selected = this.selectedData[`${data[box_index].value}`]
        if (findIndex > -1) {
          this.activeMenuArr[page_index][box_index].splice(findIndex, 1)
          this.subData[page_index].submenu[box_index].submenu[label_index].selected = false
          for (let i = 0; i < selected.length; i++) {
            if (selected[i] === data[box_index].submenu[label_index].value) {

              selected.splice(i, 1)
              this.selectedData[`${data[box_index].value}`] = selected

            }
          }
        } else {
          this.activeMenuArr[page_index][box_index].push(label_index)
          this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
          if (!selected) {
            this.selectedData[`${data[box_index].value}`] = []
            this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
          } else {

            console.log('---', data, this.filterData, this.selectedData)

            this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
          }
          // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index])

        }
        this.$forceUpdate()
      },
      // 选中单选类label-UI状态

      selectRadioLabel (pageIndex, boxIndex, labelIndex) {
        const activeIndex = this.activeMenuArr[pageIndex][boxIndex][0]
        if (activeIndex === labelIndex) {
          this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false
          this.activeMenuArr[pageIndex][boxIndex][0] = null

        } else {

          if (activeIndex != null && activeIndex < this.subData[pageIndex].submenu[boxIndex].submenu.length) {
            this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false

          }

          this.subData[pageIndex].submenu[boxIndex].submenu[labelIndex].selected = true
          this.activeMenuArr[pageIndex][boxIndex][0] = labelIndex

        }
        this.$forceUpdate()
      },
      // 菜单开关

      togglePage (index, isRequest = true) {
        if (!isRequest && this.maskVisibility) {
          return
        }

        if (index === this.showPage) {

          this.hidePageLayer(true, isRequest)

          this.hideMask()
          this.showPage = -1
        } else {
          if (this.showPage > -1) {

            this.hidePageLayer(false, isRequest)

          }
          this.showPageLayer(index)
          this.showMask()
        }
        if (this.on[0] === 1) {
          this.on[0] = 0
        }
        this.on[index] = 1
      },
      showAll () {
        this.on = [1, 0, 0, 0, 0]

        this.showPage = -1
        console.log('showPage-', this.showPage)

        // 输出
        this.$emit('search', {
          index: {},
          value: {},
          on: this.on,

          selectedData: this.selectedData,

        })
      },
      // hide遮罩层
      hideMask () {
        this.isShowMask = false
        setTimeout(() => {
          this.maskVisibility = false
        }, 200)
      },
      // show遮罩层
      showMask () {
        this.maskVisibility = true
        this.$nextTick(() => {
          setTimeout(() => {
            this.isShowMask = true
          }, 0)
        })
      },
      // hide菜单页

      hidePageLayer (isAnimation, isRequset = true) {

        this.triangleDeg[this.showPage] = 0
        const tmpIndex = this.showPage
        if (isAnimation) {
          setTimeout(() => {
            this.pageState.splice(tmpIndex, 1, false)

          }, 200)
          // debugger
          if (isRequset) {
            this.confirm()
          }

        } else {
          this.pageState.splice(tmpIndex, 1, false)
        }
        this.firstScrollInto = null
        this.secondScrollInto = null
      },
      confirm () {
        const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
        const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
  
        // 对结果做一下处理
        index.forEach((item, i) => {
          if (typeof (item[0]) === 'object') {
            // 针对筛选结果过一个排序
            item.forEach((s, j) => {
              if (s != null) {
                s.sort((val1, val2) => {
                  return val1 - val2
                })
                item[j] = s
                s.forEach((v, k) => {
                  value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value

                  if (this.subData[i].type === 'radio' && value[i][j][k] == null) {

                    value[i][j] = []
                    index[i][j] = []
                  }
                })
              }
            })
          } else {
            let submenu = this.subData[i].submenu[item[0]]
            value[i][0] = submenu && submenu.value
            if (value[i].length >= 2 && item[1] != null) {
              if (submenu.submenu.length > 0) {
                submenu = submenu.submenu[item[1]]
                value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null
              } else {
                value[i][1] = null
              }
              if (value[i].length >= 3 && item[2] != null) {
                if (submenu.submenu.length > 0) {
                  submenu = submenu.submenu[item[2]]
                  value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null
                } else {
                  value[i][2] = null
                }
              }
            }
          }
          index[i] = item
        })

        const params = this.selectedData
        console.log('params--1', params)
        for (const key in params) {
          if (params[key].length === 0) {
            delete params[key]
          }
        }
        // 若筛选未选择
        if (Object.getOwnPropertyNames(params).length === 1) {
          this.showAll()
        } else {
          this.$emit('search', {
            index: index,
            value: value,
            on: this.on,
            selectedData: params,
          })
        }

      },
      // show菜单页
      showPageLayer (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.filterData.length; i++) {
          let tmpitem = this.filterData[i]
          const tmpArr = this.processActive(tmpitem)
          tmpitem = this.processSubMenu(tmpitem)

          if (this.activeMenuArr[i].length !== tmpArr.length) {

            this.filterData[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.filterData
        this.$forceUpdate()
      },
      processPage (index) {
        // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
        this.reloadActiveMenuArr()
        // 重置UI控制数组
        this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])))
        if (this.menu[index].type === 'filter') {
          // 重载筛选页选中状态
          const level = this.shadowActiveMenuArr[index].length
          for (let i = 0; i < level; i++) {
            const box = this.subData[index].submenu[i].submenu
            for (let j = 0; j < box.length; j++) {
              if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
                this.subData[index].submenu[i].submenu[j].selected = true
              } else {
                this.subData[index].submenu[i].submenu[j].selected = false
              }
            }
          }
        } else if (this.menu[index].type === 'hierarchy') {
          this.$nextTick(() => {
            setTimeout(() => {
              // 滚动到选中项
              this.firstScrollInto = parseInt(this.activeMenuArr[index][0])
              this.secondScrollInto = parseInt(this.activeMenuArr[index][1])
            }, 0)
          })
        } else if (this.menu[index].type === 'radio') {
          // 重载筛选页选中状态
          const level = this.shadowActiveMenuArr[index].length
          for (let i = 0; i < level; i++) {
            const box = this.subData[index].submenu[i].submenu
            for (let j = 0; j < box.length; j++) {
              if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
                this.subData[index].submenu[i].submenu[j].selected = true
              } else {
                this.subData[index].submenu[i].submenu[j].selected = false
              }
            }
          }
        }
      },
      processActive (tmpitem) {
        const tmpArr = []
        if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
          let level = this.getMaxFloor(tmpitem.submenu)
          while (level > 0) {
            tmpArr.push(0)
            level--
          }
        } else if (tmpitem.type === 'filter') {
          let level = tmpitem.submenu.length
          while (level > 0) {
            tmpArr.push([])
            level--
          }
        } else if (tmpitem.type === 'radio') {
          let level = tmpitem.submenu.length
          while (level > 0) {
            tmpArr.push([])
            level--
          }
        }
        return tmpArr
      },
      processSubMenu (menu) {
        if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
          for (let i = 0; i < menu.submenu.length; i++) {
            menu.submenu[i] = this.processSubMenu(menu.submenu[i])
          }
        } else {
          menu.submenu = []
        }
        return menu
      },
      // 计算菜单层级
      getMaxFloor (treeData) {

        // const floor = 0

        let max = 0
        function each (data, floor) {
          data.forEach(e => {
            max = floor > max ? floor : max
            if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
              each(e.submenu, floor + 1)
            }
          })
        }
        each(treeData, 1)
  
        return max
      },
      discard () {
  

      },
    },

  }

  </script>
  <style lang="scss">

  .HMfilterDropdown {
    flex-shrink: 0;
    width: 100%;
    height: 44px;
    position: fixed;
    z-index: 997;
    flex-wrap: nowrap;
    display: flex;
    flex-direction: row;
    top: var(--window-top);
    left: 0;
    view {
      display: flex;
      flex-wrap: nowrap;
    }
  }
  .region {
    flex: 1;
    height: 44px;
  }
  .nav {
    width: 100%;
    height: 44px;
    z-index: 12;
    background-color: #ffffff;
    flex-direction: row;
    .first-menu {
      width: 100%;
      font-size: 16px;
      color: #333333;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      transition: color 0.2s linear;

      &.on {
        color: #ff6b4a;

        .iconfont {
          color: #ff6b4a;
        }
      }
      .name {
        height: 20px;
        // font-size: 16px;
        text-align: center;
        text-overflow: clip;
        overflow: hidden;
      }
      .iconfont {
        width: 13px;
        height: 13px;
        line-height: 16px;
        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: #ff6b4a;
        }
      }
    }
    &.first {
      flex-shrink: 0;
      width: 236rpx;
      background-color: #f0f0f0;
      .sub-menu {
        padding-left: 15px;

        &.on {
          background-color: #fff;
        }
      }
    }
    &.alone {
      max-height: 345px;
      min-height: 60rpx;
      height: auto;
      .sub-menu {
        min-height: calc(44px - 1rpx);
        margin-left: 15px;
        border-bottom: solid 1rpx #e5e5e5;

        &.on {
          color: #ff6b4a;

          > .menu-name {
            > .iconfont {
              display: block;
            }
          }
        }
      }
    }
    &.not-first {
      .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: #ff6b4a;
          }
        }
        &.on {
          color: #ff6b4a;
          > .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: #ff6b4a;
            }
            .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%;
        margin-top: 16px;
        flex-direction: column;
        .title {
          width: 100%;
          font-size: 13px;
          color: #888;
        }
        .labels {
          flex-direction: row;

          flex-wrap: wrap;
          justify-content: space-between;

          .on {
            border-color: #ff6b4a;
            background-color: #ff6b4a;
            color: #fff;
          }
          > view {

            width: 220rpx;

            height: 30px;
            border: solid 1rpx #adadad;
            border-radius: 2px;

            margin-right: 2px;

            margin-top: 8px;

            padding: 0 10rpx;

            box-sizing: border-box;
            font-size: 12px;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:nth-child(4n) {
              margin-right: 0;
            }
          }
        }
      }
    }
    .btn-box {
      flex-shrink: 0;
      width: 100%;
      height: 75px;
      flex-direction: row !important;
      align-items: center;
      justify-content: space-between;
      > view {
        width: 320rpx;
        height: 40px;
        border-radius: 40px;
        border: solid 1rpx #ff6b4a;
        align-items: center;
        justify-content: center;
      }
      .reset {
        color: #ff6b4a;
      }
      .submit {
        color: #fff;
        background-color: #ff6b4a;
      }
    }
  }
  .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>