<template>
  <a-descriptions title="基本信息" :column="2" bordered>
    <template #extra>
      <a @click="openEdit">编辑</a>
    </template>
    <a-descriptions-item
      label="Logo"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <ele-image-upload
        v-model:value="logo"
        :disabled="true"
        :item-style="{ width: '90px', height: '90px' }"
        :limit="1"
      />
    </a-descriptions-item>
    <a-descriptions-item
      label="二维码"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <ele-image-upload
        v-model:value="appQrcode"
        :disabled="true"
        :item-style="{ width: '90px', height: '90px' }"
        :limit="1"
      />
    </a-descriptions-item>
    <a-descriptions-item
      label="名称"
      :labelStyle="{ width: '200px', color: '#808080' }"
      >{{ data.appName }}</a-descriptions-item
    >
    <a-descriptions-item
      label="状态"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <a-badge status="processing" :text="data.appStatus" />
    </a-descriptions-item>
    <a-descriptions-item
      label="TenantId"
      :labelStyle="{ width: '200px', color: '#808080' }"
      >{{ data.tenantCode }}</a-descriptions-item
    >
    <a-descriptions-item
      label="标识"
      :labelStyle="{ width: '200px', color: '#808080' }"
      >{{ data.appCode }}</a-descriptions-item
    >
    <a-descriptions-item
      label="AppSecret"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <a @click="openAppSecretForm">重置</a>
      <!-- 编辑弹窗 -->
      <AppSecretForm v-model:visible="showAppSecretForm" :app-id="data.appId" />
    </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' }"
    >
      <a @click="openNew(`${data.appUrl}`)">{{ data.appUrl }}</a>
    </a-descriptions-item>
    <a-descriptions-item
      label="Git仓库地址"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <a @click="openNew(`${data.gitUrl}`)" v-if="data.gitUrl">
        <GithubOutlined style="font-size: 20px" />
      </a>
    </a-descriptions-item>
    <a-descriptions-item
      label="项目类型"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      APP
    </a-descriptions-item>
    <a-descriptions-item
      label="开发者"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.developer }}
    </a-descriptions-item>
    <a-descriptions-item
      label="是否作为案例展示"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.showCase ? '是' : '否' }}
      <!--      <a-switch size="small" :checked="data.showCase" />-->
    </a-descriptions-item>
    <a-descriptions-item
      label="是否推荐到首页"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      {{ data.showIndex ? '是' : '否' }}
      <!--      <a-switch size="small" :checked="data.showIndex" />-->
    </a-descriptions-item>
    <a-descriptions-item
      label="描述"
      :span="2"
      layout="vertical"
      :labelStyle="{ width: '200px', color: '#808080' }"
    >
      <span class="ele-text-secondary">{{ data.comments }}</span>
    </a-descriptions-item>
    <template v-for="(item, index) in appField" :key="index">
      <a-descriptions-item
        :label="item.name"
        :span="2"
        layout="vertical"
        :labelStyle="{ width: '200px', color: '#808080' }"
      >
        <byte-md-viewer :value="decrypt(item.comments)" :plugins="plugins" />
      </a-descriptions-item>
    </template>
  </a-descriptions>
  <!-- 编辑弹窗 -->
  <AppInfoEdit v-model:visible="showEdit" :data="data" @done="reload" />
</template>
<script lang="ts" setup>
  import { App } from '@/api/oa/app/model';
  import { ref } from 'vue';
  import AppSecretForm from './app-secret-form.vue';
  import AppInfoEdit from './app-info-edit.vue';
  import { AppField } from '@/api/oa/app/field/model';
  import { decrypt, openNew } from '@/utils/common';
  import gfm from '@bytemd/plugin-gfm';
  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
  import highlight from '@bytemd/plugin-highlight';
  import { GithubOutlined } from '@ant-design/icons-vue';

  defineProps<{
    data: App;
    logo: [] | any;
    appField: AppField[];
    appQrcode: any | undefined;
  }>();

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

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

  const openAppSecretForm = () => {
    showAppSecretForm.value = true;
  };

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

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

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