<template>
  <a-descriptions title="基本信息" :column="2" bordered>
    <template #extra>
      <a @click="openEdit">编辑</a>
    </template>
    <a-descriptions-item
      label="公网IP"
      :labelStyle="{ width: '200px', color: '#808080' }"
      >
      <div style="min-width: 200px">{{ data.code }}</div>
    </a-descriptions-item
    >
    <a-descriptions-item
      label="状态"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <div style="min-width: 200px"><a-badge status="processing" :text="data.status" /></div>
    </a-descriptions-item>
    <a-descriptions-item
      label="品牌厂商"
      :labelStyle="{ width: '200px', color: '#808080' }"
      >{{ data.brand }}</a-descriptions-item
    >
    <a-descriptions-item
      label="描述"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.name }}
    </a-descriptions-item>
    <a-descriptions-item
      label="所属企业"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.companyName }}
    </a-descriptions-item>
    <a-descriptions-item
      label="服务器配置"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.configuration }}
    </a-descriptions-item>
    <a-descriptions-item
      label="宝塔面板"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.panel }} <a style="margin-left: 12px" @click="openNew(`${data.panel}`)"><ExportOutlined /></a>
    </a-descriptions-item>
    <a-descriptions-item
      label="开放端口"
      :span="2"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <a-tag v-for="item in data.openPort.split(',')">
        {{ item }}
      </a-tag>
    </a-descriptions-item>
    <a-descriptions-item
      label="宝塔面板账号"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.panelAccount }}
    </a-descriptions-item>
    <a-descriptions-item
      label="宝塔API接口秘钥"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <span>****</span>
    </a-descriptions-item>
    <a-descriptions-item
      label="宝塔面板密码"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.panelPassword }}
    </a-descriptions-item>
    <a-descriptions-item
      label="排序"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.sortNumber }}
    </a-descriptions-item>
    <a-descriptions-item
      label="备注"
      layout="vertical"
      :span="2"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <byte-md-viewer :value="data.comments" />
    </a-descriptions-item>
  </a-descriptions>
  <!-- 编辑弹窗 -->
  <AssetsInfoEdit v-model:visible="showEdit" :data="data" @done="reload" />
</template>
<script lang="ts" setup>
  import { Assets } from '@/api/oa/assets/model';
  import { ref } from 'vue';
  import AssetsInfoEdit from './assets-info-edit.vue';
  import { ExportOutlined } from '@ant-design/icons-vue';
  import {openNew} from "@/utils/common";

  defineProps<{
    data: Assets;
    logo: [] | any;
    assetsQrcode: any | undefined;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
  }>();

  // 是否显示编辑弹窗
  const showEdit = ref(false);
  const showAssetsSecretForm = ref<boolean>(false);

  const openAssetsSecretForm = () => {
    showAssetsSecretForm.value = true;
  };

  /* 打开编辑弹窗 */
  const openEdit = () => {
    showEdit.value = true;
  };

  const reload = () => {
    emit('done');
  };
</script>
