<template>
  <div v-cloak class="post-mobile__selector">
    <div class="miniNav" :class="page ? 'PageminiNav' : ''">
      <div
        class="miniNav__item"
        :class="miniNavList.length == 0 ? 'noClick' : ''"
        @click="handleClickMinNavZero()"
      >
        <span class="miniNav__item--text">下拉树</span>
        <ht-icon
          v-if="miniNavList.length > 0"
          class="miniNav__item--icon"
          name="select"
          :rotate="270"
        />
      </div>

      <div
        v-for="(item, idx) in miniNavList"
        v-if="miniNavList.length > 0"
        :key="item.key"
        class="miniNav__item"
        :class="idx == miniNavList.length - 1 ? 'noClick' : ''"
        @click="handleClickMinNavItem(item, idx)"
      >
        <span class="miniNav__item--text">{{ item.value }}</span>
        <ht-icon
          v-if="idx < miniNavList.length - 1"
          class="miniNav__item--icon"
          name="select"
          :rotate="270"
        />
      </div>
    </div>

    <div class="space"></div>

    <div
      v-if="showDataList"
      :class="page ? 'PagepullRefresh' : 'pullRefresh'"
      class="post-data_content"
    >
      <div class="post-data__list">
        <van-checkbox-group
          v-if="dataListMap && dataListMap.length > 0"
          ref="checkboxGroup"
          v-model="selectIds"
          :max="limitCount"
        >
          <van-checkbox
            v-for="item in dataListMap"
            :key="item.key"
            :name="item[primaryFieldProp]"
            :shape="multiple == 1 ? 'square' : 'round'"
            :disabled="limitDisabled(item)"
            @click="rowClick(item, null, $event)"
          >
            <div class="post-list__container">
              <div class="selector-item__detail">
                <div class="selector-detail__name">
                  <label>{{ item['value'] }}</label>
                </div>

                <template v-if="treeDataMode !== 1">
                  <div
                    v-if="item.children && item.children.length"
                    class="arrow"
                    @click.stop="handleClickArrow(item, dataListMap)"
                  >
                    <ht-icon name="select" scale="1.1" :rotate="270" />
                  </div>
                </template>

                <template v-else>
                  <div
                    v-if="item.showArrow"
                    class="arrow"
                    @click.stop="handleClickArrow(item, dataList)"
                  >
                    <ht-icon name="select" scale="1.1" :rotate="270" />
                  </div>
                </template>
              </div>
            </div>
          </van-checkbox>
        </van-checkbox-group>
        <van-empty
          v-else
          class="custom-image"
          :image="noDataImage"
          description="暂无数据"
        />
      </div>
    </div>

    <!-- 已选 s-->
    <div v-if="!page" class="dialog-footer">
      <div class="txt">
        <div class="center" @click="selectDialogVisible = true">
          已选
          <span>{{ selectIds.length }}</span>
          <ht-icon name="select" scale="1.1" :rotate="180" />
        </div>
      </div>
      <van-button
        class="mobile-btn"
        block
        round
        size="normal"
        type="info"
        @click="handleDialogSure"
      >
        确 定
      </van-button>
    </div>
    <div v-else class="foot_button">
      <van-button
        class="mobile-btn"
        block
        round
        size="normal"
        type="default"
        @click="clearClick"
      >
        重 置
      </van-button>
      <van-button
        class="mobile-btn"
        block
        round
        size="normal"
        type="info"
        @click="handleSure"
      >
        确 定
      </van-button>
    </div>
    <!-- 已选popup s-->
    <van-popup
      v-model="selectDialogVisible"
      round
      :close-on-click-overlay="false"
      position="bottom"
      class="selectDialog"
      :style="{ maxHeight: '80%', minHeight: '50%', width: '100vw' }"
    >
      <div class="head">
        <div class="close" @click="selectDialogVisible = false">关闭</div>
        <div class="title">
          已选
          <span>{{ selectIds.length }}</span>
        </div>
        <div class="close clear " @click="clearClick()">
          清空
        </div>
      </div>
      <van-search
        v-model="selectSearchWord"
        shape="round"
        placeholder="搜索"
        @input="onSearchInput"
        @clear="selectSearchWord = ''"
        @cancel="selectSearchWord = ''"
      >
        <template #left-icon>
          <ht-icon name="search1" width="22" height="22" fill="#8C8C8C" />
        </template>
      </van-search>

      <div v-if="selectList.length > 0" class="user-data__list">
        <div
          v-for="item in selectList"
          :key="item.id"
          class="dimension-data__list"
        >
          <div class="post-list__container border-bottom__line">
            <div class="selector-item__detail">
              <div class="selector-detail__name">
                <label>{{ item[selectLabel] }}</label>
              </div>

              <!-- <div class="selector-detail__desc">
                <span :title="item.pathName">
                  {{ item.pathName || '无' }}
                </span>
              </div> -->
            </div>
            <van-icon
              name="clear"
              size="16px"
              color="#BFBFBF"
              @click="clearItem(item)"
            />
          </div>
        </div>
      </div>
      <van-empty
        v-else
        class="custom-image"
        :image="noDataImage"
        description="暂无数据"
      />
    </van-popup>
    <!-- 已选popup e-->
  </div>
</template>

<script>
  import { debounce } from 'lodash'
  import styles from '@/styles/index.scss'
  import Locale from '@/mixins/locale'
  import popupMode from '@/mixins/popupMode.js'

  export default {
    name: 'SelectTreeMobilePage',
    components: {},
    mixins: [Locale, popupMode('dialogVisible', 'selectDialogVisible')],
    props: {
      ganged: {
        type: Object,
        default: () => {
          return {
            labelBind: 'value',
            valueBind: 'key',
          }
        },
      },
      searchPlaceholder: {
        type: String,
        default: '名称、编码、路径',
      },
      value: {
        type: Array,
        default: () => {
          return []
        },
      },

      // single: {
      //   type: Number,
      //   default: -1,
      // },
      data: {
        type: Array,
        default: () => {
          return []
        },
      },

      pagination: {
        type: Object,
        default: () => {
          return {
            page: 1,
            pageSize: 50,
            total: 0,
          }
        },
      },
      valueCustomData: {},
      selectLabel: {
        type: String,
        default: 'name',
      },
      appendToBody: {
        type: Boolean,
        default: false,
      },
      page: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '请选择',
      },
      primaryField: {
        type: String,
        default: '',
      },
      currentPolicyId: {
        type: String,
        default: '',
      },
      multiple: {
        type: Boolean,
        default: false,
      },
      cloneList: {
        default: () => {
          return []
        },
      },
      isSubtableBackfill: {
        type: Boolean,
        default: false,
      },
      limitCount: Number,
      treeDataMode: {
        //数据展示
        type: Number,
        default: 0,
      },
      displayfield: {
        //  displayfield.id,
        //     displayfield.pid,
        //     displayfield.pvalue
        type: String,
        require: true,
        default: () => {
          return JSON.stringify({
            id: 'key',
          })
        },
      },
    },
    data() {
      return {
        noDataImage: require('@/assets/no_data_list.png'),
        dialogVisible: false,
        isLoading: false,
        finished: false,
        searchWord: null,
        selectIds: [],
        selectedData: [],
        currentUserOrgs: [],
        masterOrgInfo: null,

        selectDialogVisible: false,
        selectSearchWord: '',

        dropdownValue: null,
        // selectItem: null,
        // actionModel: false,

        flattenDataList: [],
        showDataList: true,
        dataList: [],
        dataListMap: [],
        dataListDeep: [],

        // selectActions: [],
        deepData: [],
        miniNavList: [],
        // minNavActionModel: false,
        // miniNavSelectActions: [],
        miniNavActiveIdx: null,
      }
    },
    computed: {
      primaryColor() {
        return styles.primary_color
      },
      sureButtonText() {
        const selectedText =
          this.selectIds.length > 0 ? `(${this.selectIds.length})` : ''
        return `${this.$t('ht.common.confirm')}${selectedText}`
      },
      primaryFieldProp: function() {
        // return this.ganged.valueBind
        return this.primaryField ? this.primaryField : 'value'
      },

      selectList() {
        // let dataList = this.flattenDataList.filter((item) =>

        this.cloneList.forEach((item) => {
          if (item.value) {
            item.name = item.value
          }
        })

        let dataList = this.cloneList.filter((item) =>
          this.selectSearchWord
            ? this.selectIds.includes(item[this.primaryFieldProp]) &&
              item[this.selectLabel].includes(this.selectSearchWord)
            : this.selectIds.includes(item[this.primaryFieldProp])
        )

        let map = new Map()
        for (let item of dataList) {
          map.set(item[this.displaylist.id], item)
        }

        return [...map.values()]
      },
      limitDisabled() {
        return function(item) {
          if (!this.multiple) {
            let check = this.selectIds.includes(item.key)
            return (
              !check &&
              (this.selectIds || []).length >= this.limitCount &&
              this.limitCount > 0
            )
          } else {
            return false
          }
        }
      },
      displaylist() {
        return JSON.parse(this.displayfield)
      },
    },
    watch: {
      valueCustomData: {
        handler(val) {
          if (val) {
            this.selectIds = val.split(',')

            this.$forceUpdate()
          }
        },
        immediate: true,
        deep: true,
      },
      pagination: function(newVal, oldVal) {
        this.isLoading = false
        if (newVal !== oldVal) {
          const { page, pageSize, total } = newVal
          if (page > 0 && pageSize > 0 && total > 0) {
            this.finished = page * pageSize >= total
          } else {
            this.finished = true
          }
        }
      },
      data: {
        handler(val) {
          if (val) {
            this.deepData = _.cloneDeep(val)

            this.dataList = val.slice()

            // this.dataList = val.map((item) => item)

            this.flattenDataList = this.flattenArray(val)

            if (this.valueCustomData) {
              this.selectIds = this.valueCustomData.split(',')
            }
          }
        },
        immediate: true,
        deep: true,
      },

      dataList: {
        handler(val) {
          let map = new Map()
          for (let item of val) {
            map.set(item[this.displaylist.id], item)
          }
          this.dataListMap = [...map.values()]
        },
        immediate: true,
        deep: true,
      },
      selectIds: {
        handler(val) {},
        immediate: true,
        deep: true,
      },
      currentPolicyId: {
        handler(val) {
          if (val) {
            this.loadUserWithPolicy(val)
          }
        },
        immediate: true,
      },
    },

    mounted() {
      this.showDialog()
    },
    methods: {
      onCancelSelectHandle() {},
      // handleActionSelect(item) {
      //   // this.selectItem = item

      //   if (!this.selectIds.includes(item[this.primaryFieldProp])) {
      //     this.selectIds.push(item[this.primaryFieldProp])
      //     this.rowClick(item)
      //   }
      // },

      // handleToggleSelect(val) {
      //   // this.dropdownValue = val
      //   this.actionModel = !this.actionModel
      // },
      clearItem(item) {
        this.selectedData = this.selectedData.filter((val) => {
          return item[this.primaryFieldProp] != val[this.primaryFieldProp]
        })
        this.selectIds = this.selectIds.filter((val) => {
          return item[this.primaryFieldProp] != val
        })
      },
      flattenArray(arrList, list) {
        let flatArr = []
        function flatten(list) {
          list.forEach((item) => {
            let it = {
              key: item.key,
              value: item.value,
              name: item.value,
              ...item,
            }

            flatArr.push(it)
            if (item.children && item.children.length) {
              flatten(item.children)
            }
          })
        }
        flatten(arrList)

        return flatArr
      },
      handleClickArrow(item, data) {
        let map = new Map()
        for (let itemMap of data) {
          map.set(itemMap[this.displaylist.id], itemMap)
        }
        data = [...map.values()]

        this.dataListDeep = _.cloneDeep(this.dataList)
        if (this.treeDataMode === 1) {
          if (item.hasOwnProperty('children')) {
            console.log(
              'his.cloneList.hasOwnPrope',
              item.hasOwnProperty('children')
            )

            this.dataList = item.children.slice()

            this.miniNavList.push({
              ...item,
              data: data,
            })
          } else {
            this.showDataList = false

            //创建vant loading加载
            const toast = this.$toast.loading({
              duration: 0, // 持续展示 toast
              forbidClick: true,
            })

            this.$emit('upDateList', item, (res) => {
              if (res && res.length > 0) {
                this.$nextTick(() => {
                  setTimeout(() => {
                    this.dataList = res.slice()
                    this.showDataList = true
                    toast.clear() //清除加载效果
                  }, 0)
                })

                this.miniNavList.push({
                  ...item,
                  data: res,
                })
              } else {
                this.$nextTick(() => {
                  setTimeout(() => {
                    this.dataListDeep.forEach((itemDep) => {
                      if (
                        itemDep[this.displaylist.id] ==
                        item[this.displaylist.id]
                      ) {
                        itemDep.showArrow = false
                      }
                    })
                    this.dataList = this.dataListDeep
                    this.showDataList = true
                    toast.clear() //清除加载效果
                  }, 0)
                })
              }
            })
          }
        } else {
          this.dataList = item.children.slice()

          this.miniNavList.push({
            ...item,
            data: data,
          })
        }
      },
      handleClickMinNavZero() {
        this.miniNavList = []
        this.miniNavActiveIdx = null

        this.dataList = this.deepData
      },
      handleClickMinNavItem(item, idx) {
        if (idx == this.miniNavList.length - 1) {
          return
        }

        // this.minNavActionModel = !this.minNavActionModel

        this.miniNavList = this.miniNavList.slice(0, idx + 1)
        this.miniNavActiveIdx = idx
        // this.miniNavSelectActions = item.data.map((it) => {
        //   return { ...it, name: it.value, data: item.data }
        // })

        this.handleMinNavActionSelect(item)
      },

      handleMinNavActionSelect(item) {
        let map = new Map()

        this.cloneList.forEach((itemCol) => {
          if (
            itemCol[this.displaylist.id] === item[this.displaylist.id] &&
            itemCol.children
          ) {
            item.children = itemCol.children
          }
        })

        // this.selectItem = item

        // this.dataList = item.data.slice()

        if (this.miniNavActiveIdx != null && this.miniNavActiveIdx >= 0) {
          this.miniNavList = this.miniNavList.slice(
            0,
            this.miniNavActiveIdx + 1
          )
        }
        // item.children 全部 data逐级
        this.dataList = item.children
          ? item.children.slice()
          : item.data
          ? item.data.slice()
          : []
      },

      onSearchInput: debounce(function() {
        this.onRefresh()
      }, 800),
      onRefresh() {
        this.isloading = true
        this.$emit('search', this.searchWord)
      },
      reset() {
        this.$emit('reset')
      },
      loadMore() {
        if (this.data && this.data.length > 0) {
          this.$emit('page-change', ++this.pagination.page)
        } else {
          this.isLoading = false
        }
      },
      showDialog(val) {
        this.selectIds = []
        this.selectedData = []
        if (val && val.length > 0) {
          this.cloneList.forEach((item) =>
            val.forEach((valItem) => {
              if (item[this.primaryFieldProp] == valItem) {
                this.selectIds.push(item[this.primaryFieldProp])
                this.selectedData.push(item[this.primaryFieldProp])
              }
              // if (item[this.ganged.valueBind] == valItem) {
              //   this.selectIds.push(item[this.ganged.labelBind])
              //   this.selectedData.push(item[this.ganged.labelBind])
              // }
            })
          )
        }
      },
      clearClick(type) {
        this.selectIds = []
        this.selectedData = []
        this.selectDialogVisible = false
      },
      handleDialogSure() {
        let selectName = this.selectList.map((item) => item.key)
        let list = []

        if (selectName) {
          this.cloneList.forEach((item) => {
            this.selectList.forEach((val) => {
              if (item.key == val[this.ganged.valueBind]) {
                list.push(item)
              }
            })
          })
        }

        this.$emit('dataList', list)
        this.$emit('input', selectName.join(','))
        this.$emit('select-data', selectName.join(','))

        this.selectIds = []
        this.selectedData = []
        if (!this.isSubtableBackfill) {
          this.$emit('closePopup', false)
        }
      },
      handleSure() {
        let selectName = this.selectList.map((item) => item.key)
        let list = []

        if (selectName) {
          this.cloneList.forEach((item) => {
            this.selectList.forEach((val) => {
              if (item.key == val[this.ganged.valueBind]) {
                list.push(item)
              }
            })
          })
        }

        this.$emit('dataList', list)
        this.$emit('input', selectName.join(','))
        this.$emit('select-data', selectName.join(','))
        if (list.length > 0) {
          this.$emit('combiTreeClick', ...list, true)
        } else {
          this.$emit('combiTreeClick', {}, true)
        }

        // this.selectIds = []
        // this.selectedData = []
      },
      handleDialogClose() {
        this.selectIds = []
        this.selectedData = []
      },
      select(selection, row) {
        this.$emit('select', selection, row)
      },
      rowClick(item) {
        if (!this.multiple != 1) {
          this.selectedData = this.cloneList.filter((items) =>
            this.selectIds.includes(items[this.primaryFieldProp])
          )
        } else {
          // 单选
          this.selectIds = [item[this.primaryFieldProp]]
          this.selectedData = [item]
          // if (!this.multiple) {
          //   this.selectIds = [item.value]
          // }
          // this.selectedData = this.dataList.filter((item) =>
          //   this.selectIds.includes(item[this.primaryFieldProp])
          // )
        }

        // this.selectItem = {
        //   ...item,
        //   name: item.value,
        // }
      },
      // 按照指定策略加载数据
      loadUserWithPolicy(policy) {
        //1-我的主部门 2-我的主部门及下属部门
        if (['1', '2'].includes(policy)) {
          this.getMasterOrg()
        }
        this.loadCurrentUserOrgs()
          .then(() => {
            const param = this.getOrgIdWithPolicy(policy)
            this.$emit('load-policy-post', param)
          })
          .catch(() => {
            /*  this.$message.error(
              '未获取到当前用户的部门信息，无法按照该策略加载数据。'
            ) */
            const param = { data: 'noCurrentPolicy' }
            this.$emit('load-policy-post', param)
            this.currentPolicy = ''
          })
      },
      // 根据策略构建不同的查询参数
      getOrgIdWithPolicy(policy) {
        let result = { type: policy }
        const masterOrg = this.currentUserOrgs.find((org) => org.isMaster == 1)
        switch (policy) {
          case '1':
            result.id = this.masterOrgInfo
              ? this.masterOrgInfo.id
              : masterOrg
              ? masterOrg.id
              : null
            break
          case '2':
            result.path = this.masterOrgInfo
              ? this.masterOrgInfo.path
              : masterOrg
              ? masterOrg.path
              : null
            break
          case '3':
            result.ids = this.currentUserOrgs.map((org) => org.id)
            break
          case '4':
            result.paths = this.currentUserOrgs.map((org) => org.path)
            break
        }
        return result
      },
      // 获取当前用户所属部门数据
      loadCurrentUserOrgs() {
        return new Promise((resolve, reject) => {
          if (this.currentUserOrgs && this.currentUserOrgs.length > 0) {
            resolve()
          } else if (
            this.$requestConfig.getUserId() &&
            this.$requestConfig.getOrgListByUserId
          ) {
            this.$requestConfig
              .getOrgListByUserId(this.$requestConfig.getUserId())
              .then((orgs) => {
                if (orgs && orgs.constructor == Array && orgs.length > 0) {
                  this.currentUserOrgs = orgs
                  resolve()
                } else {
                  reject()
                }
              })
              .catch(() => reject())
          } else {
            reject()
          }
        })
      },
      //获取默认维度下的岗位
      getMasterOrg() {
        this.$requestConfig.getMasterOrgByDefaultDimension().then((res) => {
          if (res.state && res.value) {
            this.masterOrgInfo = res.value
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .post-mobile__selector {
    height: calc(100% - 110px);
    ::v-deep {
      .van-tab--active {
        font-weight: bold;
        color: $base-color-blue;
      }

      .van-nav-bar .van-icon {
        color: var(--van-gray-6);
      }
    }

    .space {
      display: block;
      clear: both;
      height: 6px;
      background: #f6f6f6;
    }

    .selectFilter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 32px;
      margin: 8px 16px;
      padding: 0 8px;
      padding-left: 16px;
      line-height: 32px;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      border: 1px solid #e6e6e6;
    }

    .miniNav {
      display: flex;
      height: 44px;
      margin: 0 16px;
      justify-content: flex-start;
      align-items: center;
      white-space: nowrap;
      overflow-x: auto;
      .noClick {
        .miniNav__item--text {
          font-size: 14px;
          color: #262626 !important;
        }
      }
      &__item {
        display: flex;
        align-items: center;
        &--text {
          font-size: 14px;
          color: #409eff;
        }

        &--icon {
          margin: 0 8px;
        }
      }
    }
    .PageminiNav {
      margin: 0;
    }

    .pullRefresh {
      height: 80vh;
      overflow-y: scroll; //设置这个 才能指定高度
    }

    .post-mobile__title {
      font-size: 18px;
      color: #1a1a1a;
    }
    .post-mobile__close {
      float: right;
    }
    .post-demensions__container {
      padding: 0 12px;
    }
    .post-demensions__group {
      margin-right: 6px;
      color: #999999;
      max-width: 72px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &::before {
        border-width: 0;
      }

      &.current {
        color: $base-color-blue;
      }

      &.current::before {
        border-width: 1px;
      }
    }
    .post-list__container {
      display: flex;
      align-items: center;

      .selector-item__detail {
        display: flex;
        flex-direction: row;

        line-height: normal;
        margin-left: 10px;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        .arrow {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 40px;
          box-sizing: border-box;
          padding: 10px 0 10px 20px;
        }
        .selector-detail__name {
          max-width: 270px;
          padding: 12px 0;
          font-size: 14px;

          label {
            color: #111;
            font-size: 14px;
          }
          span {
            margin-left: 10px;
            color: #777;
            font-size: 12px;
          }
        }

        .selector-detail__desc {
          margin-top: 5px;

          span {
            display: inline-block;
            font-size: 12px;
            color: #777;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .post-data_content {
      height: calc(100% - 64px);
      margin-bottom: 64px;
    }
    .post-data__list {
      min-height: 100px;
      ::v-deep {
        .van-checkbox {
          position: relative;
          padding: 0 16px;
          ::after {
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            right: 0;
            bottom: 0;
            left: 16px;
            border-bottom: 1px solid #ebedf0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
          }

          .van-checkbox__label {
            margin-left: 0;
            flex: 1;
          }
        }
      }
    }
    .PagepullRefresh {
      .post-data__list {
        ::v-deep {
          .van-checkbox {
            padding: 0;
          }
        }
      }
    }
    .van-action-sheet__cancel {
      padding: 5px;
      background: $base-color-blue;
      color: $base-color-white;
    }
  }

  .dialog-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    padding: 0 16px;
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
    .mobile-btn {
      width: 110px;
      height: 44px;
      line-height: 44px;
      border-radius: 10px;
      box-sizing: border-box;
      background: #409eff;
      border-color: #409eff;
      padding: 0 24px;
    }
    .txt {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 44px;
      font-size: 14px;
      color: #262626;
      text-align: center;
      .center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 44px;
        padding: 0 16px;
      }
      span {
        color: #409eff;
        margin: 0 6px;
      }
    }
  }
  .selectDialog {
    .head {
      display: flex;
      height: 44px;

      .close {
        display: block;
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 14px;
        color: #8c8c8c;
        font-weight: 400;
      }
      .clear {
        color: #409eff;
      }
      .title {
        flex: 1;
        height: 44px;
        text-align: center;
        line-height: 44px;
        font-weight: bold;
        color: #1a1a1a;
        font-size: 17px;
        span {
          padding: 0 6px;
          color: #409eff;
        }
      }
    }

    .border-bottom__line {
      position: relative;
      padding: 0px 16px;
      ::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
  }
  .foot_button {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    .mobile-btn {
      width: calc(50% - 16px);
      height: 44px;
      line-height: 44px;
      border-radius: 10px;
      box-sizing: border-box;

      padding: 0 24px;
    }
  }
  [v-cloak] {
    display: none !important;
  }
  .van-loading {
    position: relative;
    width: 100vh;
    height: 100vh;
    z-index: 2;
  }
</style>
