<template>
  <view>
    <CuNavbar title="员工管理">
      <template #right>
        <text v-if="checkPermission(['admin'])" @click="goPage('/pages/user/update')" class="text-white"
          >添加</text
        >
      </template>
    </CuNavbar>
    <uv-sticky bgColor="#fff" v-if="checkPermission(['admin'])">
      <StoreDown color="#333333" @change="storeChange"></StoreDown>
    </uv-sticky>
    <MescrollApiOne
      :top="88"
      ref="mescrollItem"
      apiUrl="/hr/employee"
      :params="params"
    >
      <template v-slot="{ list }">
        <view class="space-y-15rpx p-base">
          <view v-for="(item, i) in list" :key="i">
            <Item :item="item"></Item>
          </view>
        </view>
      </template>
    </MescrollApiOne>
  </view>
</template>
<script setup>
import StoreDown from '@/pages/home/components/store-down.vue'
import { computed, ref } from 'vue'
import checkPermission from '@/utils/permission'
import CuNavbar from '@/components/cu-navbar/index'
import Item from './components/item.vue'
import MescrollApiOne from '@/components/mescroll-api/one'
import { onPageScroll, onReachBottom, onLoad } from '@dcloudio/uni-app'
import useMescrollComp from '@/uni_modules/mescroll-uni/hooks/useMescrollComp.js'
const { mescrollItem } = useMescrollComp(onPageScroll, onReachBottom)

const storeInfo = ref({})
const params = computed(()=>{
  return storeInfo.value
})

onLoad(()=>{
  uni.$on('user:onRefresh',()=>{
    onRefresh()
  })
})
const storeChange = (data) => {
  storeInfo.value = data
  onRefresh()
}
const onRefresh = () => {
  mescrollItem.value.getMescroll().resetUpScroll()
}
const goPage = (url) => {
  uni.navigateTo({
    url,
  })
}
</script>
