<template>
    <div class="edit-popup">
        <popup ref="popupRef" :async="true" width="60vw" @confirm="handleSubmit" @close="handleClose">
            <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="1" 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">
                        <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>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </popup>
    </div>
</template>

<script lang="ts" setup name="projectEdit">
import Popup from '@/components/popup/index.vue'
import { Avatar, Clock } from '@element-plus/icons-vue'

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

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

    },
    "step": [
        {
            "flow_step": 0,
            "flow_user": "",
            "is_active": 0,
            "flow_step_text": ""
        },
    ],
    "record": [
        {
            "title": "",
            "content": "",
            "check_time": "",
            "status": 0,
            "status_text": ""
        }
    ]
})


// 获取详情
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 handleSubmit = async () => {
    popupRef.value?.close()
    emit('success')
}

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

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

const getStep = (item, index) => {
    if (index == 0) { return formData.create_user_name + '创建' }
    else { return item.flow_step_text }
}

defineExpose({
    open,
    setFormData,
})


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