<template>
  <van-popup
    v-model="dialogVisible"
    class="post-mobile__selector"
    position="right"
    :style="{ width: '100%', height: '100%' }"
    get-container="body"
    @cancel="handleDialogClose"
    @close="handleDialogClose"
    @click-overlay="handleDialogClose"
  >
    <van-nav-bar :title="title" left-arrow @click-left="handleDialogClose" />

    <van-search
      v-model="searchWord"
      shape="round"
      placeholder="搜索"
      @input="onSearchInput"
      @clear="reset"
    >
      <template #left-icon>
        <ht-icon name="search1" width="22" height="22" fill="#8C8C8C" />
      </template>
    </van-search>

    <template v-if="!isRangeFilter">
      <PostSelectorMobileDropDown
        v-show="!searchWord"
        ref="userSelectorMobileDropDown"
        :search-word="searchWord"
        @load-org="() => $emit('search', searchWord)"
      />
    </template>

    <div class="space"></div>
    <template v-if="vanLoading">
      <van-loading class="van-Loading" />
    </template>
    <template v-else>
      <div class="pullRefresh">
        <van-pull-refresh
          v-model="isLoading"
          pull-distance="80"
          @refresh="onRefresh(1)"
        >
          <van-list
            v-if="data && data.length > 0"
            v-model="isLoading"
            class="post-data__list"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
          >
            <template v-for="item in data">
              <div
                :key="item['id']"
                class="user-data__div"
                :class="!checkBoxShow(item) ? 'user-data__div_padding' : ''"
              >
                <van-checkbox
                  v-if="checkBoxShow(item)"
                  :key="item.id"
                  :name="item[primaryFieldProp]"
                  :shape="single ? 'round' : 'square'"
                  :class="getCheckedItemState(item)"
                  @click="rowClick(item, null, $event)"
                ></van-checkbox>
                <div class="post-list__container">
                  <div class="post-list__container_border">
                    <template v-if="item.dataType == 'org'">
                      <div
                        class="org-icon"
                        @click="rowClick(item, null, $event)"
                      >
                        <ht-icon name="org-tree" color="#409eff" />
                      </div>
                      <div
                        class="selector-item__detail selector-item__detail--org"
                        @click.stop="loadLeaf(item)"
                      >
                        <div class="selector-detail__name">
                          <label
                            v-html="
                              brightenKeyword(item[selectLabel], searchWord)
                            "
                          ></label>

                          <template>
                            <span
                              v-if="
                                orgListChildCache[item[primaryFieldProp]] &&
                                orgListChildCache[item[primaryFieldProp]]
                                  .selectCount &&
                                orgListChildCache[item[primaryFieldProp]]
                                  .selectCount > 0
                              "
                              style="color: #409eff"
                            >
                              ({{
                                orgListChildCache[item[primaryFieldProp]]
                                  .selectCount
                              }}/{{ item.postNumber }})
                            </span>
                            <span v-else>({{ item['postNumber'] }})</span>
                          </template>
                        </div>

                        <div class="arrow">
                          <ht-icon name="select" scale="1.1" :rotate="270" />
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <div class="org-icon">
                        <ht-icon name="mobilePost" color="#409eff" />
                      </div>
                      <div
                        class="post-list_item"
                        @click.stop="
                          () => {
                            return
                          }
                        "
                      >
                        <div class="post-list_item_topline">
                          <!-- <label>{{ item[selectLabel] }}</label>
                    ({{ item.code }}) -->
                          <label
                            v-html="
                              brightenKeyword(item[selectLabel], searchWord)
                            "
                          ></label>
                          <span>
                            (
                            <span
                              class="spaceSpan"
                              v-html="brightenKeyword(item.code, searchWord)"
                            ></span>
                            )
                          </span>
                        </div>
                        <div class="post-list_item_bottom">
                          <ht-icon name="org-tree" color="#8C8C8C" />

                          <span
                            v-if="item.orgName"
                            v-html="
                              brightenKeyword(item['orgName'], searchWord)
                            "
                          ></span>
                          <template v-else>'暂无岗位'</template>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </van-list>
          <template v-if="!data || data.length === 0">
            <div class="list-selector__nodata">
              <el-image :src="noDataImg"></el-image>
              <span>暂无数据</span>
            </div>
          </template>
        </van-pull-refresh>
      </div>

      <!-- 已选岗位 s-->
      <div class="dialog-footer">
        <div class="txt">
          <div class="center" @click="selectDialogVisible = true">
            已选岗位
            <span>{{ selectItemsMap.size }}/{{ maxLimit }}</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>
      <!-- 已选岗位 s-->
      <!-- 已选岗位popup s-->
      <van-popup
        v-model="selectDialogVisible"
        round
        position="bottom"
        class="selectDialog"
        :style="{ height: '78vh', width: '100vw' }"
      >
        <div class="head">
          <div class="close" @click="selectDialogVisible = false">关闭</div>
          <div class="title">
            已选岗位
            <span>{{ selectItemsMap.size }}/{{ maxLimit }}</span>
          </div>
          <div class="empty" @click="emptySelect">清空</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="popupSelectList.length"
          id="selectDialogVisiblePostSelectorMobileDropDown"
          class="user-data__list"
        >
          <div v-for="item in popupSelectList" :key="item.id">
            <div class="post-list__container border-bottom__line">
              <div class="org-icon">
                <ht-icon name="mobilePost" color="#409eff" />
              </div>
              <div class="post-list_item">
                <div class="post-list_item_topline">
                  <label
                    v-html="
                      brightenKeyword(item[selectLabel], selectSearchWord)
                    "
                  ></label>
                  <span v-if="item.code">
                    (
                    <span
                      v-html="brightenKeyword(item.code, selectSearchWord)"
                    ></span>
                    )
                  </span>
                </div>
                <div v-if="item.orgName" class="post-list_item_bottom">
                  <ht-icon name="org-tree" color="#8C8C8C" />
                  {{ item.orgName }}
                </div>
              </div>
              <van-icon
                name="clear"
                color="#bfbfbf"
                class="cell-close"
                @click="removeSelectUser(item)"
              />
            </div>
          </div>
        </div>
        <div v-else class="list-selector__nodata">
          <el-image :src="noDataImg"></el-image>
          <span>暂未选择岗位</span>
        </div>
      </van-popup>
    </template>
    <!-- 已选岗位popup e-->
  </van-popup>
</template>
<script>
  import { debounce } from 'lodash'
  import styles from '@/styles/index.scss'
  import Locale from '@/mixins/locale'
  import PostSelectorMobileDropDown from './PostSelectorMobileDropDown.vue'
  import popupMode from '@/mixins/popupMode.js'

  export default {
    name: 'PostSelectorMobileDialog',
    components: {
      PostSelectorMobileDropDown,
    },
    mixins: [Locale, popupMode('dialogVisible', 'selectDialogVisible')],
    props: {
      range: Object,
      filterType: String,
      searchPlaceholder: {
        type: String,
        default: '名称、编码、路径',
      },
      quickSearchProps: {
        type: String,
        required: true,
      },
      value: {
        type: Array,
        default: () => {
          return []
        },
      },
      selectorsCache: {
        type: Array,
        default: () => {
          return []
        },
      },
      single: {
        type: Boolean,
        default: false,
      },
      data: {
        type: Array,
        default: () => {
          return []
        },
      },
      pagination: {
        type: Object,
        default: () => {
          return {
            page: 1,
            pageSize: 50,
            total: 0,
          }
        },
      },
      selectLabel: {
        type: String,
        default: 'fullname',
      },
      appendToBody: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '选岗位',
      },
      primaryField: {
        type: String,
        default: '',
      },
      currentPolicyId: {
        type: String,
        default: '',
      },
    },
    inject: ['dialogInstance'],
    data() {
      return {
        noDataImg: require('@/assets/no-data.png'),
        dialogVisible: false,
        isLoading: false,
        vanLoading: false,
        finished: false,
        searchWord: null,
        selectIds: [],
        selectedData: [],
        currentUserOrgs: [],
        masterOrgInfo: null,

        selectDialogVisible: false,
        selectSearchWord: '',

        selectItemsMap: new Map(),
        orgListChildCache: {
          //id:[]
        },
        orgListChildCacheClone: {},
        popupSelectList: [],
      }
    },
    computed: {
      isRangeFilter() {
        return this.range && this.range.type
      },
      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.primaryField ? this.primaryField : 'id'
      },
      maxLimit() {
        return this.single ? 1 : 100
      },
      // 获取当前节点的选中状态
      getCheckedItemState() {
        return function (node, type = false) {
          if (type) {
            return '1'
          }
          //非组织节点
          if (node.dataType != 'org') {
            if (!this.selectItemsMap.has(node[this.primaryFieldProp])) {
              return ''
            }
            if (
              this.selectItemsMap.get(node[this.primaryFieldProp]).selectFlag
            ) {
              return 'van-checkbox__icon--checked'
            }
            return ''
          }
          // 判断当前组织是否被选中时

          //组织节点
          if (!this.orgListChildCache[node[this.primaryFieldProp]]) {
            return ''
          }
          const { item, selectCount } =
            this.orgListChildCache[node[this.primaryFieldProp]]

          if (
            item.postNumber > 0 &&
            selectCount &&
            selectCount === item.postNumber
          ) {
            return 'van-checkbox__icon--checked'
          }
          //半选中
          // if (
          //   item.postNumber > 0 &&
          //   selectCount > 0 &&
          //   selectCount < item.postNumber
          // ) {
          //   return 'van-checkbox__icon--indeterminate'
          // }

          return ''
        }
      },
    },
    watch: {
      data: {
        handler(val) {
          if (this.filterType == 'org') {
            val.forEach((it) => {
              if (!this.orgListChildCache[it[this.primaryFieldProp]]) {
                this.$set(this.orgListChildCache, it[this.primaryFieldProp], {
                  item: it,
                  selectCount: 0,
                  rows: [],
                })
              }
            })
          }
          this.handleSelectCount()
          this.$forceUpdate()
        },
        immediate: true,
        deep: true,
      },
      pagination: {
        handler(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
            }
          }
        },
        immediate: true,
        deep: true,
      },
      currentPolicyId: {
        handler(val) {
          if (val) {
            this.loadUserWithPolicy(val)
          }
        },
        immediate: true,
      },
      selectSearchWord: {
        handler() {
          this.handlePopupSelectList()
        },
      },
      selectDialogVisible: {
        handler(val) {
          val && this.handlePopupSelectList()

          if (val && this.popupSelectList.length > 0) {
            this.$nextTick(() => {
              document
                .getElementById('selectDialogVisiblePostSelectorMobileDropDown')
                .scrollTo({
                  top: 0,
                })
            })
          }
        },
      },
    },
    methods: {
      checkBoxShow(item) {
        return !this.single || (item.dataType != 'org' && this.single)
      },
      // 打开弹窗时，初始化空数据
      initEmptyData() {
        this.selectItemsMap = new Map()
        this.orgListChildCache = {}
      },
      // 已选择列表中删除已选择人员
      removeSelectUser(item) {
        let index = null
        this.popupSelectList.forEach((k, i) => {
          if (k[this.primaryFieldProp] == item[this.primaryFieldProp]) {
            index = i
          }
        })
        this.popupSelectList.splice(index, 1)
        this.unSelectItem(item)
      },
      // 清空已选择人员
      emptySelect() {
        this.popupSelectList.forEach((row) => {
          this.removeSelectUser(row)
        })
        this.orgListChildCache = {}
        this.popupSelectList = []
        this.selectItemsMap = new Map()
        this.selectDialogVisible = false
      },
      onSearchInput: debounce(function () {
        this.onRefresh()
      }, 800),
      onRefresh(type) {
        if (type) {
          this.isLoading = true
        }

        if (this.searchWord) {
          this.$emit('search', this.searchWord)
        } else {
          // 如果是策略的需要调用策略方法
          if (this.filterType == 'policy' && !this.isRangeFilter) {
            this.$refs.userSelectorMobileDropDown.loadUserWithPolicy()
          } else {
            this.$emit('search', this.searchWord)
          }
        }

        setTimeout(() => {
          this.isLoading = false
        }, 3000)
      },
      reset() {
        setTimeout(() => {
          this.$emit('reset')
        }, 300)
      },
      loadMore() {
        if (this.data && this.data.length > 0) {
          this.$emit('page-change', ++this.pagination.page)
        } else {
          this.isLoading = false
        }
      },

      // 获取查询参数中的分页信息(不传page时默认查询第一页)
      getPageBean(page, size) {
        const pageBean = { ...this.pagination }
        delete pageBean['total']
        pageBean.page = page || 1
        size ? (pageBean.pageSize = size) : ''
        return pageBean
      },

      showMaxLimitDialog(fn) {
        this.$dialog
          .alert({
            title: '提示',
            message: `您最多只能选择${this.maxLimit}个岗位`,
            confirmButtonText: '我知道了',
            confirmButtonColor: '#409EFF',
          })
          .then(() => {
            // on close
            fn && fn()
          })
      },

      loadLeaf(item) {
        this.dialogInstance.$emit(
          'load-post-byorganddemension',
          {
            demId: item.demId,
            parentId: item.id,
            page: 1,
          },
          () => {
            this.$refs.userSelectorMobileDropDown &&
              this.$refs.userSelectorMobileDropDown.addMiniNavList({
                demId: item.demId,
                parentId: item.id,
                name: item.name,
              })
          }
        )
      },
      //初始化选中数据
      initSelectItemsMap(value = this.selectorsCache, type) {
        this.selectItem(value, type)
      },
      showDialog() {
        this.vanLoading = true
        if (this.value && this.value.length > 0) {
          this.selectIds = this.value.map((item) => item[this.primaryFieldProp])

          this.selectedData = this.value
          this.initSelectItemsMap(this.selectedData, 'replace')
        } else {
          this.initEmptyData()
        }
        this.dialogVisible = true
        this.orgListChildCacheClone = _.cloneDeep(this.orgListChildCache)
        setTimeout(() => {
          this.vanLoading = false
        }, 300)
      },

      handleDialogSure() {
        this.$emit('input', this.getSelectedData())
        this.$emit('select-data', this.getSelectedData())

        //  this.selectItemsMap.clear()

        this.selectIds = []
        this.selectedData = []
        this.dialogVisible = false
      },
      handleDialogClose() {
        this.dialogVisible = false
        this.selectIds = []
        this.selectedData = []
        this.selectItemsMap.clear()
        this.orgListChildCache = this.orgListChildCacheClone
      },
      select(selection, row) {
        this.$emit('select', selection, row)
      },

      //获取所有选中数据
      getSelectedData() {
        let result = []
        this.selectItemsMap.forEach((item) => result.push(item))
        return result
      },

      // 计算选中多少下级
      handleSelectCount() {
        Object.keys(this.orgListChildCache).forEach((id) => {
          const { item, rows } = this.orgListChildCache[id]

          if (item && item.postNumber) {
            let selectCount = 0
            if (rows.length > 0) {
              rows.forEach((it) => {
                if (
                  it[this.primaryFieldProp] != id &&
                  this.selectItemsMap.has(it[this.primaryFieldProp])
                ) {
                  selectCount += 1
                }
              })
            } else {
              this.selectItemsMap.forEach((it) => {
                if (
                  it.path &&
                  it.path.includes(this.orgListChildCache[id].item.path)
                ) {
                  selectCount += 1
                }
              })
            }
            this.$set(this.orgListChildCache, id, {
              ...this.orgListChildCache[id],
              ...{
                selectCount,
              },
            })
          }
        })
      },

      //弹框list
      handlePopupSelectList() {
        let result = []
        this.selectItemsMap.forEach((item) => {
          if (this.selectSearchWord) {
            if (
              item[this.selectLabel].includes(this.selectSearchWord) ||
              item.code.includes(this.selectSearchWord)
            ) {
              result.push(item)
            }
          } else {
            result.push(item)
          }
        })

        this.popupSelectList = result
      },
      // 获取下级数据
      async getPostList(item) {
        if (
          this.orgListChildCache[item[this.primaryFieldProp]] &&
          this.orgListChildCache[item[this.primaryFieldProp]].rows &&
          this.orgListChildCache[item[this.primaryFieldProp]].rows.length
        ) {
          return this.orgListChildCache[item[this.primaryFieldProp]]
        }
        const query = {
          property: 'path_',
          value: item.path,
          group: 'main',
          operation: 'RIGHT_LIKE',
          relation: 'AND',
        }
        let queryFilter = {
          pageBean: this.getPageBean('', -1),
          querys: [
            {
              property: 'p.show_status_',
              value: '1',
              group: 'main2',
              operation: 'EQUAL',
              relation: 'AND',
            },
          ],
        }
        queryFilter.querys.push(query)
        const { rows } = await this.$requestConfig.getPostList(queryFilter)
        let res = {
          item,
          rows,
          selectCount:
            (this.orgListChildCache &&
              this.orgListChildCache[item[this.primaryFieldProp]] &&
              this.orgListChildCache[item[this.primaryFieldProp]]
                .selectCount) ||
            0,
        }
        this.orgListChildCache[item[this.primaryFieldProp]] = res
        return res
      },

      //选中
      selectItem(item, type) {
        let items = []
        let dataList = new Map()
        Array.isArray(item) ? (items = item) : items.push(item)

        items.forEach((it) => {
          if (it.dataType != 'org') {
            this.selectItemsMap.set(it[this.primaryFieldProp], {
              ...it,
              ...{
                selectFlag: true,
              },
            })
          }
        })
        // 主动触发map数据更新 否则双向绑定不会触发
        this.selectItemsMap = new Map(this.selectItemsMap)
      },

      //选择
      async onSelectItem(item) {
        if (this.single) {
          //没有子组织
          if (!item.postNumber || item.postNumber == 0) {
            this.selectItemsMap.clear()
            this.selectItem(item)
          } else {
            this.showMaxLimitDialog()
          }
        } /*多选*/ else {
          if (item.dataType == 'org' && item.postNumber == 0) {
            this.$dialog.alert({
              title: '提示',
              message: `该组织下没有岗位了`,
              confirmButtonText: '我知道了',
              confirmButtonColor: '#409EFF',
            })

            return
          }

          if (
            this.selectItemsMap.size +
              (item.postNumber ? item.postNumber : 0) +
              1 >
            this.maxLimit
          ) {
            this.showMaxLimitDialog()

            return
          }
          //没有子组织
          //获取子组织并选中
          if (item.postNumber && item.postNumber > 0 && !this.isRangeFilter) {
            const { rows } = await this.getPostList(item)

            rows && rows.length > 0 && this.selectItem(rows)
          } else {
            this.selectItem(item)
          }
        }
        this.handleSelectCount()
        this.$forceUpdate()
      },
      //取消选择
      unSelectItem(item) {
        if (this.single) {
          //单选

          //取消选择
          this.selectItemsMap.delete(item[this.primaryFieldProp])
        } /*多选*/ else {
          //取消选择
          this.selectItemsMap.delete(item[this.primaryFieldProp])
          //取消子组织
          if (item.postNumber && item.postNumber > 0 && !this.isRangeFilter) {
            this.orgListChildCache[item[this.primaryFieldProp]] &&
              this.orgListChildCache[item[this.primaryFieldProp]].rows &&
              this.orgListChildCache[item[this.primaryFieldProp]].rows.forEach(
                (it) => {
                  this.selectItemsMap.has(it[this.primaryFieldProp]) &&
                    this.selectItemsMap.delete(it[this.primaryFieldProp])
                }
              )
          }
        }
        this.handleSelectCount()
        // 主动触发map数据更新 否则双向绑定不会触发
        this.selectItemsMap = new Map(this.selectItemsMap)
        this.$forceUpdate()
      },

      rowClick(row, column, event) {
        if (row.dataType != 'org') {
          !this.selectItemsMap.has(row[this.primaryFieldProp])
            ? this.onSelectItem(row)
            : this.unSelectItem(row)
        } else {
          console.log(
            'this.getCheckedItemState(row): ',
            this.getCheckedItemState(row)
          )

          // 选中的是组织时 判断当前组织是否被选中
          if (this.getCheckedItemState(row) == 'van-checkbox__icon--checked') {
            this.unSelectItem(row)
          } else {
            this.onSelectItem(row)
          }
        }
        this.$emit('row-click', row, column, event)
      },
      // 按照指定策略加载数据
      loadUserWithPolicy(policy = this.currentPolicyId) {
        let that = this

        //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 = ''
          })
          .finally(() => {
            that.isLoading = false
          })
      },
      // 根据策略构建不同的查询参数
      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) => {
          this.isLoading = false
          if (res.state && res.value) {
            this.masterOrgInfo = res.value
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .post-mobile__selector {
    display: flex;
    flex-direction: column;
    padding-bottom: 64px;
    box-sizing: border-box;
    ::v-deep {
      .van-tab--active {
        font-weight: bold;
        color: $base-color-blue;
      }

      .van-nav-bar .van-icon {
        color: var(--van-gray-6);
      }
      .van-search__content {
        border-radius: 8px 8px 8px 8px;
        padding-left: 5px;
      }
    }

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

    .pullRefresh {
      flex: 1;
      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_border {
      display: flex;
      flex: 1;
      align-items: center;
      &::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 0px;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
    .post-list__container {
      position: relative;
      display: flex;
      align-items: center;
      flex: 1;
      .selector-item__detail {
        display: flex;
        flex-direction: column;
        margin-left: 8px;
        flex: 1;

        .selector-detail__name {
          max-width: 225px;
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          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;
          }
        }
      }

      .selector-item__detail--org {
        display: flex;
        flex-direction: row !important;
        justify-content: space-between;
        flex: 1;
        height: 100%;
        align-items: center;
        .arrow {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 36px;
          width: 36px;
          text-align: center;
          line-height: 36px;
        }
      }
      .post-list_item {
        margin-left: 8px;

        flex: 1;
        .post-list_item_topline {
          font-size: 12px;
          color: #8c8c8c;
          label {
            color: #212121;
            font-size: 14px;
          }
        }
        .post-list_item_bottom {
          color: #8c8c8c;
          padding-top: 4px;
          font-size: 12px;
          line-height: 12px;
          vertical-align: middle;
          // margin-left: 3px;
        }
        .spaceSpan {
          margin: 0;
        }
      }
    }
    .user-data__div {
      display: flex;
      min-height: 56px;
      .post-list_item,
      .post-list_item > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .user-data__div_padding {
      padding-left: 16px;
    }
    .post-data__list {
      min-height: 400px;
      .post-list_item {
        max-width: 260px;
      }
      ::v-deep {
        .van-checkbox {
          position: relative;
          padding: 10px 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;
          }
        }
      }
    }
    .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 {
    display: flex;
    flex-direction: column;
    .head {
      display: flex;
      height: 44px;
      justify-content: space-between;
      align-items: center;
      .close {
        display: block;
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 14px;
        color: #8c8c8c;
      }
      .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;
        }
      }
      .empty {
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 14px;
        color: $base-color-blue;
      }
    }

    .border-bottom__line {
      position: relative;
      padding: 10px 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);
      }
    }
    .user-data__list {
      flex: 1;
      overflow-y: auto;
      .post-list_item,
      .post-list_item > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .cell-close {
      font-size: 14px;
    }
  }
  .org-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;

    background: rgba(64, 158, 255, 0.16);
    border-radius: 50%;
    text-align: center;
    // margin-left: 12px;
  }
  ::v-deep .changColor {
    color: $base-color-blue;
  }
  .list-selector__nodata {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .el-image {
      width: 80%;
      margin-top: 20px;
    }
    span {
      color: #909399;
      font-size: 12px;
    }
  }
  .van-Loading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
  }
</style>
