<template>
  <view class="px-base" v-if="detail">
    <CuNavbar title="加班审核">
      <template v-if="!isEdit" #right>
        <uv-icon color="white" @click="open" name="more-dot-fill"></uv-icon>
      </template>
    </CuNavbar>
    <view class="mt-30rpx card-shadow bg-white rounded-19rpx px-base text-[#333333] text-27rpx">
      <view class="py-20rpx flex items-center justify-between">
        <view>申请人</view>
        <view class="text-hex-999999">{{ detail.employee.name }}</view>
      </view>
      <uv-line></uv-line>
      <view class="py-20rpx flex items-center justify-between">
        <view>所属门店</view>
        <view class="text-hex-999999">{{ detail.store.title }}</view>
      </view>
      <uv-line></uv-line>
      <view class="py-20rpx flex items-center justify-between">
        <view>电话号码</view>
        <view class="text-hex-999999">{{ detail.employee.phone }}</view>
      </view>
      <uv-line></uv-line>
      <view class="py-20rpx flex items-center justify-between">
        <view>申请时间</view>
        <view class="text-hex-999999">{{ timeFormat(detail.created_at, "yyyy-mm-dd hh:MM") }}</view>
      </view>
      <uv-line></uv-line>
      <view class="py-20rpx flex items-center justify-between">
        <view>加班日期</view>
        <view class="text-hex-999999">{{ timeFormat(detail.date, "yyyy-mm-dd") }}</view>
      </view>
      <view class="py-20rpx flex items-center justify-between">
        <view>开始时间</view>
        <view class="text-hex-999999">{{ timeFormat(detail.start_at, "yyyy-mm-dd hh:MM").substring(10) }}</view>
      </view>
      <view class="py-20rpx flex items-center justify-between">
        <view>结束时间</view>
        <view class="text-hex-999999">{{ timeFormat(detail.end_at, "yyyy-mm-dd hh:MM").substring(10) }}</view>
      </view>
      <uv-line></uv-line>
      <view class="py-20rpx">
        <view>加班原因</view>
        <view class="text-hex-999999 mt-20rpx">{{ detail.reason }}</view>
      </view>
    </view>
    <view class="h-100rpx">
      <view class="fixed bottom-0 left-0 right-0 h-120rpx bg-white flex items-center px-base space-x-30rpx">
        <view class="flex-1">
          <uv-button color="#999999" shape="circle" plain block> 拒绝 </uv-button>
        </view>
        <view class="flex-1">
          <uv-button type="primary" shape="circle" block> 通过 </uv-button>
        </view>
      </view>
    </view>
    <uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-picker>
    <uv-modal ref="modalRef" title="提示" content="确定删除吗?" @confirm="onSubmit" :showCancelButton="true"></uv-modal>
  </view>
</template>
<script setup>
import CuNavbar from "@/components/cu-navbar/index"
import { http } from "@/utils/request"
import { onLoad } from "@dcloudio/uni-app"
import { ref } from "vue"
import { timeFormat } from "@climblee/uv-ui/libs/function/index"
const modalRef = ref(null)
const columns = [["修改", "删除"]]
const detail = ref()
const pickerRef = ref(null)
const id = ref(0)
const open = () => {
  pickerRef.value.open()
}
const confirmPicker = e => {
  console.log(e)
  if (e.value[0] === "删除") {
    modalRef.value.open()
  } else {
    uni.navigateTo({
      url: `/pages/overtime/create?id=${id.value}`
    })
  }
}
const onSubmit = async () => {
  try {
    await http.request({
      url: `/hr/overtimes/${id.value}`,
      method: "DELETE",
      header: {
        Accept: "application/json"
      }
    })
    uni.showToast({
      title: "删除成功",
      icon: "none"
    })
    uni.navigateBack()
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
onLoad(options => {
  id.value = options.id
  http
    .request({
      url: `/hr/overtimes/${options.id}`,
      method: "GET",
      header: {
        Accept: "application/json"
      }
    })
    .then(res => {
      detail.value = res
    })
})
</script>
