<!-- 服务器详情页 -->
<template>
	<el-descriptions :column="2" border>
		<el-descriptions-item label="名称">{{ detail.name }}</el-descriptions-item>
		<el-descriptions-item label="类型">{{ detail.types }}</el-descriptions-item>
		<el-descriptions-item label="地址">{{ detail.addr }}</el-descriptions-item>
		<el-descriptions-item label="状态">{{ detail.status ? '启动' : '未启动' }}</el-descriptions-item>
		<el-descriptions-item label="开启TLS">{{ detail.isTls ? '是' : '否' }}</el-descriptions-item>
		<el-descriptions-item label="认证方式">
			{{ detail.authType === 1 ? 'Basic' : detail.authType === 2 ? 'AccessToken' : detail.authType === 3 ? '证书' : '未知' }}
		</el-descriptions-item>
		<el-descriptions-item v-if="detail.authType === 2" label="AccessToken">{{ detail.accessToken }}</el-descriptions-item>
		<el-descriptions-item v-if="detail.authType === 1" label="用户">{{ detail.authUser }}</el-descriptions-item>
		<el-descriptions-item v-if="detail.authType === 1" label="密码">{{ detail.authPasswd }}</el-descriptions-item>
		<el-descriptions-item label="正则表达式">{{ detail.register ? JSON.parse(detail.register).regex : '' }}</el-descriptions-item>
		<el-descriptions-item label="协议">{{ detail.protocol ? JSON.parse(detail.protocol).name : '' }}</el-descriptions-item>
		<el-descriptions-item label="协议参数">{{ detail.protocol ? JSON.parse(detail.protocol).options : '' }}</el-descriptions-item>
		<el-descriptions-item label="修改状态">
			<el-switch :loading="loading" :before-change="onChangeStatus" :active-value="1" :inactive-value="0" size="small" v-model="detail.status" />
		</el-descriptions-item>
		<el-descriptions-item label="创建时间">{{ detail.createdAt }}</el-descriptions-item>
	</el-descriptions>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import api from '/@/api/network'

const loading = ref(false)

const emit = defineEmits(['update:detail'])
const props = defineProps({
	detail: {
		type: Object,
		default: () => {},
	},
})

// 禁用状态
const onChangeStatus = () => {
	loading.value = true
	const status = props.detail.status ? 0 : 1
	return new Promise(() => {
		api.server
			.changeServerStatus({ id: props.detail.id, status })
			.then(() => {
				ElMessage.success(props.detail.status ? '已启动' : '未启动')
				emit('update:detail', { ...props.detail, status })
			})
			.finally(() => {
				loading.value = false
			})
	})
}
</script>
