<template>
    <a-modal :open="modal.open" :title="modal.title" :confirm-loading="modal.confirmLoading" :after-close="onAfterClose"
        @ok="handleOk" @cancel="handleCancel" width="800px">
        <a-card>
            <a-form ref="formRef" scroll-to-first-error :model="formData" :rules="formRules">
                <a-divider>基础信息</a-divider>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <a-form-item label="主机名称" name="name">
                            <a-input v-model:value="formData.name" placeholder="请输入主机名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="区域" name="centerID">
                             <a-select v-model:value="formData.centerID" placeholder="请选择区域">
                                <a-select-option v-for="item in areaList" :value="item.id">{{ item.name }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="部署位置" name="deploymentLocation">
                            <a-input v-model:value="formData.deploymentLocation" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="描述" name="description">
                            <a-textarea v-model:value="formData.description" rows="1" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="状态" name="status">
                            <a-select v-model:value="formData.status" placeholder="请选择状态">
                                <a-select-option value="active">启用</a-select-option>
                                <a-select-option value="inactive">停用</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="内网IP" name="intranetIP">
                            <a-input v-model:value="formData.intranetIP" placeholder="192.168.x.x" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="公网IP" name="networkIP">
                            <a-input v-model:value="formData.networkIP" placeholder="x.x.x.x" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="开始时间" name="startAt">
                            <a-date-picker v-model:value="formData.startAt" format="YYYY-MM-DD HH:mm" show-time />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="结束时间" name="endAt">
                            <a-date-picker v-model:value="formData.endAt" format="YYYY-MM-DD HH:mm" show-time />
                        </a-form-item>
                    </a-col>
                </a-row>

                <!-- 硬件配置 -->
                <a-divider>硬件配置</a-divider>
                <a-row :gutter="16">
                    <a-col :span="8">
                        <a-form-item label="CPU数量" name="cpuNum">
                            <a-input-number v-model:value="formData.cpuNum" style="width: 100%" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="CPU类型" name="cpuType">
                            <a-input v-model:value="formData.cpuType" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="内存 (GB)" name="memory">
                            <a-input-number v-model:value="formData.memory" style="width: 100%" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="内存型号" name="memoryType">
                            <a-input v-model:value="formData.memoryType" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="系统盘 (GB)" name="systemDisk">
                            <a-input-number v-model:value="formData.systemDisk" style="width: 100%" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="系统盘类型" name="systemDiskType">
                            <a-input v-model:value="formData.systemDiskType" placeholder="如 SSD, HDD" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="数据盘 (GB)" name="dataDisk">
                            <a-input-number v-model:value="formData.dataDisk" style="width: 100%" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="数据盘类型" name="dataDiskType">
                            <a-input v-model:value="formData.dataDiskType" />
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-form-item label="数据盘是否可挂载" name="dataDiskCanMount">
                    <a-switch v-model:checked="formData.dataDiskCanMount" />
                </a-form-item>

                <!-- GPU & 驱动 -->
                <a-divider>GPU 与驱动</a-divider>
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="GPU 驱动版本" name="gpuDriver">
                            <a-input v-model:value="formData.gpuDriver" placeholder="如 535.129.03" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="CUDA 版本" name="cudaVersion">
                            <a-input v-model:value="formData.cudaVersion" placeholder="如 12.2" />
                        </a-form-item>
                    </a-col>
                </a-row>

                <!-- 带宽 -->
                <a-divider>网络带宽</a-divider>
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="上行带宽" name="bandWidthUp">
                            <a-input-number v-model:value="formData.bandWidthUp" style="width: 100%" :min="0">
                                <template #addonAfter>
                                    <a-select v-model:value="formData.bandWidthUnitUp" 
                                        default-value="Mbps" style="width: 80px;">
                                        <a-select-option value="Mbps">Mbps</a-select-option>
                                        <a-select-option value="Gbps">Gbps</a-select-option>
                                    </a-select>
                                </template>
                            </a-input-number>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="下行带宽" name="bandWidthDown">
                            <a-input-number v-model:value="formData.bandWidthDown" style="width: 100%" :min="0">
                                <template #addonAfter>
                                    <a-select v-model:value="formData.bandWidthUnitDown" default-value="Mbps" style="width: 80px;">
                                        <a-select-option value="Mbps">Mbps</a-select-option>
                                        <a-select-option value="Gbps">Gbps</a-select-option>
                                    </a-select>
                                </template>
                            </a-input-number>
                        </a-form-item>
                    </a-col>
                </a-row>

                <!-- 价格 -->
                <a-divider>计费信息</a-divider>
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="日付价格 (元)" name="dailyPrice">
                            <a-input-number v-model:value="formData.dailyPrice" style="width: 100%" :min="0"
                                :step="0.01" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="周付价格 (元)" name="weekPrice">
                            <a-input-number v-model:value="formData.weekPrice" style="width: 100%" :min="0"
                                :step="0.01" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="月付价格 (元)" name="monthlyPrice">
                            <a-input-number v-model:value="formData.monthlyPrice" style="width: 100%" :min="0"
                                :step="0.01" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="按时计费 (元/小时)" name="payOnTime">
                            <a-input-number v-model:value="formData.payOnTime" style="width: 100%" :min="0"
                                :step="0.01" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>
    </a-modal>
</template>

<script setup>
import { cloneDeep } from 'lodash-es'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
import { ref } from 'vue'
import dayjs from 'dayjs'
const emit = defineEmits(['ok'])
const areaList=ref([])
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRef, formRules, formRecord, formData, resetForm } = useForm()
formData.value.computingCards = []
formRules.value = {
    name: { required: true, message: '请输入标题' },
}

/**
 * 新建
 */
function handleCreate() {
    getAreatList()
    showModal({
        type: 'create',
        title: '新建',
    })
}

/**
 * 编辑
 */
function handleEdit(record = {}) {
    showModal({
        type: 'edit',
        title: '编辑',
    })
    getAreatList()
    formRecord.value = record
    formData.value = cloneDeep(record)
}

function getAreatList() {
    apis.host.getRegionList().then((res) => {
      areaList.value=res.data
    })
}
/**
 * 确定
 */
function handleOk() {
    formRef.value
        .validateFields()
        .then(async (values) => {
            try {
                showLoading()
                const params = {
                    ...values,
                }
                let result = null
                switch (modal.value.type) {
                    case 'create':
                        result = await apis.host.createPage(params).catch(() => {
                            throw new Error()
                        })
                        break
                    case 'edit':
                        result = await apis.host.updatePage(formRecord.value.id, params).catch(() => {
                            throw new Error()
                        })
                        break
                }
                hideLoading()
                if (true === result?.success) {
                    hideModal()
                    emit('ok')
                }
            } catch (error) {
                hideLoading()
            }
        })
        .catch(() => {
            hideLoading()
        })
}

/**
 * 取消
 */
function handleCancel() {
    hideModal()
}

/**
 * 关闭后
 */
function onAfterClose() {
    resetForm()
}

defineExpose({
    handleCreate,
    handleEdit,
})
</script>

<style lang="less" scoped></style>
