<template>
    <div class="edit-popup">

        <popup ref="popupRef" :async="true" width="60vw" @confirm="handleSubmit" @close="handleClose" :showFootBtn="false">


            <el-card>
                <el-descriptions :column="3" title="审批详情" border>
                    <el-descriptions-item label="组织名称" label-align="left" align="left" label-class-name="my-label">
                        formData.org_name
                    </el-descriptions-item>
                    <el-descriptions-item label="部门名称" label-align="left" align="left" label-class-name="my-label">
                        formData.dept_name</el-descriptions-item>
                    <el-descriptions-item label="项目名称" label-align="left" align="left" label-class-name="my-label">
                        formData.name
                    </el-descriptions-item>
                    <el-descriptions-item label="项目名称" label-align="left" align="left" label-class-name="my-label">
                        formData.name
                    </el-descriptions-item>
                    <el-descriptions-item label="项目名称" label-align="left" align="left" label-class-name="my-label">
                        formData.name
                    </el-descriptions-item>
                    <el-descriptions-item label="项目名称" label-align="left" align="left" label-class-name="my-label">
                        formData.name
                    </el-descriptions-item>
                    <el-descriptions-item label="审核状态" label-align="left" align="left" label-class-name="my-label">
                        formData.name
                    </el-descriptions-item>
                    <el-descriptions-item label="当前审核人" label-align="left" align="left" label-class-name="my-label">
                        formData.name
                    </el-descriptions-item>
                    <el-descriptions-item label="抄送人" label-align="left" align="left" label-class-name="my-label">
                        formData.name
                    </el-descriptions-item>

                    <el-descriptions-item label="审批流程" label-align="left" align="left" label-class-name="my-label">
                        formData.name
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="审批流程" label-align="left" align="left">
                        <el-steps :space="50" :active="1" simple :align-center="true">
                            <el-step title="Step 1" :icon="Avatar" />
                            <el-step title="Step 2" :icon="Clock" />
                            <el-step title="Step 3" :icon="Clock" />
                            <el-step title="Step 3" :icon="Clock" />
                            <el-step title="Step 3" :icon="Clock" />
                        </el-steps>
                    </el-descriptions-item>
                    <el-descriptions-item label="审批记录" label-align="left" align="left">
                        <el-steps direction="vertical" :active="1" :align-center="true" :space="50"
                            style="margin-top: 20px">
                            <el-step title="Step 1" />
                            <el-step title="Step 2" />
                            <el-step title="Step 3" />
                        </el-steps>
                    </el-descriptions-item>
                    <el-descriptions-item label="操作" label-align="left" align="left">
                        <el-button type="primary" @click="handleSubmit">
                            通过
                        </el-button>
                        <el-button>
                            通过
                        </el-button>

                    </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({

})


// 获取详情
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')
}



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