<script setup lang="ts">
import type { AssigneeNode } from "../nodes/type";
import type { Field } from "@/components/Render/type";
import UserSelector from "@/components/UserSelector/index.vue";
// import RoleSelector from "@/components/RoleSelector/index.vue";

const props = defineProps<{
    activeData: AssigneeNode & { formOrg?: string };
    fields: Field[];
    type: "审批" | "抄送" | "办理" | "通知";
}>();
const _activeData = computed(() => props.activeData);
</script>

<template>
    <el-form label-position="top" label-width="90px">
        <el-form-item prop="assigneeType" :label="`${type}对象`">
            <el-radio-group v-model="_activeData.assigneeType">
                <el-row>
                    <el-col :span="8">
                        <el-radio value="user">指定人员</el-radio>
                    </el-col>

                    <el-col :span="8">
                        <el-radio value="choice">发起人自选</el-radio>
                    </el-col>
                    <el-col :span="8">
                        <el-radio value="self">发起人自己</el-radio>
                    </el-col>
                    <el-col :span="8">
                        <el-radio value="leader">直属上级</el-radio>
                    </el-col>
                    <el-col :span="8">
                        <el-radio value="orgLeader">组织主管</el-radio>
                    </el-col>
                    <el-col :span="8">
                        <el-radio value="formUser">表单内人员</el-radio>
                    </el-col>
                    <!-- 新增：表单内组织选项 -->
                    <el-col :span="8">
                        <el-radio value="formOrg">表单内组织</el-radio>
                    </el-col>
                    <slot></slot>
                </el-row>
            </el-radio-group>
        </el-form-item>

        <!-- 原有选项保持不变 -->
        <el-form-item prop="users" label="指定人员" v-if="_activeData.assigneeType === 'user'">
            <UserSelector v-model="_activeData.users" multiple :placeholder="`请选择${type}人`" />
        </el-form-item>

        <el-form-item prop="choice" label="发起人自选择" v-if="_activeData.assigneeType === 'choice'">
            <el-radio-group v-model="_activeData.choice">
                <el-radio-button :value="false">单选</el-radio-button>
                <el-radio-button :value="true">多选</el-radio-button>
            </el-radio-group>
        </el-form-item>

        <el-form-item prop="leader" label="多级上级" v-if="_activeData.assigneeType === 'leader'">
            <el-select v-model="_activeData.leader" style="width: 220px" placeholder="请选择多级上级">
                <el-option v-for="i in 11" :key="i" :label="i === 1 ? '直属上级' : `${i}级上级`" :value="i" />
            </el-select>
        </el-form-item>

        <el-form-item prop="orgLeader" label="组织主管" v-if="_activeData.assigneeType === 'orgLeader'">
            <el-select v-model="_activeData.orgLeader" style="width: 220px" placeholder="请选择组织主管">
                <el-option v-for="i in 11" :key="i" :label="i === 1 ? '直属主管' : `${i}级主管`" :value="i" />
            </el-select>
        </el-form-item>

        <el-form-item prop="formUser" label="表单内人员" v-if="_activeData.assigneeType === 'formUser'">
            <el-select placeholder="选择表单内人员" style="width: 220px" v-model="_activeData.formUser">
                <el-option
                    v-for="item in fields.filter(e => e.name === 'UserSelector')"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                />
            </el-select>
        </el-form-item>

        <!-- 新增：表单内组织选择器 -->
        <el-form-item prop="formOrg" label="表单内组织" v-if="_activeData.assigneeType === 'formOrg'">
            <el-select placeholder="选择表单内组织" style="width: 220px" v-model="_activeData.formOrg">
                <el-option
                    v-for="item in fields.filter(e => e.name === 'OrgSelector')"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                />
            </el-select>
        </el-form-item>
    </el-form>
</template>

<style scoped lang="scss"></style>
