<template>
  <UserCard :form="form" title="社区" desc="分享研发成果 交流技术经验" :avatar="user?.avatar"/>
  <CardList :list="list" :disabled="disabled" @done="onSearch" />
</template>
<script setup lang="ts">
import type {ApiResult, PageResult} 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, openSpmUrl} from "~/utils/common";
import type {Article} from "~/api/cms/article/model";
import useFormData from "~/utils/use-form-data";
import LikeArticle from "~/pages/detail/components/LikeArticle.vue";
import CardList from "~/pages/ask/components/CardList.vue";
import type {Company, CompanyParam} from "~/api/system/company/model";
import type {User} from "~/api/system/user/model";

// 引入状态管理
const route = useRoute();
const website = useWebsite();
const user = useUser();
const breadcrumb = ref<BreadcrumbItem>();
const previousArticle = ref<Article>();
const nextArticle = ref<Article>();
const disabled = ref<boolean>(false);
const showContent = ref<boolean>();
const showPassword = ref<boolean>();
const list = ref<Article[]>([]);
const page = ref<number>(1);

// 配置信息
const {form, assignFields} = useFormData<Article>({
  // 文章id
  articleId: undefined,
  // 文章标题
  title: undefined,
  // 分类类型
  type: undefined,
  // 展现方式
  showType: undefined,
  // 文章类型
  categoryId: undefined,
  // 文章分类
  categoryName: undefined,
  parentId: undefined,
  parentName: undefined,
  parentPath: undefined,
  // 封面图
  image: undefined,
  // 附件
  files: undefined,
  // 缩列图
  thumbnail: undefined,
  // 视频地址
  video: undefined,
  // 上传的文件类型
  accept: undefined,
  // 来源
  source: 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
});

// 搜索表单
const where = reactive<CompanyParam>({
  keywords: ''
});

// 验证密码
const checkPassword = async () => {
  const {data: response} = await useServerRequest<ApiResult<unknown>>('/cms/cms-article/checkArticlePassword', {
    query: {
      password: form?.password,
      password2: form.password2
    }
  })
  if (response.value?.code === 0) {
    showPassword.value = false;
    showContent.value = true;
  } else {
    ElMessage.error(response.value?.message);
  }
}


const onSearch = () => {
  if(!disabled.value){
    page.value++;
    reload(route.path);
  }
}

// 请求数据
// const reload = async (path: string) => {
//
//   if (response.value?.data) {
//     if (list.value.length < response.value?.data.count) {
//       disabled.value = false;
//       if (response.value?.data.list) {
//         list.value = list.value.concat(response.value?.data.list);
//       }
//     } else {
//       disabled.value = true;
//     }
//     if (response.value.data.count == 0) {
//       resultText.value = '暂无相关结果'
//     }
//   }
// }

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

  const {data: response} = await useServerRequest<ApiResult<PageResult<Article>>>('/cms/cms-article/page', {
    params: {
      page: page.value,
      limit: 8,
      userId: route.params.userId,
      keywords: where.keywords
    }
  })
  if(response.value?.data){
    if (list.value.length < response.value?.data.count) {
      disabled.value = false;
      if (response.value?.data.list) {
        list.value = list.value.concat(response.value?.data.list);
      }
    }else {
      disabled.value = true;
    }
  }

  const { data: userInfo } = await useServerRequest<ApiResult<User>>(`/system/user/getByUserId/${getIdBySpm(5)}`)
  console.log(userInfo.value)
  // if (response.value?.data) {
  //   assignFields(response.value.data)
  //   if (form.permission === 1) {
  //     console.log('登录可见')
  //     return;
  //   }
  //   if (form.permission === 2) {
  //     console.log('需要密码')
  //     showPassword.value = true;
  //     return;
  //   }
  //   form.parentPath = getSpmUrl(`/category`, form, form.articleId);
  //   console.log(form.parentPath)
  // }

  // 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>
