<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>审批流程</span>
            </div>
        </template>
        <div>
            <el-row>

                <el-col :span="8">
                    <el-form-item label="审批流程" prop="flow_cate">
                        <el-select class="flex-1" v-model="formData.flow_id" clearable @change="getDetail"
                            placeholder="请选择审批类型">
                            <el-option v-for="(item, index) in flows" :key="index" :label="item.name"
                                :value="parseInt(item.id)" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="flowDetail.id">
                <el-col :span="24">
                    <el-form-item label="审批流程" prop="mailing_no">
                        <el-steps align-center :active="flowDetail.flow_list.length">
                            <el-step :title="`第${numberToChinese(index + 1)}级审批`" :description="getDescr(item)"
                                v-for="(item, index) in flowDetail.flow_list" :key="idnex" />
                        </el-steps>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="flowDetail.id">
                <el-col :span="24">
                    <el-form-item label="抄送人" prop="mailing_no">
                        <el-tag v-for="(item, index) in  flowDetail.copy_uids" :key="index" class="ml-2">{{ item.name
                        }}</el-tag>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-button @click="submit" type="primary" :disabled="!formData.flow_id">
                    提交
                </el-button>
            </el-row>
        </div>

    </el-card>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits } from 'vue'
import { apiFlowLists, apiFlowDetail, } from '@/api/flow'
import { useRoute } from "vue-router"

const route = useRoute()
const props = defineProps({
    id: Number,
    flows: Object,
    submitApi: Object,
})

const emit = defineEmits(['off'])


const formData = reactive({
    flow_id: "",
    path: route.path,
    id: props.id
})



// // 审批流程
// const flowTypeList = ref([{
//     "id": 1,
//     "name": "fgfdgd",
//     "flow_cate": "1212",
//     "check_type": "固定审批流",
//     "remark": "vcggfhfghfg",
//     "status": "启用",
//     "flow_type": "财务",
//     "org_name": "海之农",
//     "dept_name": "技术部,张伟自己的部门"
// }])


// const getFlowTypeList = async () => {

//     // let res = await apiFlowLists({ id: 1 })
//     // flowTypeList.value = res

// }


// 获取流程详情
const flowDetail = ref({})
const getDetail = async () => {
    let res = await apiFlowDetail({ id: formData.flow_id })
    flowDetail.value = res
}

// 流程说明
const getDescr = (item) => { return item.flow_step == 1 ? "当前部门负责人" : (item.flow_user.map(val => ([val.name]))).join(',') }

// 提交审批
const submit = async () => {
    await props.submitApi({
        ...formData
        // id: props.id,
        // flow_id:
        // as: { ...formData }
    })
    emit('off')


}


const numberToChinese = (num) => {
    let chineseNum = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
    return chineseNum[num];
}
// getFlowTypeList()
</script>