<template>
    <el-dialog v-model="props.mirrorDialog" :title="title" width="30%" :before-close="handleClose">
        <template #title>
            <div style="display: flex; justify-content: flex-start; align-items: center;">
                <div>{{ title }}</div>
                <el-alert style="width: 50%; margin-left: 40px;" title="选择镜像名后才能选择版本号" type="warning"
                    :closable="false" />
            </div>
        </template>

        <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
            <el-form-item prop="name" label="镜像名">
                <el-select v-model="formData.name" placeholder="请选择镜像名" @change="handleServiceChange">
                    <el-option v-for="item in serviceList" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item prop="contextPath" label="服务路径">
                <el-input v-model="formData.contextPath" placeholder="请输入服务路径" />
            </el-form-item>
            <el-form-item prop="version" label="版本">
                <el-select v-model="formData.id" :disabled="!versionList" placeholder="请填写对应镜像名选择版本"
                    @change="handleChange">
                    <el-option v-for="item in versionList" :key="item.id" :label="item.version" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="onConfirm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { getImageService, getImageVersion } from '@/services/api/imageService/index';

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

const emits = defineEmits(['update:mirrorDialog', 'mirrorData'])

const formData = ref({
    id: '',
    name: '',
    contextPath: '',
    version: '',
})

const versionList = ref([]) as any
const serviceList = ref([]) as any

const formRef = ref()
const title = ref('新增服务镜像')

const rules = ref({
    name: [{ required: true, message: '请输入镜像名', trigger: 'blur' }],
    // contextPath: [{ required: true, message: '请输入服务路径', trigger: 'blur' }],
})

const handleServiceChange = async () => {
    if (formData.value.name) {
        let imageId;
        serviceList.value.map((item: any) => {
            if (item.name == formData.value.name)
                imageId = item.id
        })
        const res: any = await getImageVersion({ imageId })
        if (res.code === 200) versionList.value = res.data
    }
}

const handleChange = (e: any) => {
    versionList.value.map((item: any) => {
        if (item.id == e) {
            formData.value.version = item.version
        }
    })
}

const initService = async () => {
    const res: any = await getImageService({ pageSize: 100 })
    if (res.code === 200) {
        serviceList.value = res.data.records
    }
}

const handleClose = () => {
    formRef.value?.resetFields()
    formData.value = {
        id: '',
        name: '',
        contextPath: '',
        version: '',
    }
    emits('update:mirrorDialog', false)
}

const onConfirm = () => {
    formRef.value?.validate((valid: Boolean, fields: any) => {
        if (valid) {
            emits('mirrorData', formData.value)
        } else {
            console.log('error submit!', fields)
        }
    })
}

defineExpose({
    formData,
    title,
    initService,
    handleClose
})
</script>
 
<style lang = "scss" scoped>
</style>