<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDetail } from "/@/hooks/core/useDetail";
import { useAsync } from "/@/hooks/core/useAsync";
import { useRouter } from "vue-router";
import { useUserInfo } from "/@/hooks/core/useUser";
import { usePermission } from "/@/hooks/core/usePermission";
import { httpDetail, httpUpdate } from "/@/api/interest/handover";
import { ElMessage, ElMessageBox } from "element-plus"

import {
  DefaultApprovalNode,
} from "/@/components/ApprovalNode";

import Form from "./form.vue"

const pageName = "purchPayReliveDetail";
const { hasPermissionWithCode } = usePermission(pageName);

const { push } = useRouter();

const { isSuperUser } = useUserInfo();

const { id, isDetail, title, collapses } = useDetail({
  baseName: "离职交接",
  collapseLen: 5
});

const initialData = {
  expire_date: '',
  hand_uid: '',
  resign_date: '',
  resign_uid: ''
}

const { run: detail, data } = useAsync<Record<string, string>>({
  initalData: initialData,
  success: () => {
    const { resign_date } = data.value
    const chunks = resign_date.split(' ')
    if (chunks.length === 1) data.value.resign_date += ' 00:00:00'
  }
});

const { run: update, loading: loadUpdated } = useAsync({
  success: () => {
    ElMessage.success('编辑成功')
    requestDetail()
  }
});

const { run: approval } = useAsync({
  success: () => requestDetail()
});

const requestDetail = () => detail(httpDetail({ id: id.value }));

function onSubmit() {
  const { expire_date, hand_uid, resign_uid, resign_date, id, companyNo } = data.value
  update(httpUpdate({ expire_date, hand_uid, resign_uid, resign_date, id, companyNo }))
}

function handleApproval(status:string, message: string){
  ElMessageBox.confirm(`确定要${message}?`, {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
   type: "warning",
  }).then(() => {
    console.log(status, message)
  })
}

onMounted(requestDetail)
</script>

<template>
  <div class="padding__container">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem title="离职交接详情" name="1" v-loading="loadUpdated">
            <Form v-model:data="data" :companyNo="data.companyNo" @submit="onSubmit" />
          </ElCollapseItem>

          <!-- TODO:流程权限 -->
          <ElCollapseItem title="发起审核流程" name="2" v-if="data.status === '0'">
            <ElButton class="fr mb-[10px]" size="small" type="primary" @click="handleApproval('1', '发起审核流程')">发起审核流程</ElButton>
          </ElCollapseItem>

          <!-- v-if="data.status === '1' -->
          <ElCollapseItem title="离职交接审核" name="3">
            <DefaultApprovalNode approve-value="3"  reject-value="2" />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
