<template>
    <div class="edit-popup">
        <el-card>
            <el-descriptions :column="3" title="审批详情" border>
                <el-descriptions-item label="审批主题" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.title }}
                </el-descriptions-item>
                <el-descriptions-item label="审批流程" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.flow_name }}
                </el-descriptions-item>
                <el-descriptions-item label="审核状态" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.check_status_text }}
                </el-descriptions-item>
                <el-descriptions-item label="申请人" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.create_user_name }}
                </el-descriptions-item>
                <el-descriptions-item label="当前审批人" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.current_check_user }}
                </el-descriptions-item>
                <el-descriptions-item label="抄送人" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.copy_user }}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="审批流程" label-align="left" align="left">
                    <el-steps :active="activeStep" simple :align-center="true">
                        <el-step :title="getStep(item, index)" :icon="index == 0 ? Avatar : Clock"
                            v-for="(item, index) in formData.step" :key="index" />
                    </el-steps>
                </el-descriptions-item>
                <el-descriptions-item label="审批记录" label-align="left" align="left">
                    <div class="steps-cls">
                        <el-steps direction="vertical" :active="formData.record.length" :align-center="true" :space="50"
                            style="margin-top: 20px">
                            <el-step :title="item.check_time + ' ' + item.title"
                                v-for="(item, index) in formData.record" :key="index" />
                        </el-steps>
                    </div>
                </el-descriptions-item>
                <div>
                    <el-descriptions-item label="操作" label-align="left" align="left"
                        v-if="formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3 || formData?.check_status == 0 && formData.create_user == userInfo.id">
                        <el-form-item label="意见"
                            v-if="formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3 || formData?.check_status == 0 && formData.create_user == userInfo.id">
                            <el-input v-model="remark" clearable placeholder="请输入" type="textarea" />
                        </el-form-item>

                        <el-form-item label="审批">
                            <el-button type="primary" @click="checkFn(1)"
                                v-if="formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3">
                                通过
                            </el-button>
                            <el-button @click="checkFn(2)"
                                v-if="formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3">
                                拒绝
                            </el-button>
                            <el-button @click="revokeFn"
                                v-if="formData?.check_status == 0 && formData.create_user == userInfo.id">
                                撤销
                            </el-button>
                        </el-form-item>
                    </el-descriptions-item>
                </div>
            </el-descriptions>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="projectEdit">
import { Avatar, Clock } from '@element-plus/icons-vue'
import { flowapproveDetail, flowapproveCheck, flowapproveRevoke } from '@/api/approve.ts'
import { defineProps } from "vue"
import useUserStore from '@/stores/modules/user'
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const props = defineProps({
    approve_id: Number,
})
let activeStep = ref(0)
const remark = ref('')
const remark2 = ref('')

const emit = defineEmits(['off'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()

// 表单数据
const formData = reactive({
    "id": '',
    "title": "",
    "create_user": 1,
    "check_status": 0,
    "flow_name": "",
    "check_status_text": "",
    "current_check_user": "",
    "create_user_name": "admin",
    "copy_user": "admin",
    current_check_user_ids: [],
    "content": {

    },
    "step": [
        {
            "flow_step": '',
            "flow_user": "",
            "is_active": '',
            "flow_step_text": ""
        },

    ],
    "record": [
        {
            "title": "",
            "content": "",
            "check_time": "",
            "status": 0,
            "status_text": ""
        }
    ]
})

// 展示审批操作
const showFlow = () => {
    return Boolean(formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3)
}
// 撤回
const showDel = () => {
    return Boolean(formData?.check_status == 0 && formData.create_user == userInfo.id)
}


// 获取详情
const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}


//打开弹窗
const open = () => {
    popupRef.value?.open()
}


// 撤销申请
const revokeFn = async () => {
    await flowapproveRevoke({
        id: props.approve_id,
        revoke_reason: remark.value
    })
    emit('off')

}

// 审核操作
const checkFn = async (i: Number) => {
    await flowapproveCheck({
        id: props.approve_id,
        check_status: i,
        check_reason: remark.value
    })
    emit('off')
}

const getStep = (item: Object, index: Number) => {

    if (index == 0) { return formData.create_user_name + '创建' }
    else { return item?.flow_step_text }
}

flowapproveDetail({ id: props.approve_id }).then(res => {
    activeStep.value = res.step.findIndex((item: Object) => item?.is_active == 1)
    setFormData(res)
})

defineExpose({
    open,
    setFormData,
})
</script>


<style lang="scss">
.el-step.is-simple .el-step__icon {
    margin-top: 15px;
}

.steps-cls {
    max-height: 200px;
    overflow-y: auto;
}

.el-step__title {
    font-size: 14px;
}

.el-step.is-simple .el-step__title {
    font-size: 14px;
}
</style>