<template>
    <super-dialog
        v-model="dialogVisible"
        :title="title"
        custom-class="notification-dialog"
        top="20vh"
        width="30%"
        @closed="closePage"
    >
        <div
            v-loading="detailLoading"
            class="table-container"
            element-loading-background="rgba(10 ,38 ,61, 0.9)"
        >
            <el-form
                ref="addEditFormRef"
                :model="addEditForm"
                :rules="addEditFormRules"
                label-position="left"
                label-suffix="："
                size="large"
            >
                <el-form-item label="评分人" prop="ratingId">
                    <el-select
                        v-model="addEditForm.ratingId"
                        clearable
                        multiple
                        placeholder="请选择"
                        @change="changeRatingName"
                    >
                        <el-option
                            v-for="item in reviewerOptions"
                            :key="item.userId"
                            :label="item.fullname"
                            :value="item.userId"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" style="display: flex; justify-content: center; width: 100%">
            <el-button type="primary" @click="submitObject">确定</el-button>
            <el-button @click="closePage">取消</el-button>
        </div>
    </super-dialog>
</template>

<script lang="ts" setup>
import SuperDialog from '@/components/Dialog/index.vue'
import { getOrgUserList } from '@/api/system/user'

interface ReviewerOption {
    value: string
    label: string
    children?: ReviewerOption[]
}

const props = defineProps({
    isShowAdd: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    info: {
        type: Object,
        default: () => ({})
    },
    selectedRows: {
        type: Array,
        default: () => []
    }
})

// ==================== 表单相关 ====================
const detailLoading = ref<Boolean>(false)

const addEditFormRef = ref<any>(null)
const addEditForm = ref<any>({
    ratingId: []
})

const addEditFormRules = ref<any>({
    ratingId: [{ required: true, message: '请选择评分人', trigger: 'change' }]
})

function submitObject() {
    addEditFormRef.value?.validate((valid: any, object: any) => {
        if (!valid) {
            ElMessage.warning(
                `有${Object.keys(object || {}).length}个字段未通过校验，请正确填写表单内容。`
            )
        } else {
            emit('divideSuccess', addEditForm.value)
            closePage()
        }
    })
}

// ==================== 评审分配相关 ====================
const userDetail = ref({})
const reviewerOptions = ref<ReviewerOption[]>([])

// 获取评分人
const getReviewerOptions = async () => {
    const params = {
        pageBean: {
            page: -1,
            pageSize: -1
        },
        querys: [
            {
                group: 'orgTree',
                operation: 'IN',
                property: 'ORG_ID_',
                relation: 'AND',
                value: userDetail.value.userDetail.org[0].orgId
            }
        ]
    }
    const { total = 0, rows = [] } = await getOrgUserList(params)
    reviewerOptions.value = rows
}

// 选择评分人
const changeRatingName = (value: any) => {
    // reviewerOptions.value.forEach((item: any) => {
    //     if (item.userId === value) {
    //         addEditForm.value.ratingId = value
    //         addEditForm.value.ratingName = item.fullname
    //         addEditForm.value.ratingAccount = item.account
    //     }
    // })
}

const emit = defineEmits(['update:isShowAdd', 'divideSuccess'])

onMounted(() => {
    const storedData = localStorage.getItem('user')
    if (storedData) {
        userDetail.value = JSON.parse(storedData)
    }
    getReviewerOptions()
})

const openPage = () => {}

const closePage = () => {
    addEditFormRef.value?.resetFields()
    dialogVisible.value = false
}

defineExpose({
    openPage
})

// 3. 使用 computed 定义双向绑定
const dialogVisible = computed({
    get() {
        return props.isShowAdd
    },
    set(val) {
        emit('update:isShowAdd', false)
    }
})
</script>

<style lang="scss" scoped>
.table-container {
    max-height: 65vh;
    overflow-y: auto;
    padding-bottom: 1px;
    margin-bottom: 20px;
}

.review-actions {
    display: flex;
    padding: 10px 0 10px 10px;
}
</style>
