<template>
  <van-popup
    v-model="dialogVisible"
    class="org-mobile__selector"
    position="right"
    :style="{ width: '100%', height: '100%' }"
    get-container="body"
    @cancel="handleDialogClose"
    @close="handleDialogClose"
    @click-overlay="handleDialogClose"
    @open="handleOpen"
  >
    <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">
      <OrgSelectorMobileDropDown
        v-show="!searchWord"
        ref="userSelectorMobileDropDown"
        :search-word="searchWord"
        @load-org="() => $emit('search', searchWord)"
      />
    </template>
    <template v-if="vanLoading">
      <van-loading class="van-Loading" />
    </template>
    <template v-else>
      <div class="pullRefresh">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-if="data && data.length > 0"
            v-model="isLoading"
            class="org-data__list"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
          >
            <template v-for="item in data">
              <div v-if="updateShow" :key="item.id" class="user-data__div">
                <van-checkbox
                  :name="item[primaryFieldProp]"
                  :shape="single ? 'round' : 'square'"
                  :class="[
                    selectItemsMap.get(item[primaryFieldProp]) &&
                    selectItemsMap.get(item[primaryFieldProp]).selectFlag
                      ? 'van-checkbox__icon--checked'
                      : '',
                  ]"
                  @click="rowClick(item, null, $event)"
                ></van-checkbox>
                <div class="org-list__container">
                  <div class="org-list__container_border">
                    <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="
                        isRangeFilter
                          ? rowClick(item, null, $event)
                          : loadLeaf(item)
                      "
                    >
                      <div class="selector-detail__name">
                        <div class="selector-detail__name_filter">
                          <label
                            v-html="
                              brightenKeyword(item[selectLabel], searchWord)
                            "
                          ></label>
                          <template
                            v-if="
                              item.subOrgNumber &&
                              item.subOrgNumber > 0 &&
                              filterType != 'policy' &&
                              !isRangeFilter
                            "
                          >
                            <!--    v-if="
                          selectItemsMap.get(item.id) &&
                            selectItemsMap.get(item.id).selectCount &&
                            selectItemsMap.get(item.id).selectCount > 0
                        " -->
                            <!-- <span
                            v-if="sleectNum(item).length > 0 && !searchWord"
                            class="common-color-blue"
                          >
                            {{ sleectNum(item).length }}||| ({{
                              sleectNum(item).length > item.subOrgNumber
                                ? item.subOrgNumber
                                : sleectNum(item).length
                            }}/{{ item.subOrgNumber }})
                          </span> -->
                            <span
                              v-if="
                                selectItemsMap.get(item[primaryFieldProp]) &&
                                selectItemsMap.get(item[primaryFieldProp])
                                  .selectCount &&
                                selectItemsMap.get(item[primaryFieldProp])
                                  .selectCount > 0 &&
                                !searchWord
                              "
                              class="common-color-blue"
                            >
                              ({{
                                selectItemsMap.get(item[primaryFieldProp])
                                  .selectCount
                              }}/{{ item.subOrgNumber }})
                            </span>
                            <template v-else>
                              <span v-if="!searchWord" class="ads">
                                (

                                <span
                                  v-html="
                                    brightenKeyword(
                                      item.subOrgNumber,
                                      searchWord
                                    )
                                  "
                                ></span>

                                )
                              </span>
                            </template>
                          </template>
                          <span
                            v-if="
                              (item.subOrgNumber &&
                                item.subOrgNumber > 0 &&
                                (filterType == 'policy' || isRangeFilter)) ||
                              searchWord
                            "
                          >
                            (
                            <span
                              v-html="brightenKeyword(item.code, searchWord)"
                            ></span>
                            )
                          </span>

                          <span v-if="item.subOrgNumber == 0 && !searchWord">
                            <template v-if="!isRangeFilter">(0)</template>
                            <template v-else>
                              <span>
                                (
                                <span
                                  v-html="
                                    brightenKeyword(item.code, searchWord)
                                  "
                                ></span>
                                )
                              </span>
                            </template>
                          </span>
                        </div>
                        <div v-if="item.pathName" class="selector-detail__desc">
                          <span
                            style="margin-left: 0"
                            v-html="
                              brightenKeyword(item['pathName'], searchWord)
                            "
                          ></span>
                        </div>
                      </div>

                      <div
                        v-if="
                          filterType == 'org' && !searchWord && !isRangeFilter
                        "
                        class="arrow"
                      >
                        <ht-icon name="select" scale="1.1" :rotate="270" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <!-- </van-checkbox-group> -->
          </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="select-dialog"
        :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="popupSelectListOrgSelectorMobileDialog"
          class="user-data__list"
        >
          <div
            v-for="item in popupSelectList"
            :key="item.id"
            class="dimension-data__list"
          >
            <div class="org-list__container border-bottom__line">
              <div class="org-icon">
                <ht-icon name="org-tree" color="#409eff" />
              </div>
              <div class="selector-item__detail">
                <div class="selector-detail__name">
                  <label
                    v-html="
                      brightenKeyword(item[selectLabel], selectSearchWord)
                    "
                  ></label>

                  <span v-if="item.code">
                    (
                    <span
                      v-html="brightenKeyword(item.code, selectSearchWord)"
                    ></span>
                    )
                  </span>
                </div>
              </div>
              <van-icon
                name="clear"
                color="#bfbfbf"
                class="cell-close"
                @click="removeSelectOrg(item)"
              />
            </div>
          </div>
        </div>
        <div v-else class="list-selector__nodata">
          <el-image :src="noDataImg"></el-image>
          <span>暂未选择组织</span>
        </div>
      </van-popup>
      <!-- 已选组织popup e-->
    </template>
  </van-popup>
</template>
<script>
  import { debounce } from 'lodash'
  import styles from '@/styles/index.scss'
  import Locale from '@/mixins/locale'
  import OrgSelectorMobileDropDown from './OrgSelectorMobileDropDown.vue'
  import popupMode from '@/mixins/popupMode.js'

  export default {
    name: 'OrgSelectorMobileDialog',
    mixins: [Locale, popupMode('dialogVisible', 'selectDialogVisible')],
    components: {
      OrgSelectorMobileDropDown,
    },
    props: {
      range: Object,
      filterType: String,
      searchPlaceholder: {
        type: String,
        default: '搜索',
      },
      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,

        updateShow: false,
        selectDialogVisible: false,
        selectSearchWord: '',

        selectItemsMap: new Map(),
        orgListChildCache: {
          //id:[]
        },

        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
      },
    },
    watch: {
      data: {
        handler(val) {
          // val.forEach((it) => {
          //   if (it.dataType == 'org') {
          //     it[this.primaryFieldProp] = it.id
          //   }
          // })
        },
        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
          }
        }
      },
      selectItemsMap: {
        handler(val) {
          this.updateShow = false
          this.updateShow = 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('popupSelectListOrgSelectorMobileDialog')
                .scrollTo({
                  top: 0,
                })
            })
          }
        },
      },
    },
    methods: {
      //是否选中的子人员
      sleectNum(item) {
        let num = []

        const obj = Array.from(this.selectItemsMap).reduce(
          (obj, [key, value]) => Object.assign(obj, { [key]: value }),
          {}
        )

        for (let i in obj) {
          let path = obj[i].path.split('.')

          path.forEach((i) => {
            if (i == item.id) {
              num.push(obj[i])
            }
          })
          // if (path.includes()) {
          //   num.push(obj[i])
          // }
        }

        return num
        // this.selectItemsMap
      },
      // 已选择列表中删除已选择人员
      removeSelectOrg(item) {
        // let index = this.popupSelectList.find((k) => {
        //   return k.id == item.id
        // })
        let index = null
        this.popupSelectList.forEach((k, i) => {
          if (k.id == item.id) {
            index = i
          }
        })
        this.popupSelectList.splice(index, 1)
        this.unSelectItem(item, 'single')
      },
      // 清空已选择人员
      emptySelect() {
        this.popupSelectList = []
        this.selectItemsMap = new Map()
        this.selectDialogVisible = false
      },
      onSearchInput: debounce(function () {
        this.onRefresh()
      }, 500),
      onRefresh() {
        this.isloading = true
        this.$emit('search', this.searchWord)
      },
      reset() {
        this.$emit('reset')
      },
      handleOpen() {
        // this.dialogInstance.$emit('load-org', this.data[0])
      },
      loadMore() {
        if (this.data && this.data.length > 0) {
          this.$emit('page-change', ++this.pagination.page)
        } else {
          this.isLoading = false
        }
      },
      // 获取查询参数中的分页信息(不传page时默认查询第一页)
      getPageBean(page, pageSize) {
        const pageBean = { ...this.pagination }
        delete pageBean['total']
        pageBean.page = page || 1
        pageSize ? (pageBean.pageSize = pageSize) : ''
        return pageBean
      },
      showMaxLimitDialog(fn) {
        this.$dialog
          .alert({
            title: '提示',
            message: `您最多只能选择${this.maxLimit}个组织`,
            confirmButtonText: '我知道了',
            confirmButtonColor: '#409EFF',
          })
          .then(() => {
            // on close
            fn && fn()
          })
      },
      loadLeaf(item) {
        if (!this.isRangeFilter && !this.searchWord) {
          this.dialogInstance.$emit(
            'load-org-withdemension',
            {
              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()
        }
        setTimeout(() => {
          this.vanLoading = false
        }, 300)
        this.dialogVisible = true
      },
      // 打开弹窗时，初始化空数据
      initEmptyData() {
        this.selectItemsMap = new Map()
        this.orgListChildCache = {}
      },
      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()
      },
      select(selection, row) {
        this.$emit('select', selection, row)
      },

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

      // 计算选中多少下级
      handleSelectCount() {
        this.selectItemsMap.forEach((item) => {
          if (
            item.subOrgNumber &&
            item.subOrgNumber > 0 &&
            this.orgListChildCache[item[this.primaryFieldProp]]
          ) {
            let selectCount = 0
            this.orgListChildCache[item[this.primaryFieldProp]].forEach(
              (it) => {
                if (
                  it[this.primaryFieldProp] != item[this.primaryFieldProp] &&
                  this.selectItemsMap.has(it[this.primaryFieldProp])
                ) {
                  selectCount += 1
                }
              }
            )

            this.selectItemsMap.set(item[this.primaryFieldProp], {
              ...item,
              selectCount,
            })
          }
        })
      },

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

        this.popupSelectList = result
      },

      async getOrgList(item) {
        if (this.orgListChildCache[item[this.primaryFieldProp]]) {
          return { rows: this.orgListChildCache[item[this.primaryFieldProp]] }
        }
        const query = {
          property: 'path_',
          value: item.path,
          group: 'main',
          operation: 'RIGHT_LIKE',
          relation: 'AND',
        }
        let queryFilter = {
          pageBean: this.getPageBean(null, -1),
          querys: [
            {
              property: 'showStatus',
              value: '1',
              group: 'main2',
              operation: 'EQUAL',
              relation: 'AND',
            },
          ],
        }

        queryFilter.querys.push(query)
        const res = await this.$requestConfig.getOrgList(queryFilter)

        this.orgListChildCache[item[this.primaryFieldProp]] = res.rows
        return res
      },
      /**
       *
       * @param {*} item
       * @param {*} type  has? 替换：push
       */
      //选中
      selectItem(item, type) {
        let items = []
        let dataList = new Map()
        Array.isArray(item) ? (items = item) : items.push(item)

        items.forEach((it) => {
          this.selectItemsMap.set(it[this.primaryFieldProp], {
            ...it,
            ...{
              selectFlag: true,
            },
          })
        })

        this.selectItemsMap = new Map(this.selectItemsMap)
      },

      //选择
      async onSelectItem(item) {
        if (this.single) {
          this.selectItemsMap.clear()
          this.selectItem(item)
          // //没有子组织
          // if (item.subOrgNumber == 0) {
          //   this.selectItemsMap.clear()
          //   this.selectItem(item)
          // } else {
          //   this.showMaxLimitDialog()
          // }
        } /*多选*/ else {
          if (
            this.selectItemsMap.size + item.subOrgNumber + 1 >
            this.maxLimit
          ) {
            this.showMaxLimitDialog()

            return
          }

          this.selectItem(item)

          // 当类型为组织时 获取子组织并选中
          if (!this.searchWord) {
            if (
              this.filterType == 'org' &&
              item.subOrgNumber &&
              item.subOrgNumber > 0 &&
              !this.isRangeFilter
            ) {
              const { rows } = await this.getOrgList(item)
              rows && rows.length > 0 && this.selectItem(rows)
            }
          }
        }
        this.handleSelectCount()
        this.$forceUpdate()
      },
      //取消选择
      unSelectItem(item, type) {
        if (this.single || type == 'single') {
          //单选

          //取消选择
          this.selectItemsMap.delete(item[this.primaryFieldProp])
        } /*多选*/ else {
          //取消选择
          this.selectItemsMap.delete(item[this.primaryFieldProp])
          //取消子组织
          if (
            this.filterType == 'org' &&
            item.subOrgNumber &&
            item.subOrgNumber > 0 &&
            !this.isRangeFilter
          ) {
            this.orgListChildCache[item[this.primaryFieldProp]] &&
              this.orgListChildCache[item[this.primaryFieldProp]].forEach(
                (it) => {
                  this.selectItemsMap.has(it[this.primaryFieldProp]) &&
                    this.selectItemsMap.delete(it[this.primaryFieldProp])
                }
              )
          }
        }
        this.handleSelectCount()
        this.$forceUpdate()
      },

      rowClick(row, column, event) {
        !this.selectItemsMap.has(row[this.primaryFieldProp])
          ? this.onSelectItem(row)
          : this.unSelectItem(row)

        this.$emit('row-click', row, column, event)
      },
      // 按照指定策略加载数据
      loadUserWithPolicy(policy) {
        //1-我的主部门 2-我的主部门及下属部门
        if (['1', '2'].includes(policy)) {
          this.getMasterOrg()
        }
        this.loadCurrentUserOrgs()
          .then(() => {
            const param = this.getOrgIdWithPolicy(policy)
            this.$emit('load-policy-org', param)
          })
          .catch(() => {
            /*  this.$message.error(
              '未获取到当前用户的部门信息，无法按照该策略加载数据。'
            ) */
            const param = { data: 'noCurrentPolicy' }
            this.$emit('load-policy-org', 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>
  .org-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;
      }
    }
    .pullRefresh {
      flex: 1;
      overflow-y: auto; //设置这个 才能指定高度
      ::v-deep {
        .van-pull-refresh {
          min-height: 100%;
        }
      }
    }
    .org-mobile__title {
      font-size: 18px;
      color: #1a1a1a;
    }
    .org-mobile__close {
      float: right;
    }
    .org-demensions__container {
      padding: 0 12px;
    }
    .org-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;
      }
    }
    .org-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);
      }
    }
    .org-list__container {
      position: relative;
      display: flex;
      align-items: center;
      flex: 1;
      .selector-item__detail {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        flex: 1;

        .selector-detail__name {
          max-width: 240px;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          // word-wrap: break-word;
          // word-break: break-all;
          .selector-detail__name_filter {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 240px;
          }

          label {
            color: #111;
            font-size: 14px;
          }
          span {
            // margin-left: 10px;
            color: #777;
            font-size: 12px;
          }
          .common-color-blue {
            color: $base-color-blue;
          }
        }

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

          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: calc(100% - 24px);
        align-items: center;
        padding: 12px 0;
        .arrow {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 36px;
          width: 36px;
          text-align: center;
          line-height: 36px;
        }
      }
      .cell-close {
        font-size: 14px;
      }
    }
    .user-data__div {
      display: flex;
      min-height: 56px;
    }
    .org-data__list {
      min-height: 400px;

      ::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;
      }
    }
  }
  .select-dialog {
    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;
    }
  }

  .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>
