<template>
    <div class="detail-popup">
        <popup ref="popupRef" :showFootBtn="false" title="审批详情" :async="true" width="60vw">
            <el-card>
                <template #header>审批内容</template>
                <el-descriptions :column="3" border>
                    <el-descriptions-item label="报销凭证编号" label-align="left" align="left">
                        {{ formData.code }}
                    </el-descriptions-item>
                    <el-descriptions-item label="原始单据日期" label-align="left" align="left">
                        {{ formData.expense_time }}
                    </el-descriptions-item>
                    <el-descriptions-item label="入账月份" label-align="left" align="left">
                        {{ formData.income_month }}
                    </el-descriptions-item>
                    <el-descriptions-item label="附件" label-align="left" align="left">
                        <annexLink :annex="formData.annex || []"></annexLink>
                    </el-descriptions-item>
                </el-descriptions>
                <el-table :data="formData.detail">
                    <el-table-column label="报销金额" show-overflow-tooltip prop="amount">
                    </el-table-column>
                    <el-table-column label="报销项目" show-overflow-tooltip prop="cate_id">
                    </el-table-column>
                    <el-table-column label="备注信息" show-overflow-tooltip prop="remark">
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card>
                <template #header>审批流程</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() + 1" simple>
                            <el-step :icon="Clock" :title="formData.record[0].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">
                        <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()">
                        <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="form.check = 3, handCheck()"
                            v-if="formData.admin_id == userStore.id">
                            撤回
                        </el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <div v-if="showPerDialog">
                <personnelselector ref="personnel" @confirm="submituser" type="1">
                </personnelselector>
            </div>
        </popup>
    </div>
</template>

<script lang="ts" setup name="customdetail">
import annexLink from './../../components/annexLink/index.vue'
import Popup from '@/components/popup/index.vue'
import { apiOaoaApproveCheck } from "@/api/oa_initiate"
import useUserStore from "@/stores/modules/user";
import { Clock } from '@element-plus/icons-vue'
import { apiExpenseCheck } from '@/api/oa_financial'


const emit = defineEmits(['close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const showPerDialog = ref(false);
const personnel = ref(null);
const userStore = useUserStore().userInfo;

// 表单数据
const formData = reactive({
    id: 0,
    extends: {}
})

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


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


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 open = () => {
    popupRef.value?.open()
}

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 = formData.steps.findIndex(item => { return item.sort == formData.check_step_sort })
    return index
}

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


// 审批
const handCheck = async () => {
    if (formData.flow_info.check_type != 2) delete form.check_node;
    form.id = formData.id
    const res = await apiExpenseCheck({ ...form })
    handleClose()
}

// 显示
const showActionList = reactive([4, 3, 2])

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

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