<!-- 添加协作 -->
<template>
    <el-dialog title="添加协作" v-model="visible" width="850px">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="选择类型：" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio value="1">新增</el-radio>
                    <!--                    <el-radio value="2">替换</el-radio>-->
                    <el-radio value="2">移除</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="选择人员：" prop="userIdList" >
                <SelectUser multiple :inputWidth="600" v-model="form.userIdList"></SelectUser>
            </el-form-item>
            <p class="tips">*新增指在已有协作人的基础上增加新的协作人</p>
            <!-- <p class="tips">*替换指将已有的协作人替换为新的协作人</p> -->
            <p class="tips">*移除指从已有的协作人中移除所选用户</p>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
// import SelectUser from '@/components/SelectOrg/SelectUser.vue';
import {collaborator,collaboratorDTO} from '@/api/customer'
import {BusinessTransferDTO} from "@/api/business/allBusiness/types";

const emit = defineEmits(['onOk', 'refresh'])
const visible = ref(false)
const buttonLoading = ref(false)
const formRef = ref()

let temp: collaboratorDTO = {
    type:'',
    userIdList:[],
    resourceType: undefined,
    resourceIdList: undefined
}
const form = ref<collaboratorDTO>({
   ...temp
})

watch(() => form.value.userIdList, async (value) => {
   console.log(value)
})

const open = (params: any) => {
    visible.value = true
    reset()
    Object.assign(form.value, params)
}


const rules = {
    userIdList: [
        {required: true, message: '请选择协作人员', type: 'array',
            validator: (rule, value, callback) => {
                if (value.length === 0) {
                    callback(new Error('至少选择一个选项'));
                } else {
                    callback();
                }
            },
            trigger: 'change'
        }
    ],
    type: [
        {required: true, message: '请选择类型', trigger: 'change'}
    ]
}

const submitForm = () => {
    formRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            let res = await collaborator(form.value)
            if(res.success){
                ElMessage.success(form.value.type == 1 ? '添加协作成功' : '移除协作成功')
            }
            reset()
            visible.value = false
            emit('onOk', 'addCollaborate')
            emit('refresh')
        }
    })
}

const cancel = () => {
    visible.value = false
}
/** 表单重置 */
const reset = () => {
    form.value = {...temp}
    formRef.value?.resetFields();
}

defineExpose({
    open
})
</script>

<style lang="scss" scoped>
.tips {
    padding-left: 120px;
    margin-bottom: 2px;
}
</style>
