<template>
    <div class="edit-popup">
        <popup ref="popupRef" :title="popupTitle" :async="true" width="80vw" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
                <el-col>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="审批流名称" prop="name">
                                <el-input v-model="formData.name" clearable placeholder="请输入审批流名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="审批类型" prop="flow_cate">
                                <!-- <el-select v-model="formData.flow_cate" placeholder="审批类型" clearable
                                    :style="{ width: '100%' }">
                                    <el-option label="日常审批" :value="1"></el-option>
                                    <el-option label="报销审批" :value="2"></el-option>
                                    <el-option label="发票审批" :value="3"></el-option>
                                    <el-option label="合同审批" :value="4"></el-option>
                                </el-select> -->
                                <el-select class="flex-1" v-model="formData.flow_cate" clearable placeholder="请选择所属分类">
                                    <el-option v-for="(item, index) in dictData.flow_type" :key="index" :label="item.name"
                                        :value="parseInt(item.value)" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="流程说明" prop="remark">
                                <el-input v-model="formData.remark" clearable type="textarea" placeholder="请输入流程说明" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="流程类型" prop="flow_detail.check_type" clearable :style="{ width: '100%' }">
                        <el-radio-group v-model="formData.check_type" @change="checkTypeFn">
                            <el-radio :label="1">固定审批</el-radio>
                            <el-radio :label="2">授权审批人</el-radio>
                            <el-radio :label="3">可回退审批 </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <p v-if="formData.flow_detail.type == 1">
                    <el-row v-for="(item, index) in formData.flow_detail.step">
                        <el-col :span="12">
                            <el-form-item label="审批流程">
                                <el-select v-model="formData.flow_detail.step[index].type" placeholder="审批类型" clearable
                                    :style="{ width: '100%' }">
                                    <el-option label="当前部门负责人" value="1"></el-option>
                                    <el-option label="上一级部门负责人" value="2"></el-option>
                                    <el-option label="指定用户(任意一人)" value="3"></el-option>
                                    <el-option label="指定用户(多人会签)" value="4"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="item.type == '3' || item.type == '4'">
                            <el-form-item label="指定人员">
                                <el-input clearable v-model="item.user[0].name" placeholder="指定人员" @click="openDialog" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-col :span="24">
                        <el-form-item prop="field126">
                            <el-button type="primary" @click="
                                formData.flow_detail.step.push({
                                    type: '',
                                    user: [{ id: '', name: '' }],
                                })
                                ">其他联系人</el-button>
                        </el-form-item>
                    </el-col>
                </p>
                <el-row v-if="formData.flow_detail.type == 2">
                    <el-col :span="12">
                        <el-form-item label="">
                            <span>无需审批</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <p v-if="formData.flow_detail.type == 3">
                    <el-row v-for="(item, index) in formData.flow_detail.step">
                        <el-col :span="12">
                            <el-form-item label="审批流程" prop="copy_uids">
                                <el-input v-model="item.type" clearable placeholder="请输入流程名称">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="指定人员">
                                <el-input v-model="item.user[0].name" @click="openDialog" readonly clearable
                                    placeholder="指定人员" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-col :span="24">
                        <el-form-item prop="field126">
                            <el-button type="primary" @click="
                                formData.flow_detail.step.push({
                                    type: '',
                                    user: [{ id: '', name: '' }],
                                })
                                ">其他联系人</el-button>
                        </el-form-item>
                    </el-col>
                </p>

                <el-form-item label="抄送人ID" prop="copy_unames">
                    <el-input v-model="formData.copy_to[0].name" clearable @click="openDialog" placeholder="请输入抄送人" />
                </el-form-item>
            </el-form>
        </popup>
        <personnelSelector ref="personnel" @confirm="submituser" />
    </div>
</template>

<script lang="ts" setup name="flowEdit">
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import { apiFlowAdd, apiFlowEdit } from "@/api/flow";
import { apiFlowTypeLists } from '@/api/flow_type'
import personnelSelector from '@/components/personnelselector/index.vue'
import { ref } from "vue"
import type { PropType } from "vue";

defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({}),
    },
});

const personnel = ref('')
const isCompany = ref(false);
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");

// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == "edit" ? "编辑审批流程表" : "新增审批流程表";
});

// 表单数据
const formData = reactive({
    id: "",
    name: "",
    check_type: "",
    type: "",
    flow_cate: "",
    remark: "",
    flow_detail: {
        type: 1,
        step: [{ type: "", user: [{ id: "", name: "" }] }],
    },
    copy_to: [{ id: "", name: "" }],
    // "name": "",
    // "flow_cate": "",
    // "check_type": "",
    // "remark": "",
    "flow_list": [
        {
            "flow_step": ""
        },
        {
            "flow_step": "",
            "flow_user": []
        }
    ],
    "copy_uids": []
});

//单选框改变时清空单选下的表单数据
const checkTypeFn = () => {
    formData.flow_detail.step = [{ type: "", user: [{ id: "", name: "" }] }];
};
// 表单验证
const formRules = reactive<any>({
    name: [
        {
            required: true,
            message: "请输入审批流名称",
            trigger: ["blur"],
        },
    ],
    check_type: [
        {
            required: true,
            message: "请输入1固定审批,2授权审批人",
            trigger: ["blur"],
        },
    ],
    type: [
        {
            required: true,
            message: "请输入应用模块,1假勤,2行政,3财务,4人事,5其他,6报销,7发票,8合同",
            trigger: ["blur"],
        },
    ],
    flow_cate: [
        {
            required: true,
            message: "请输入应用审批类型id",
            trigger: ["blur"],
        },
    ],

    remark: [
        {
            required: true,
            message: "请输入流程说明",
            trigger: ["blur"],
        },
    ],
});



// 获取详情
const setFormData = async (data: Record<any, any>) => {
    // let res = await apiFlowDetil(data.id);
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = res[key];
        }
    }
    formData.flow_detail.type = Number(formData.flow_detail.type);
};

const getDetail = async (row: Record<string, any>) => {
    // const data = await apiFlowDetail({
    //     id: row.id,
    // });
    // setFormData(data);
};

const a = {};
// 提交按钮
const handleSubmit = async () => {

    console.log(formData)
    return
    await formRef.value?.validate();
    // mode.value == "edit"
    //     ? await apiFlowCreat(formData)
    //     : await apiFlowCreat(formData);
    popupRef.value?.close();
    emit("success");
};

const submituser = (e) => {
    console.log(e, "e")
}

//打开弹窗
const open = (type = "add") => {
    mode.value = type;
    popupRef.value?.open();
};

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

const openDialog = () => {
    personnel.value?.open()
}

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