<template>
  <div class="outer-layer manage-group-deps-page">
    <div class="root">
      <ZPaging
        ref="zPaging"
        :show-scrollbar="false"
        :use-virtual-list="true"
        :virtual-list-col="5"
        :auto="false"
        :refresher-enabled="false"
        :loading-more-enabled="false"
      >
        <template #top>
          <customNavbar :title="$t('pageTitle.view.deps')"></customNavbar>
        </template>
        <div class="group-deps-list">
          <div
            class="group-deps-list-each"
            v-for="item in groupParams.groupInfo.deptInfos"
            :key="item.dept_id"
          >
            <span>{{ item.dept_name }}</span>
          </div>
        </div>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import settingFormItem from '../components/settingFormItem.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, reactive } from 'vue'

import { useGroupStore } from '@/store'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const groupStore = useGroupStore()
const groupParams = reactive({
  groupInfo: computed(() => groupStore.groupInfo),
})

const state = reactive({})

onLoad((options) => {
  console.log(options)
})

onMounted(() => {
  console.log(groupParams.groupInfo.deptInfos)
})
</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;
}
.group-deps-list {
  margin: 20rpx 32rpx;
  background-color: #fff;
  .group-deps-list-each {
    padding: 34rpx 32rpx;
    border-bottom: 1px solid $theme-border-color;
    span {
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      line-height: 40rpx;
    }
  }
}
</style>
