<template>
  <a-space style="margin-bottom: 20px">
    <a-button @click="openEdit">后台管理</a-button>
  </a-space>
  <template v-if="item">
    <a-descriptions :column="2" bordered>
      <a-descriptions-item
        label="项目名称"
      >{{ item.websiteName }}
      </a-descriptions-item
      >
      <a-descriptions-item
        label="状态"
        :labelStyle="{ width: '200px', color: '#808080' }"
      >
        <a-tag v-if="data.appStatus === '开发中'" color="red">开发中</a-tag>
        <a-tag v-if="data.appStatus === '已上架'" color="success">运行中</a-tag>
        <a-tag v-if="data.appStatus === '维护中'" color="orange"></a-tag>
        <a-tag v-if="data.appStatus === '已下架'">已下线</a-tag>
        <a-tag v-if="!data.appStatus">未分配</a-tag>
      </a-descriptions-item>
      <a-descriptions-item
        label="Logo"
        layout="vertical"
        :labelStyle="{ width: '200px', color: '#808080' }"
      >
        <a-avatar :src="item.websiteLogo" shape="square" :size="100"/>
      </a-descriptions-item>
      <a-descriptions-item
        label="开发进度"
        :labelStyle="{ width: '200px', color: '#808080' }"
      >
        <div class="w-24">
          <a-progress :percent="data.progress" size="small" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item
        label="域名"
        :labelStyle="{ width: '200px', color: '#808080' }"
      >{{ item.domain }}
      </a-descriptions-item
      >
      <a-descriptions-item
        label="TenantId"
        :labelStyle="{ width: '200px', color: '#808080' }"
      >{{ item.tenantId }}
      </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>-->
      <!--      &lt;!&ndash; 编辑弹窗 &ndash;&gt;-->
      <!--      <AppSecretForm v-model:visible="showAppSecretForm" :app-id="data.appId" />-->
      <!--    </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 ? '是' : '否' }}-->
      <!--      &lt;!&ndash;      <a-switch size="small" :checked="data.showCase" />&ndash;&gt;-->
      <!--    </a-descriptions-item>-->
      <!--    <a-descriptions-item-->
      <!--      label="是否推荐到首页"-->
      <!--      layout="vertical"-->
      <!--      :labelStyle="{ width: '200px', color: '#808080' }"-->
      <!--    >-->
      <!--      {{ data.showIndex ? '是' : '否' }}-->
      <!--      &lt;!&ndash;      <a-switch size="small" :checked="data.showIndex" />&ndash;&gt;-->
      <!--    </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>-->
    </a-descriptions>
  </template>

  <!-- 编辑弹窗 -->
  <AppInfoEdit v-model:visible="showEdit" :data="data" @done="reload"/>
</template>
<script lang="ts" setup>
import {ref, reactive, watch} 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 {openNew} from '@/utils/common';
import {GithubOutlined} from '@ant-design/icons-vue';
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {Project} from "@/api/project/project/model";
import {getCmsWebsiteAll} from "@/api/cms/cmsWebsite";

const props = defineProps<{
  data: Project;
  logo: [] | any;
  appField: AppField[];
  appQrcode: any | undefined;
}>();

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

// 是否显示编辑弹窗
const showEdit = ref(false);
const showAppSecretForm = ref<boolean>(false);
const item = ref<CmsWebsite>();
const appQrcodeContent = ref<string>(props.appQrcode);
const openAppSecretForm = () => {
  showAppSecretForm.value = true;
};

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

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

watch(
  () => props.data.websiteId,
  (websiteId) => {
    if (websiteId) {
      getCmsWebsiteAll(websiteId).then(data => {
        item.value = data;
        console.log(data, 'data...')
      })
    }
  },
  {immediate: true}
);

</script>
