<template>
    <super-dialog
        v-model="dialogVisible"
        :title="title"
        custom-class="notification-dialog"
        top="10%"
        width="30%"
        :close-on-click-modal="false"
        @closed="closePage"
    >
        <div
            v-loading="detailLoading"
            class="table-container"
            element-loading-background="rgba(10 ,38 ,61, 0.9)"
        >
            <el-radio-group v-model="moveType" class="move-type-list">
                <el-radio
                    :value="item.code"
                    v-for="item in moveTypeList"
                    :key="item.code"
                    style="margin: 5px 0"
                    >{{ item.name }}</el-radio
                >
            </el-radio-group>
        </div>
        <div slot="footer" style="display: flex; justify-content: center; width: 100%">
            <el-button type="primary" @click="submitObject" :loading="btnLoading">确定</el-button>
            <el-button @click="closePage">取消</el-button>
        </div>
    </super-dialog>
</template>

<script lang="ts" setup>
import {
    dataAdd,
    dataSupplierClass
} from '@/api/supplierMonitor/ConfigManagement/MaterialClassificationManagement'
import SuperDialog from '@/components/Dialog/index.vue'
import { refineRequestBody } from '@/utils/requestWrappers'
import { onMounted, reactive, ref, computed } from 'vue'
// 1. 定义 props
const props = defineProps({
    isShowAdd: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    info: {
        type: Array,
        default: () => []
    }
})

onMounted(() => {
    getClassList()
})

const btnLoading = ref(false)
const detailLoading = ref<Boolean>(false)
const propsData = { label: 'name', value: 'id', code: 'code' }
const getClassList = async () => {
    detailLoading.value = true
    let params = {
        pageBean: {
            page: -1,
            pageSize: -1
        },
        querys: [
            { group: 'main', operation: 'EQUAL', property: 'status', relation: 'AND', value: '1' }
        ]
    }
    const { total = 0, rows = [] } = await dataSupplierClass(params)
    moveTypeList.value = rows
    detailLoading.value = false
}

// 2. 定义 emit
const emit = defineEmits(['update:isShowAdd', 'refresh', 'cancel'])

const openPage = () => {}

const closePage = () => {
    // 触发取消事件，通知父组件这是取消操作
    emit('cancel')
    emit('update:isShowAdd', false)
    // 重置选择状态
    moveType.value = null
}

const moveTypeList = ref<any[]>([])
const moveType = ref<number | null>(null)

defineExpose({
    openPage
})
// 保存绑定
const submitObject = async () => {
    if (!moveType.value) {
        ElMessage.warning('请选择物料类型')
        return
    }
    
    const selectedType = moveTypeList.value.find(i => i.code === moveType.value)
    if (!selectedType) return
    
    const finalArr = props.info.map(item => ({
        ...item,
        categoryId: item.id,
        categoryCode: item.code,
        supplierMaterialCategoryId: selectedType.id,
        supplierMaterialCategoryCode: selectedType.code
    }))
    
    finalArr.forEach(item => {
        delete item.id
        delete item.code
    })
    
    try {
        btnLoading.value = true
        const { state, message } = await dataAdd(finalArr)
        if (state) {
            ElMessage.success(message)
            // 立即触发父组件刷新
            emit('refresh')
            // 关闭对话框
            emit('update:isShowAdd', false)
            // 重置选择状态
            moveType.value = null
        } else {
            ElMessage.error(message)
        }
    } finally {
        btnLoading.value = false
    }
}
// 3. 使用 computed 定义双向绑定
const dialogVisible = computed({
    get() {
        return props.isShowAdd
    },
    set(val) {
        emit('update:isShowAdd', false)
    }
})
</script>

<style lang="scss" scoped>
.move-type-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0 0 20px 10px;
}
</style>
