<template>
  <view>
    <CuNavbar title="员工管理">
      <template #right>
        <text @click="goPage('/pages/user/update')" class="text-white"
          >添加</text
        >
      </template>
    </CuNavbar>
    <StoreDropDown></StoreDropDown>

    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
      <view class="mt-15rpx px-base">
        <!-- <uv-swipe-action> -->
        <view class="space-y-15rpx">
          <view
            class="rounded-19rpx card p-0 overflow-hidden"
            v-for="(item, i) in list"
            :key="i"
            @click="goPage(`/pages/user/detail?id=${item.id}`)"
          >
            <!-- <uv-swipe-action-item :options="options"> -->
            <view class="flex rounded-19rpx box-content card">
              <view class="rounded-4rpx w-100rpx h-100rpx">
                <image class="w-full h-full" :src="item.avatar"></image>
              </view>
              <view
                class="flex-1 ml-20rpx flex flex-col justify-between py-10rpx"
              >
                <view class="flex items-center text-sm">
                  <view>{{ item.name }}</view>
                  <template v-if="item.jobs">
                    <uv-tags
                      v-for="job in item.jobs"
                      class="ml-20rpx"
                      :text="job.name"
                      :key="job.id"
                      plain
                      size="mini"
                      type="primary"
                    ></uv-tags>
                  </template>
                </view>
                <view class="flex justify-between">
                  <view class="text-28rpx text-hex-999 text-xs">{{
                    item.phone
                  }}</view>
                  <view v-if="item.store">{{ item.store.address }}</view>
                </view>
              </view>
            </view>
            <!-- </uv-swipe-action-item> -->
          </view>
        </view>
        <!-- </uv-swipe-action> -->
      </view>
    </mescroll-body>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { http } from '@/utils/request'
import { computed, reactive, ref } from 'vue'
import StoreDropDown from '@/pages/home/components/store-drop-down/index.vue'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js'
import { onShow } from '@dcloudio/uni-app'
const { mescrollInit, downCallback, getMescroll } = useMescroll(
  onPageScroll,
  onReachBottom
)
const firstloading = ref(true)
const list = ref([])
const options = [
  {
    text: '删除',
    style: {
      backgroundColor: '#f56c6c',
    },
  },
  {
    text: '修改',
    style: {
      backgroundColor: '#3c9cff',
    },
  },
  {
    text: '离职',
    style: {
      backgroundColor: '#f9ae3d',
    },
  },
]

onShow(() => {
  if (!firstloading.value) {
    getMescroll().resetUpScroll()
  }
})

const upCallback = async (mescroll) => {
  const { size, num } = mescroll

  try {
    const resData = await http.get('/hr/employee', {
      params: {
        per_page: size,
        page: num,
      },
    })
    const curPageData = resData.data || []
    if (num === 1) list.value = []
    list.value = list.value.concat(curPageData)
    mescroll.endSuccess(curPageData.length)
  } catch (error) {
    console.log(error)
    mescroll.endErr() // 请求失败, 结束加载
  } finally {
    firstloading.value = false
  }
}

const goPage = (url) => {
  uni.navigateTo({
    url,
  })
}
</script>
