<template>
    <div class='app-container' v-loading="loading">
        <el-button type="primary" icon="plus" style="margin-bottom: 10px;" @click="addData">
            新增服务镜像</el-button>

        <el-table :data="tableData" 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="255" fixed="right">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="imageVersion(scope.row.id)">服务镜像版本
                    </el-button>
                    <el-divider direction="vertical" />
                    <el-button link type="primary" size="small" @click="editData(scope.row)">编辑
                    </el-button>
                    <el-divider direction="vertical" />
                    <el-button link type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination :page-data="listQuery" :total="listQuery.total" @size-change="sizeChange"
            @current-change="currentChange" />
    </div>
    <image-service-form ref="imageServiceFormRef" v-model:image-service-dialog="imageServiceDialog"
        @image-service-data="getImageServiceData" />
    <image-service-table ref="imageVersionRef" v-model:image-version-table-dialog="imageVersionTableDialog" />
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { ruleProps } from './interface/index'
import {
    getImageService,
    addImageService,
    updateImageService,
    deleteImageService
} from '@/services/api/imageService/index';
import { ElMessage, ElMessageBox } from 'element-plus';
import imageServiceForm from './components/imageServiceForm.vue';
import imageServiceTable from './components/imageServiceTable.vue';
import pagination from '@/components/pagination/index.vue'

const labelList = [
    { label: '镜像名', prop: 'name' },
    { label: '服务路径', prop: 'contextPath' },
    { label: '描述', prop: 'describe' },
]
const imageServiceDialog = ref(false)
const imageVersionTableDialog = ref(false)
const loading = ref(true)
const imageServiceFormRef = ref()
const imageVersionRef = ref()

const tableData = ref<ruleProps[]>()
const listQuery = reactive({
    pageNo: 1,
    pageSize: 10,
    total: 0
})

// 每页新条数
const sizeChange = (val: number) => {
    listQuery.pageSize = val
    init()
}

// 新页数
const currentChange = (val: number) => {
    listQuery.pageNo = val
    init()
}

const imageVersion = (id: number) => {
    imageVersionRef.value.imageVersionId = id
    imageVersionRef.value.initVersion(id)
    imageVersionTableDialog.value = true
}

const addData = () => {
    imageServiceFormRef.value.title = '新增服务镜像';
    imageServiceDialog.value = true;
}

const editData = (row: any) => {
    imageServiceFormRef.value.formData = row
    imageServiceFormRef.value.title = '编辑服务镜像'
    imageServiceDialog.value = true
}
const deleteData = (id: number) => {
    ElMessageBox.confirm('确定删除吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const res: any = await deleteImageService(id)
        if (res.code === 200) {
            ElMessage.success('删除成功')
            init()
        }
    })
}

const getImageServiceData = async (formData: ruleProps) => {
    if (!formData.id) {
        const res: any = await addImageService(formData)
        if (res.code === 200) {
            ElMessage.success('添加成功')
            init()
            imageServiceDialog.value = false
        }
    } else {
        const res: any = await updateImageService(formData)
        if (res.code === 200) {
            ElMessage.success('修改成功')
            imageServiceDialog.value = false
            init()
        }
    }
}

const init = async () => {
    loading.value = true
    const res: any = await getImageService(listQuery)
    if (res.code === 200) {
        loading.value = false
        tableData.value = res.data.records
        listQuery.total = res.data.total
    }
}

init()

</script>
 
<style lang = "scss" scoped>
</style>