<template>
    <!-- 废除对话框 -->
    <el-dialog title="废除" v-model="abolishOpen" width="650px" class="my_dialog" align-center :destroy-on-close="true"
        :close-on-click-modal="false">
        <el-form ref="abolishRef" :model="abolishForm" :rules="abolishRules" label-width="120px" label-position="top"
            class="myFeedBackForm">
            <el-form-item label="输入废除原因" prop="invalidReason">
                <el-input v-model="abolishForm.invalidReason" style="width: 100%" :rows="5" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button class="my-cancel-btn" @click="abolishOpen = false">取 消</el-button>
                <el-button class="my-confirm-btn" type="primary" @click="handleSubmitAbolish">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { onMounted, defineExpose, ref } from 'vue';
import { mediaCancel } from "@/api/mediaLibrary"
const { proxy } = getCurrentInstance()
const emit = defineEmits(['handleReloadList']);
const abolishOpen = ref(false)

const data = reactive({
    abolishForm: {},
    abolishRules: {
        invalidReason: [{ required: true, message: "请输入废除原因", trigger: "blur" }],
    }
})
const { abolishForm, abolishRules } = toRefs(data)

const openDialog = (_mediaId) => {
    abolishForm.value = {
        mediaId: _mediaId,
        invalidReason: undefined
    }
    abolishOpen.value = true
}

// 提交废除
const handleSubmitAbolish = () => {
    proxy.$refs["abolishRef"].validate(valid => {
        if (valid) {
            mediaCancel(abolishForm.value).then(response => {
                proxy.$modal.msgSuccess("操作成功")
                abolishOpen.value = false
                abolishForm.value = {}
                emit('handleReloadList')
            })
        }
    })
}

// 暴露方法\属性给父组件
defineExpose({
    openDialog
});
</script>