<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="75%"
    :visible="visible"
    :confirm-loading="loading"
    :maxable="maxAble"
    :title="'服务器详情'"
    :body-style="{ paddingBottom: '36px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <a-form
      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
    >
      <div class="base-form" style="margin-bottom: 20px">
        <a-descriptions :title="assets.name" bordered>
          <a-descriptions-item label="客户名称">
            {{ assets.companyName }}
          </a-descriptions-item>
          <a-descriptions-item label="服务器名称">
            {{ assets.name }}
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag v-if="assets.status === '0'" color="green">正常</a-tag>
            <a-tag v-if="assets.status === '1'" color="red">过期</a-tag>
            <a-tag v-if="assets.status === '2'" color="purple">不再续</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="服务器IP">
            {{ assets.code }}
          </a-descriptions-item>
          <a-descriptions-item label="宝塔面板">
            <a href="#" @click="openUrl(assets)">{{ assets.panel }}</a>
          </a-descriptions-item>
          <a-descriptions-item label="宝塔账号">
            {{ assets.panelAccount }}
          </a-descriptions-item>
          <a-descriptions-item label="宝塔密码">
            <span v-role="['admin']">{{ assets.panelPassword }}</span>
            <span v-any-role="['user', 'guest', 'superAdmin', 'developer']"
              >****</span
            >
          </a-descriptions-item>
          <a-descriptions-item label="品牌厂商">
            {{ assets.brand }}
          </a-descriptions-item>
          <a-descriptions-item label="服务器配置">
            {{ assets.configuration }}
          </a-descriptions-item>
          <a-descriptions-item label="开发端口">
            {{ assets.openPort }}
          </a-descriptions-item>
          <a-descriptions-item label="有效期">
            <div v-if="assets.startTime && assets.endTime">
              <div class="ele-text-info">{{ assets.startTime }}</div>
              <div v-html="getEndTime(assets.endTime)"></div>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="服务器账号">
            <span class="ele-text-danger">root</span>
          </a-descriptions-item>
          <a-descriptions-item label="服务器密码">
            <span class="ele-text-danger" v-role="['admin']">{{
              assets.password
            }}</span>
            <span v-any-role="['user', 'guest', 'superAdmin', 'developer']"
              >****</span
            >
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ timeAgo(assets.createTime) }}
          </a-descriptions-item>
          <a-descriptions-item label="排序">
            {{ assets.sortNumber }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="base-form" style="margin-bottom: 20px">
        <a-descriptions title="服务器状态" bordered v-if="assets.systemTotal">
          <a-descriptions-item label="操作系统信息">
            {{ assets.systemTotal.system }}
          </a-descriptions-item>
          <a-descriptions-item label="面板版本">
            {{ assets.systemTotal.version }}
          </a-descriptions-item>
          <a-descriptions-item label="已不间断运行">
            {{ assets.systemTotal.time }}
          </a-descriptions-item>
          <a-descriptions-item label="CPU 核心数">
            {{ assets.systemTotal.cpuNum }}
          </a-descriptions-item>
          <a-descriptions-item label="负载状态">
            {{ assets.systemTotal.cpuRealUsed }}
          </a-descriptions-item>
          <a-descriptions-item label="物理内存容量(MB)">
            {{ assets.systemTotal.memTotal }}
          </a-descriptions-item>
          <a-descriptions-item label="已使用的物理内存(MB)">
            {{ assets.systemTotal.memRealUsed }}
          </a-descriptions-item>
          <a-descriptions-item label="可用的物理内存(MB)">
            {{ assets.systemTotal.memFree }}
          </a-descriptions-item>
          <a-descriptions-item label="缓存化的内存(MB)">
            {{ assets.systemTotal.memCached }}
          </a-descriptions-item>
          <a-descriptions-item label="系统缓冲 (MB)">
            {{ assets.systemTotal.memBuffers }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <!--      <a-space v-if="assets.systemTotal">-->
      <!--        <div class="base-form" style="margin-bottom: 20px">-->
      <!--          <a-tabs v-model:activeKey="activeKey">-->
      <!--            <a-tab-pane key="1" tab="系统信息" force-render>-->
      <!--              &lt;!&ndash;            <byte-md-viewer :value="assets.comments" :plugins="plugins" />&ndash;&gt;-->

      <!--            </a-tab-pane>-->
      <!--          </a-tabs>-->
      <!--        </div>-->
      <!--      </a-space>-->
    </a-form>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { getEndTime } from '@/utils/common';
  import { ref, reactive, watch } from 'vue';
  import { Form } from 'ant-design-vue';
  import { assignObject, timeAgo } from 'ele-admin-pro';
  import type { Assets } from '@/api/oa/assets/model';
  import { getAssets } from '@/api/oa/assets';

  import 'bytemd/dist/index.min.css';
  import 'github-markdown-css/github-markdown-light.css';
  // // 链接、删除线、复选框、表格等的插件
  import gfm from '@bytemd/plugin-gfm';
  // // 插件的中文语言文件
  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
  // 中文语言文件
  import 'bytemd/dist/index.min.css';
  import highlight from '@bytemd/plugin-highlight-ssr';
  import 'highlight.js/styles/default.css';

  const useForm = Form.useForm;

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: Assets | null;
  }>();

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

  // 插件
  const plugins = ref([
    gfm({
      locale: zh_HansGfm
    }),
    highlight()
  ]);

  // 用户信息
  const assets = reactive<Assets>({
    code: '',
    createTime: '',
    startTime: '',
    endTime: '',
    name: '',
    brand: undefined,
    account: '',
    password: '',
    configuration: '',
    panelAccount: '',
    panelPassword: '',
    panel: '',
    financeAmount: 0,
    financeYears: 0,
    financeRenew: 0,
    financeCustomerName: '',
    financeCustomerContact: '',
    financeCustomerPhone: '',
    brandAccount: '',
    brandPassword: '',
    openPort: '',
    comments: '',
    root: 'root',
    userId: 0,
    companyName: '',
    nickname: '',
    sortNumber: undefined,
    status: undefined,
    type: '',
    assetsId: 0
  });

  // 请求状态
  const loading = ref(true);
  // 是否显示最大化切换按钮
  const maxAble = ref(true);
  // 选项卡位置
  const activeKey = ref('1');
  const { resetFields } = useForm(assets);
  const users = ref<[]>([]);

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  /* 打开外部链接 */
  const openUrl = (record) => {
    window.open(record.panel);
  };

  const query = () => {
    const assetsId = Number(props.data?.assetsId);
    getAssets(assetsId).then((res) => {
      console.log(res);
      assets.systemTotal = JSON.parse(res.systemTotal);
    });
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.data) {
          loading.value = false;
          assignObject(assets, props.data);
          query();
        }
      } else {
        resetFields();
      }
    }
  );
</script>
<style lang="less">
  .tab-pane {
    min-height: 100px;
  }
  .important {
    font-weight: bold;
  }
</style>
