<template>
  <view class="p-base">
    <CuNavbar title="员工详情">
      <template #right>
        <uv-icon color="white" @click="open" name="more-dot-fill"></uv-icon>
      </template>
    </CuNavbar>
    <view class="mt-20rpx card-shadow px-base text-14px">
      <view class="flex justify-between items-center min-h-88rpx">
        <view class="text-hex-999">头像</view>
        <view class="w-80rpx h-80rpx rounded-full overflow-hidden">
          <image class="w-full h-full" :src="detail.avatar"></image>
        </view>
      </view>
      <uv-line color="#f5f5f5"></uv-line>
      <view class="flex justify-between items-center min-h-88rpx">
        <view class="text-hex-999">姓名</view>
        <view class="">{{ detail.name }}</view>
      </view>
      <uv-line color="#f5f5f5"></uv-line>
      <view class="flex justify-between items-center min-h-88rpx">
        <view class="text-hex-999">手机号</view>
        <view class="">{{ detail.phone }}</view>
      </view>
      <uv-line color="#f5f5f5"></uv-line>
      <view class="flex justify-between items-center min-h-88rpx">
        <view class="text-hex-999">门店</view>
        <view class="" v-if="detail.store">{{ detail.store.address }}</view>
        <view class="" v-else>无</view>
      </view>
      <uv-line color="#f5f5f5"></uv-line>
    </view>

    <uv-action-sheet
      ref="actionSheet"
      :actions="actionlist"
      @select="select"
      cancelText="取消"
    >
    </uv-action-sheet>

    <uv-modal
      ref="modalRef"
      :title="modalOptin.title"
      :content="modalOptin.content"
      @confirm="modalOptin.confirm"
      :showCancelButton="true"
    ></uv-modal>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import CuNavbar from '@/components/cu-navbar/index'
import { http } from '@/utils/request'
import { onLoad, onShow } from '@dcloudio/uni-app'
const modalRef = ref(null)
const modalOptin = reactive({
  title: '提示',
  content: '',
  confirm: () => {},
})
const actionSheet = ref(null)
const id = ref(null)
const detail = ref({})
const actionlist = ref([
  {
    name: '编辑',
    value: 'edit',
  },
  {
    name: '离职',
    value: 'quit',
  },
  {
    name: '删除',
    value: 'delete',
  },
])
onLoad((options) => {
  id.value = options.id
})

onShow(() => {
  getDetail()
})

const getDetail = () => {
  http.get(`/hr/employee/${id.value}`).then((res) => {
    detail.value = res
  })
}

const open = () => {
  actionSheet.value.open()
}
const select = (e) => {
  const { value } = e
  if (value === 'edit') {
    uni.navigateTo({
      url: `/pages/user/update?id=${id.value}`,
    })
  } else if (value === 'quit') {
    modalOptin.content = '是否确认离职该员工?'
    modalOptin.confirm = onQuick
    modalRef.value.open()
  } else if (value === 'delete') {
    modalOptin.content = '是否确认删除该员工?'
    modalOptin.confirm = onDelete
    modalRef.value.open()
  }
}
const onDelete = () => {
  http.delete(`/hr/employee/${id.value}`).then((res) => {
    uni.$emit('user:onRefresh')
    uni.showToast({
      title: '删除成功',
      duration: 2000,
      icon: 'none',
    })
    uni.navigateBack()
  })
}
const onQuick = () => {
  http.post(`/hr/employee/${id.value}/leave`).then((res) => {
    uni.showToast({
      title: '离职成功',
      duration: 2000,
      icon: 'none',
    })
    uni.$emit('user:onRefresh')
    uni.navigateBack()
  })
}
</script>
