<template>
    <el-drawer v-model="props.imageVersionTableDialog" title="新增" size="30%" :before-close="handleClose">
        <div v-loading="loading">
            <div style="display: flex;margin-bottom: 10px; justify-content: flex-start; align-items: center;">
                <el-input v-model="versionInput" placeholder="版本" clearable width="40%" />
                <el-button type="primary" icon="plus" style="margin-left: 10px;" @click="addData">添加
                </el-button>
            </div>
            <el-table :data="imageVersionData" border stripe>
                <el-table-column v-for="(item, i ) in labelList" :key="i" :label="item.label" :prop="item.prop"
                    align="center" />
                <el-table-column label="操作" align="center" width="135" fixed="right">
                    <template #default="scope">
                        <el-button link type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-drawer>

</template>

<script setup lang='ts'>
import { ref } from 'vue'
import {
    getImageVersion,
    addImageVersion,
    deleteImageVersion
} from '@/services/api/imageService/index';
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps({
    imageVersionTableDialog: {
        type: Boolean,
        require: true
    },
})

const emits = defineEmits(['update:imageVersionTableDialog'])

const labelList = [
    { label: '版本', prop: 'version' }
]
const imageVersionId = ref()
const imageVersionData = ref()
const versionInput = ref()
const loading = ref(true)


const addData = async () => {
    const data = {
        imageId: imageVersionId.value,
        version: versionInput.value
    }
    const res: any = await addImageVersion(data)
    if (res.code === 200) {
        ElMessage.success('添加成功')
        versionInput.value = ''
        initVersion(imageVersionId.value)
    }
}

const deleteData = async (id: any) => {
    ElMessageBox.confirm('确定删除吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const res: any = await deleteImageVersion(id)
        if (res.code === 200) {
            ElMessage.success('删除成功')
            initVersion(imageVersionId.value)
        }
    })
}

const handleClose = () => {
    emits('update:imageVersionTableDialog', false)
}

const initVersion = async (id: number) => {
    loading.value = true
    const res: any = await getImageVersion({ imageId: id })
    if (res.code === 200) {
        imageVersionData.value = res.data
        loading.value = false
    }
}

defineExpose({
    imageVersionId,
    initVersion
})
</script>
 
<style lang = "scss" scoped>
:deep(.el-input--suffix) {
    width: 40%;
}
</style>