<!-- 文章详情 -->
<template>
  <div class="xl:w-screen-xl m-auto py-4 mt-20">
    <el-page-header :icon="ArrowLeft" @back="goBack">
<!--      <template #breadcrumb>-->
<!--        <Breadcrumb :data="form" :categoryName="form?.categoryName" />-->
<!--      </template>-->
      <template #content>
        <span class="text-large font-600"> {{ page.title }} </span>
      </template>
      <el-row :gutter="24" class="mt-5">
        <el-col :span="18" :xs="24">
          <el-card shadow="hover" class="mb-5">
            <el-descriptions title="参数信息" :column="2" border>
              <el-descriptions-item :span="2" label="产品名称">{{page.title}}</el-descriptions-item>
              <el-descriptions-item v-if="form.isBuy" label="租户ID"><span class="text-orange-500">{{form.title}}</span></el-descriptions-item>
              <el-descriptions-item v-if="form.isBuy" label="插件ID"><span class="text-orange-500">{{form.menuId || '-'}}</span></el-descriptions-item>
              <el-descriptions-item label="控制台"><a class="cursor-pointer" @click="openUrl(`https://${form.domain}`)">{{form.domain}}</a></el-descriptions-item>
              <el-descriptions-item v-for="(item,index) in form.parameters" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
            </el-descriptions>
            <template v-if="form.accounts && form.accounts.length > 0">
              <div class="h-[24px]"></div>
              <el-descriptions title="登录账号" :column="1" border>
                <template  v-for="(item,index) in form.accounts" :key="index">
                  <el-descriptions-item :label="item.type" v-if="item.account">
                    还没有账号? <el-button type="text" @click="openSpmUrl(`/passport/regis`)">立即注册</el-button>
                  </el-descriptions-item>
                </template>
              </el-descriptions>
            </template>
            <template v-if="form.gits && form.gits.length > 0">
              <div class="h-[24px]"></div>
              <el-descriptions title="代码仓库" :column="1" border>
                <el-descriptions-item v-for="(item,index) in form.gits" :key="index" :label="item.title">
                  <el-input  v-model="item.domain" readonly />
                </el-descriptions-item>
              </el-descriptions>
            </template>
            <template v-if="form.files && form.files.length > 0">
              <div class="h-[24px]"></div>
              <el-descriptions title="图文详情" />
              <div v-for="(item,index) in JSON.parse(form.files)" :key="index" class="text item">
                <el-image
                    :src="item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="srcList"
                    :initial-index="4"
                    fit="contain"
                />
              </div>
            </template>
            <template v-if="form.content">
              <p v-html="form.content" class="content"></p>
            </template>
          </el-card>
          <!-- 产品评论 -->
          <Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments" />
        </el-col>
        <el-col :span="6" :xs="24">
          <el-card shadow="hover" class="mb-5">
            <template #header>
              <div class="card-header font-bold text-xl">
                <span>推荐产品</span>
              </div>
            </template>
            <!--          <el-space class="flex items-center">-->
            <!--            <div class="avatar">-->
            <!--              <el-avatar :size="55" :src="form.image"/>-->
            <!--            </div>-->
            <!--            <div class="flex flex-col">-->
            <!--              <span class="font-bold text-lg text-gray-600">{{ form.title }}</span>-->
            <!--              <span class="text-gray-400 pb-1 line-clamp-2">{{ form.comments }}</span>-->
            <!--            </div>-->
            <!--          </el-space>-->
          </el-card>
        </el-col>
      </el-row>
    </el-page-header>
  </div>

</template>
<script setup lang="ts">
import type {ApiResult, PageResult} from "~/api";
import { ArrowLeft } from '@element-plus/icons-vue'
import {useServerRequest} from "~/composables/useServerRequest";
import {useLayout, usePage, useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import {getIdBySpm, getNavIdByParamsId, openUrl} from "~/utils/common";
import useFormData from "~/utils/use-form-data";
import Comments from './components/Comments.vue';
import type {CompanyComment} from "~/api/system/companyComment/model";
import {getCmsArticle, pageCmsArticle} from "~/api/cms/cmsArticle";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";

// 引入状态管理
const route = useRoute();
const router = useRouter();
const page = usePage();
const layout = useLayout();
const category = ref<CmsNavigation[]>([]);
const i18n = useI18n();
const total = ref(0);
const list = ref<CmsArticle[]>([]);
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
const comments = ref<CompanyComment[]>([]);
const commentsTotal = ref(0);
const commentsPage = ref(1);
const navId = ref();
const activeName = ref();
const url =
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = ref<any[]>([]);

// 配置信息
const {form, assignFields} = useFormData<CmsArticle>({
  // 文章id
  articleId: undefined,
  // 文章模型
  model: undefined,
  // 文章标题
  title: undefined,
  // 分类类型
  type: undefined,
  // 展现方式
  showType: undefined,
  // 文章类型
  categoryId: undefined,
  // 文章分类
  categoryName: undefined,
  parentId: undefined,
  // 封面图
  image: undefined,
  // 附件
  files: undefined,
  // 附件
  fileList: [],
  // 缩列图
  thumbnail: undefined,
  // 视频地址
  video: undefined,
  // 上传的文件类型
  accept: undefined,
  // 来源
  source: undefined,
  // 标签
  tags: undefined,
  // 文章内容
  content: undefined,
  // 虚拟阅读量
  virtualViews: undefined,
  // 实际阅读量
  actualViews: undefined,
  // 访问权限
  permission: undefined,
  // 访问密码
  password: undefined,
  password2: undefined,
  // 用户ID
  userId: undefined,
  // 用户昵称
  nickname: undefined,
  // 账号
  username: undefined,
  // 用户头像
  // userAvatar: undefined,
  author: undefined,
  // 所属门店ID
  shopId: undefined,
  //
  likes: undefined,
  // 排序
  sortNumber: undefined,
  // 备注
  comments: undefined,
  // 状态
  status: undefined,
  // 创建时间
  createTime: undefined,
  // 更新时间
  updateTime: undefined,
  // 租户ID
  tenantId: undefined,
  // 租户名称
  tenantName: undefined,
  // 租户logo
  logo: undefined,
  // 详情页路径
  detail: undefined
});

// 搜索表单
const where = reactive<CmsArticleParam>({
  keywords: '',
  page: 1,
  limit: 20,
  status: 0,
  parentId: undefined,
  categoryId: undefined,
  lang: i18n.locale.value
});

const doComments = async (page: any) => {
  commentsPage.value = page;
  await reloadComments();
}

const goBack = () => {
  router.back(); // 返回上一页
}

// 加载评论
const reloadComments = async () => {
  const {data: commentsResponse} = await useServerRequest<ApiResult<PageResult<CompanyComment>>>('/system/company-comment/page', {
    params: {
      companyId: getIdBySpm(5),
      page: commentsPage.value,
      // status: 1
    }
  })
  if(commentsResponse.value && commentsResponse.value?.data){
    comments.value = commentsResponse.value?.data?.list
    commentsTotal.value = commentsResponse.value?.data?.count;
  }
}

// 读取导航详情
const reload = async () => {
  getCmsArticle(navId.value).then(data => {
    // 获取栏目信息
    page.value = data
    assignFields(data)
    layout.value.banner = data.banner;

    // 设置页面标题
    useSeoMeta({
      description: data.comments || data.title,
      keywords: data.title,
      titleTemplate: `${data?.title}` + ' - %s',
    })

    // 二级栏目分类
    // listCmsNavigation({
    //   parentId: data.parentId == 0 ? data.navigationId : data.parentId
    // }).then(categoryData => {
    //   category.value = categoryData;
    //   // 加载文章列表
    //   if(data.parentId == 0 && category.value.length > 0){
    //     where.parentId = data.navigationId;
    //   }else {
    //     where.categoryId = data.navigationId;
    //   }
    //   pageCmsArticle(where).then(response => {
    //     if(response){
    //       total.value = response?.count;
    //       list.value = response?.list;
    //     }
    //   })
    // })

  }).catch(err => {
    console.log(err,'加载失败...')
  })
}

watch(
    () => route.params.id,
    (id) => {
      navId.value = getNavIdByParamsId(id);
      reload();
    },
    { immediate: true }
);
</script>

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