<template>
    <el-descriptions :column="3" border>
        <el-descriptions-item label="审批状态" label-align="left" align="left">
            {{ formData.check_status_text }}
        </el-descriptions-item>
        <el-descriptions-item label="当前审核人" label-align="left" align="left">
            {{ formData.check_admin_users || "审批结束" }}
        </el-descriptions-item>
        <el-descriptions-item label="抄送人" label-align="left" align="left">
            {{ formData.copy_users }}
        </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" border>
        <el-descriptions-item label="审批流程" label-align="left" align="left">
            <el-steps class="mb-4" style="max-width: 50vw" :space="200" :active="findActive() + 2" simple>
                <el-step :icon="Clock" :title="formData.record[formData.record.length - 1].check_user_name + '创建'" />
                <el-step :icon="Clock" :title="flowTypeToText(item.flow_type, item)" v-for="item in formData.steps" />
            </el-steps>
        </el-descriptions-item>
        <el-descriptions-item label="审批记录" label-align="left" align="left">
            <p v-for="item in formData.record">
                <span>{{ item.check_user_name + item.status_text }} </span>了申请
                {{ item.check_time }}
                <span>
                    操作意见：
                    {{ item.content }}
                </span>
            </p>
        </el-descriptions-item>
        <el-descriptions-item label="审批节点" label-align="left" align="left"
            v-if="formData.flow_info.check_type == 2 && formData.check_status != 3 && formData.check_status != 2 && formData.admin_id != userStore.id && showTextarea()">
            <div class="flex" style="position: relative;">
                <el-radio-group v-model="form.check_node">
                    <el-radio :label="1">审批结束</el-radio>
                    <el-radio :label="2">下一审批人</el-radio>
                </el-radio-group>
                <div class="w-280[px]" style="position: absolute;left:250px">
                    <el-input v-show="form.check_node == 2" v-model="form.check_admin_names" placeholder="点击选择下一审批人"
                        clearable readonly @click="userclick" />
                </div>
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="审批意见" label-align="left" align="left"
            v-if="showTextarea() && formData.admin_id != userStore.id">
            <el-input type="textarea" v-model="form.content"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="操作" label-align="left" align="left" v-if="showTextarea()">
            <el-button type="primary" @click="form.check = 1, handCheck()" v-if="formData.admin_id != userStore.id">
                通过
            </el-button>
            <el-button @click="form.check = 2, handCheck()"
                v-if="formData.admin_id != userStore.id && formData.flow_info.check_type != 3">
                拒绝
            </el-button>
            <el-button @click="form.check = 2, handCheck()"
                v-if="formData.admin_id != userStore.id && formData.flow_info.check_type == 3">
                回退
            </el-button>
            <el-button type="info" @click=" showBackDialog = true" v-if="formData.admin_id == userStore.id">
                撤回
            </el-button>
        </el-descriptions-item>
        <el-descriptions-item label="操作" label-align="left" align="left"
            v-if="formData.check_status == 3 && formData.record[formData.record.length - 1].check_user_id == userStore.id">
            <el-button type="info" @click="reEdit">
                重新编辑
            </el-button>
        </el-descriptions-item>
    </el-descriptions>
    <div v-if="showPerDialog">
        <personnelselector ref="personnel" @confirm="submituser" type="1">
        </personnelselector>
    </div>
    <el-dialog v-model="showBackDialog" title="撤回审批" width="550px">
        <el-form-item label="撤回原因">
            <el-input v-model="form.content" type="textarea"> </el-input>
        </el-form-item>
        <el-form-item label="">
            <el-button type="primary" @click="backFn">撤回</el-button>
            <el-button @click="showBackDialog = false">取消</el-button>
        </el-form-item>
    </el-dialog>
</template>

<script setup lang="ts">
import { apiOaoaApproveCheck } from "@/api/oa_initiate"
import useUserStore from "@/stores/modules/user";
import { Clock } from '@element-plus/icons-vue'
import feedback from '@/utils/feedback'
import { defineProps } from "vue"

let props = defineProps({
    formData: {
        type: Object,
    }
})

const emit = defineEmits(["success", "close", "reEdit"]);
const showPerDialog = ref(false);
const personnel = ref(null);
const userStore = useUserStore().userInfo;
const showBackDialog = ref(false)

const form = reactive({
    "id": props.formData.id,
    "check": '',
    "content": "",
    "check_node": 1,
    "check_admin_ids": '',
    check_admin_names: ""
})


const backFn = () => {
    if (!form.content) return feedback.msgError("请填写撤回原因");
    form.check = 3
    handCheck()
}
const userclick = async () => {
    showPerDialog.value = true;
    await nextTick();
    personnel.value.open();
};

const submituser = (e) => {
    form.check_admin_names = e.name;
    form.check_admin_ids = e.id;
    showPerDialog.value = false;
};


const flowTypeToText = (type, item) => {
    if (type == 0) return item.user_id_info[0].name;
    if (type == 1) return "部门负责人";
    if (type == 2) return "或签";
    if (type == 3) return "会签";
    if (type == 4) return item.user_id_info[0].name;
}

const findActive = () => {
    let index = props.formData.steps.findIndex(item => { return item.sort == props.formData.check_step_sort })
    return index
}

// 关闭回调
const handleClose = () => {
    emit('close')
}

const hdClose = () => {
    emit('close')
}


// 审批
const handCheck = async () => {
    if (props.formData.check_admin_ids && props.formData.record[props.formData.record.length - 1].check_user_id == form.check_admin_ids) {
        return feedback.msgError("下一级审批人不能是发起审批人")

    }
    if (props.formData.flow_info.check_type != 2) delete form.check_node;
    form.id = props.formData.id
    const res = await apiOaoaApproveCheck({ ...form })
    handleClose()
}

// 显示
const showActionList = reactive([4, 3, 2])
const showTextarea = () => {
    if (showActionList.includes(props.formData.check_status)) return false;
    if (props.formData.admin_id == userStore.id) return true;
    if (props.formData?.check_admin_ids.length > 1) {
        if (props.formData.steps[findActive()].check_list.map(item => item.check_user_id).includes(userStore.id)) return false;
        else return (props.formData?.check_admin_ids.split(',').map(Number).includes(userStore.id)); // 判断是否是当前用户
    } else {
        return (props.formData?.check_admin_ids == userStore.id)
    }
}

//重新编辑
const reEdit = () => {
    emit('reEdit')
}

</script>
<style lang="scss" scoped>
:deep(.el-step__icon) {
    margin-top: 10px !important;
}
</style>
