<template>
  <div class="outer-layer select-members-page">
    <div class="root">
      <ZPaging
        ref="zPaging"
        :show-scrollbar="false"
        :use-virtual-list="true"
        :virtual-list-col="5"
        :refresher-enabled="false"
        :loading-more-enabled="false"
        @scroll="onScroll"
      >
        <template #top>
          <div id="topArea">
            <customNavbar :title="pageTitle"></customNavbar>
          </div>
        </template>
        <selectMemberByAlphabet
          :manageType="state.manageType"
          :isCreateDepGroup="state.isCreateDepGroup"
          ref="selectMemberByAlphabetRef"
          :selectAreaHeight="state.selectAreaHeight"
          @updateSelectedMembersNum="updateSelectedMembersNum"
        ></selectMemberByAlphabet>
        <template #bottom v-if="state.manageType !== 'searchRecord'">
          <div id="footArea">
            <customBtn
              v-if="state.manageType !== 'removeMembers'"
              :isBottom="true"
              :btnText="$t('ok')"
              @clickBtn="confirmSelectMembers"
            ></customBtn>
            <div
              class="confirm-btn-area"
              v-if="state.manageType === 'removeMembers'"
            >
              <div class="confirm-btn-area-statistic-text">
                <span class="text-[28rpx] font-medium">
                  {{
                    $t('select.member.num') +
                    '：' +
                    state.selectedMembersNum +
                    $t('statistic.unit.person')
                  }}
                </span>
              </div>
              <customBtn
                :btnText="$t('ok')"
                @clickBtn="confirmSelectMembers"
                :disabled="state.selectedMembersNum == 0 ? true : false"
              ></customBtn>
            </div>
          </div>
        </template>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import selectMemberByAlphabet from '../components/selectMemberByAlphabet.vue'
import customBtn from '@/components/custom-btn/custom-btn.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { computed, reactive, ref, onMounted, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const selectMemberByAlphabetRef = ref(null)

const zPaging = ref()
useZPaging(zPaging)

const state = reactive({
  manageType: '', //管理类型
  selectedMembersNum: 0, //当前选中数量
  isCreateDepGroup: 0, //是否是创建部门群
  selectAreaHeight: 0, //选择区域高度
})

onLoad((options) => {
  // console.log(options)
  if (options.manageType) {
    state.manageType = options.manageType
  }
  if (options.isCreateDepGroup) {
    state.isCreateDepGroup = Number(options.isCreateDepGroup)
  }
})

onMounted(() => {
  nextTick(() => {
    let selectAreaHeight = uni.getSystemInfoSync().windowHeight
    // console.log('页面高度:', uni.getSystemInfoSync().windowHeight)
    const topAreaQuery = uni.createSelectorQuery()
    topAreaQuery
      .select('#topArea')
      .boundingClientRect((res) => {
        if (res) {
          // console.log('元素高度:', res.height)
          selectAreaHeight = selectAreaHeight - res.height
        }
      })
      .exec()
    const footAreaQuery = uni.createSelectorQuery()
    footAreaQuery
      .select('#footArea')
      .boundingClientRect((res) => {
        if (res) {
          // console.log('元素高度:', res.height)
          selectAreaHeight = selectAreaHeight - res.height
        }
      })
      .exec()
    // console.log(selectAreaHeight)
    state.selectAreaHeight = selectAreaHeight + 'px'
  })
})

//页面标题
const pageTitle = computed(() => {
  let page_title = ''
  if (state.manageType === 'silence') {
    page_title = t('chat.manage.addSilenceMember')
  } else if (state.manageType === 'admin') {
    page_title = t('chat.manage.addAdmin')
  } else if (state.manageType === 'searchRecord') {
    page_title = t('search.condition.member')
  } else if (state.manageType === 'removeMembers') {
    page_title = t('select.member.remove')
  }
  return page_title
})

//确认
const confirmSelectMembers = () => {
  if (selectMemberByAlphabetRef.value) {
    selectMemberByAlphabetRef.value.confirmSelectMembers()
  }
}

//更新选中的人数
const updateSelectedMembersNum = (numChange) => {
  state.selectedMembersNum = state.selectedMembersNum + numChange
}
</script>
<style scoped lang="scss">
.outer-layer {
  flex: 1;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.confirm-btn-area {
  background-color: #fff;
  padding: 14rpx 32rpx 72rpx;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  .confirm-btn-area-statistic-text {
    margin: 18rpx 0 0;
    span {
      line-height: 40rpx;
      color: $theme-text;
    }
  }

  ::v-deep .custom-btn-class {
    padding: 18rpx 104rpx !important;
  }
  ::v-deep .is-disabled {
    background-color: #e6e6e6 !important;
    color: #bebebe !important;
  }
}
</style>
