<!-- 文章详情 -->
<template>
  <PageBanner :form="form" />

  <div class="page-main md:w-screen-xl m-auto">
    <el-row :gutter="24">
      <el-col :span="18">
        <div class="leading-7 bg-white rounded-lg text-lg line-height-loose text-gray-600 content">
          <el-tabs
              v-model="activeName"
              type="card"
              class="demo-tabs"
              @tab-click="handleClick"
          >
            <el-tab-pane label="基本信息" name="base">基本信息</el-tab-pane>
            <el-tab-pane label="成员管理" name="users">成员管理</el-tab-pane>
            <el-tab-pane label="项目参数" name="param">项目参数</el-tab-pane>
            <el-tab-pane label="账号密码" name="domain">账号密码</el-tab-pane>
            <el-tab-pane label="开发文档" name="profile">协同文档</el-tab-pane>
            <el-tab-pane label="项目附件" name="annex">项目附件</el-tab-pane>
            <el-tab-pane label="项目工单" name="task">项目工单</el-tab-pane>
            <el-tab-pane label="应用截图" name="photo">应用截图</el-tab-pane>
            <el-tab-pane label="项目介绍" name="about">
              <div class="p-6 content" v-html="form?.content"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="p-4 leading-7 bg-white rounded-lg">
          点击排行
        </div>
        <div class="p-4 leading-7 bg-white rounded-lg mt-4">
          推荐文章
        </div>
      </el-col>
    </el-row>
  </div>

</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import type {Navigation} from "~/api/cms/navigation/model";
import {getIdBySpm, getSpmUrl, openSpmUrl} from "~/utils/common";
import type {Article} from "~/api/cms/article/model";
import useFormData from "~/utils/use-form-data";
import PageBanner from './components/PageBanner.vue';
import type {Company} from "~/api/system/company/model";
import type {App} from "~/api/oa/app/model";

// 引入状态管理
const route = useRoute();
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
const previousArticle = ref<Article>();
const nextArticle = ref<Article>();


// 配置信息
const { form, assignFields } = useFormData<App>({
  // 应用id
  appId: undefined,
  // 应用秘钥
  appSecret: '',
  enName: '',
  // 应用名称
  appName: '',
  // 上级id, 0是顶级
  parentId: undefined,
  // 应用编号
  appCode: '',
  // 应用图标
  appIcon: '',
  appQrcode: '',
  // 应用截图
  images: '',
  // 应用类型
  appType: '',
  appTypeMultiple: undefined,
  // 菜单类型
  menuType: undefined,
  // 应用地址
  appUrl: '',
  // 后台管理地址
  adminUrl: undefined,
  // 下载地址
  downUrl: undefined,
  serverUrl: undefined,
  callbackUrl: undefined,
  gitUrl: undefined,
  docsUrl: undefined,
  prototypeUrl: undefined,
  ipAddress: undefined,
  fileUrl: undefined,
  // 应用包名
  packageName: '',
  // 点击次数
  clicks: '',
  // 安装次数
  installs: '',
  // 项目介绍
  content: '',
  // 开发者(个人)
  developer: '',
  director: '',
  projectDirector: '',
  salesman: '',
  // 软件定价
  price: '',
  // 评分
  score: '',
  // 星级
  star: '',
  // 菜单组件地址
  component: '',
  // 菜单路由地址
  path: '',
  // 权限标识
  authority: '',
  // 打开位置
  target: '',
  // 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
  hide: undefined,
  // 菜单侧栏选中的path
  active: '',
  // 其它路由元信息
  meta: '',
  // 版本
  edition: '',
  // 版本号
  version: '',
  // 是否已安装
  isUse: undefined,
  // 排序
  sortNumber: undefined,
  // 备注
  comments: '',
  tenantName: '',
  companyName: '',
  // 租户编号
  tenantCode: '',
  // 租户id
  tenantId: undefined,
  // 创建时间
  createTime: '',
  appStatus: '开发中',
  // 状态
  status: undefined,
  // 发布者
  userId: '',
  // 发布者昵称
  nickname: '',
  // 子菜单
  children: [],
  // 权限树回显选中状态, 0未选中, 1选中
  checked: false,
  //
  key: undefined,
  //
  value: undefined,
  //
  parentIds: [],
  //
  openType: undefined,
  //
  search: undefined,
  // 成员管理
  users: [],
  // 项目需求
  requirement: '',
  file1: '[]',
  file2: '[]',
  file3: '[]',
  showCase: undefined,
  showIndex: undefined,
  recommend: undefined,
  categoryName: '',
  title: ''
});

// 请求数据
const reload = async () => {

  // 存在spm(优先级高)
  const { data: nav } = await useServerRequest<ApiResult<App>>('/oa/oa-app/' + getIdBySpm(5))
  if (nav.value?.data) {
    assignFields(nav.value.data)
    form.nickname = nav.value.data?.companyName;
    form.title = nav.value.data?.appName;
    form.categoryName = '应用详情';
  }

  // seo
  useHead({
    title: `${form.title} - ${website.value.websiteName}`,
    bodyAttrs: {
      class: "page-container",
    }
  });
  // 面包屑
  breadcrumb.value = form
}

watch(
    () => route.path,
    (path) => {
      console.log(path,'=>Path')

      reload();
    },
    { immediate: true }
);
</script>

<style lang="less">
.content {
  img {
    max-width: 100%;
  }
}
</style>
