<template>
    <ele-modal
        v-model="visible"
        :title="type == 1 ? '入库作废' : '出库作废'"
        width="500px"
        :destroy-on-close="true"
        @closed="handleClosed"
    >
        <div class="invalid-form">
            <div class="form-item">
                <label class="form-label">请选择作废原因</label>
                <dict-data
                    v-model="selectedReason"
                    :code="
                        type == 1 ? 'in_invalid_reason' : 'out_invalid_reason'
                    "
                    placeholder="请选择"
                />
            </div>
        </div>

        <template #footer>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleConfirm" :loading="loading"
                >确认</el-button
            >
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref } from 'vue';
    import { ElMessage } from 'element-plus';
    import DictData from '@/components/DictData/index.vue';
    import request from '@/utils/request';

    defineOptions({ name: 'InvalidModal' });

    // 弹窗显示状态
    const visible = ref(false);
    const loading = ref(false);

    // 当前记录信息
    const currentRecord = ref(null);

    // 选中的作废原因
    const selectedReason = ref('');

    // 打开弹窗
    const type = ref('');
    const handleOpen = (record) => {
        currentRecord.value = record;
        type.value = record.type;
        visible.value = true;
        selectedReason.value = '';
    };

    // 关闭弹窗
    const handleClosed = () => {
        currentRecord.value = null;
        selectedReason.value = '';
        loading.value = false;
    };

    // 取消操作
    const handleCancel = () => {
        visible.value = false;
    };

    // 确认作废
    const handleConfirm = async () => {
        if (!selectedReason.value) {
            ElMessage.warning('请选择作废原因');
            return;
        }

        loading.value = true;

        try {
            // 调用作废API（暂时使用假接口）
            mockInvalidApi({
                id: currentRecord.value.id,
                reason: selectedReason.value
            }).then((res) => {
                console.log('作废响应:', res);
                if (res.data.code === 200) {
                    ElMessage.success('作废成功');
                    visible.value = false;

                    // 触发父组件刷新
                    emit('success');
                } else {
                    ElMessage.error(res.data.msg || '作废失败');
                }
            });
        } catch (error) {
            console.error('作废失败:', error);
            ElMessage.error('作废失败');
        } finally {
            loading.value = false;
        }
    };

    // 作废API
    const mockInvalidApi = (data) => {
        return request({
            url: '/activation/bookActivationInfo/cancel',
            method: 'post',
            data
        });
    };

    // 暴露方法给父组件
    defineExpose({
        handleOpen
    });

    // 定义事件
    const emit = defineEmits(['success']);
</script>

<style scoped>
    .invalid-form {
        padding: 20px 0;
    }

    .form-item {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }

    .form-label {
        display: block;
        font-weight: 500;
        color: #333;
        width: 140px;
    }
</style>
