<template>
  <div class="page" v-if="data">
    <a-page-header
      style="background-color: #ffffff"
      :title="data.appName"
      class="ws-margin-bottom-20"
      @back="() => $router.go(-1)"
    >
      <template #extra>
        <a-button key="3">收藏</a-button>
        <a-button key="2">打赏</a-button>
      </template>
      <div class="content">
        <a-descriptions :column="3">
          <a-descriptions-item label="开发者">
            <span class="ele-text-placeholder">{{ data.nickname }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="下载次数">
            <span class="ele-text-placeholder">{{ data.clicks }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="收藏次数">
            <span class="ele-text-placeholder">{{ data.clicks }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="插件ID">
            <span class="ele-text-placeholder">{{
              data.packageName || '无'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="包体积">
            <span class="ele-text-placeholder">483.6KB</span>
          </a-descriptions-item>
          <a-descriptions-item label="版本">
            <span class="ele-text-placeholder">2.0.34</span>
          </a-descriptions-item>
          <a-descriptions-item label="发布时间">
            <span class="ele-text-placeholder">{{
              timeAgo(data.updateTime)
            }}</span>
          </a-descriptions-item>
        </a-descriptions>
        <div class="edit-md">
          <!-- 编辑器 -->
          <template v-if="data.content">
            <byte-md-viewer :value="data.content" :plugins="plugins" />
          </template>
          <template v-else>
            {{ data.comments }}
          </template>
        </div>
      </div>
    </a-page-header>

    <a-card
      title="应用截图"
      :bordered="false"
      v-if="data.images"
      :body-style="{ padding: '16px', overflow: 'hidden' }"
      class="ws-margin-bottom-20"
    >
      <a-space>
        <template v-for="(item, index) in JSON.parse(data.images)" :key="index">
          <a-image
            v-if="data.appType === 'web'"
            :item-style="{ width: '150px', height: '99px' }"
            :src="item.url"
          />
          <a-image
            v-if="data.appType === 'mp-weixin'"
            :width="200"
            :src="item.url"
          />
        </template>
      </a-space>
    </a-card>
    <a-card
      title="评论列表"
      :bordered="false"
      :body-style="{ padding: '16px' }"
      class="ws-margin-bottom-20"
    >
      暂无评论
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import 'bytemd/dist/index.min.css';
  import { ref, watch } from 'vue';
  import 'github-markdown-css/github-markdown-light.css';
  // import TinymceEditor from '@/components/TinymceEditor/index.vue';
  import highlight from '@bytemd/plugin-highlight';
  // 中文语言文件
  // import zh_Hans from 'bytemd/locales/zh_Hans.json';
  // // 链接、删除线、复选框、表格等的插件
  import gfm from '@bytemd/plugin-gfm';
  // // 插件的中文语言文件
  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
  // // 预览界面的样式，这里用的 github 的 markdown 主题
  import 'github-markdown-css/github-markdown-light.css';
  import {
    PlusOutlined,
    SearchOutlined,
    DeleteOutlined,
    EyeOutlined,
    EyeInvisibleOutlined,
    ExclamationCircleOutlined,
    RightCircleOutlined,
    LeftCircleOutlined
  } from '@ant-design/icons-vue';
  import { App } from '@/api/market/model';
  import { timeAgo } from 'ele-admin-pro';
  import { pageUsers } from '@/api/system/user';

  const props = defineProps<{
    // 应用 id
    title?: String | undefined;
    data?: App | null;
  }>();

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

  // const showAppSecret = ref(false);
  // 编辑器内容，双向绑定
  // const content = ref('');
  // const image = [
  //   'https://store.antdv.com/pro/assets/pro-live-1.2bedf34f.png',
  //   'https://store.antdv.com/pro/assets/pro-live-6.3c37c644.png',
  //   'https://store.antdv.com/pro/assets/pro-live-3.5fbf1ac3.png',
  //   'https://store.antdv.com/pro/assets/pro-live-4.aa85278e.png',
  //   'https://store.antdv.com/pro/assets/pro-live-3.5fbf1ac3.png',
  //   'https://store.antdv.com/pro/assets/pro-live-3.5fbf1ac3.png'
  // ];
  // const disabled = ref(false);
  // 是否是修改
  const isUpdate = ref(false);
  // const docsContentId = ref(0);
  // 选中数据
  // const current = ref<App | null>(null);

  const getTabData = () => {
    if (props.title == '成员管理') {
      pageUsers({}).then((res) => {
        console.log(res);
      });
    }
  };

  // 监听应用 id 变化
  watch(
    () => props.title,
    (title) => {
      console.log(title);
      getTabData();
      isUpdate.value = true;
    }
  );
</script>

<script lang="ts">
  export default {
    name: 'AppDetailContent'
  };
</script>
<style lang="less" scoped>
  .content {
    padding: 10px 20px;
    min-height: 200px;
    .edit-md {
      margin-top: 50px;
    }
  }
  .screenshot {
    margin: auto !important;
  }
</style>
