<template>
  <!-- 主体部分 -->
  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600"> 产品详情 </span>
      </template>
      <template #extra>
      </template>

      <!-- 应用介绍 -->
      <PageBanner :form="page" @done="reload"/>

      <!-- 评分插件 -->
      <AppInfo :form="form"/>

      <!-- 应用截屏 -->
      <div id="screen-item" class="screen-item my-6">
        <el-descriptions class="mt-5" title="截屏"/>
        <el-scrollbar class="bg-white p-5">
          <div v-if="form.files" class="flex">
            <el-image
              v-for="(item,index) in JSON.parse(form.files)"
              :key="index"
              :initial-index="4"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              :src="item"
              :zoom-rate="1.2"
              class="scrollbar-item w-[240px] max-h-[625px] mr-4 mb-3"
              fit="contain"
            />
          </div>
        </el-scrollbar>
        <el-descriptions class="mt-5" title="详细介绍"/>
        <MdPreview id="preview-only" :modelValue="form.content || '暂无详细内容'" class="px-3"/>
      </div>

      <!-- 评分及评价 -->
      <Comments :comments="comments" :count="commentsTotal" :productId="form.companyId" @done="doComments"/>

      <div class="h-[100px]"></div>

    </el-page-header>
  </div>
</template>
<script setup lang="ts">
import {ArrowLeft, View, Monitor, Search, Cpu, Platform, Avatar, MoreFilled} from '@element-plus/icons-vue'
import type {ApiResult, PageResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {usePage} from "~/composables/configState";
import {getIdBySpm, getNavIdByParamsId, openUrl} from "~/utils/common";
import useFormData from "~/utils/use-form-data";
import PageBanner from './components/PageBanner.vue';
import AppInfo from './components/AppInfo.vue';
import Comments from './components/Comments.vue';
import type {CompanyComment} from "~/api/system/companyComment/model";
import {getCmsWebsiteAll} from "~/api/cms/cmsWebsite";
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
import {MdPreview} from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';

// 引入状态管理
const route = useRoute();
const router = useRouter();
const user = useUser();
const page = usePage();
const comments = ref<CompanyComment[]>([]);
const commentsTotal = ref(0);
const commentsPage = ref(1);
const navId = ref();
const srcList = ref<any[]>([]);

// 配置信息
const {form, assignFields} = useFormData<CmsWebsite>({
  // 站点ID
  websiteId: undefined,
  // 网站名称
  websiteName: undefined,
  // 网站标识
  websiteCode: undefined,
  // 网站LOGO
  websiteIcon: undefined,
  // 网站LOGO
  websiteLogo: undefined,
  // 网站LOGO(深色模式)
  websiteDarkLogo: undefined,
  // 网站类型
  websiteType: undefined,
  // 评分
  rate: undefined,
  // 点赞数
  likes: undefined,
  // 访问量
  clicks: undefined,
  // 下载量
  downloads: undefined,
  // 网站截图
  files: undefined,
  // 网站关键词
  keywords: undefined,
  // 域名前缀
  prefix: undefined,
  // 绑定域名
  domain: undefined,
  // 全局样式
  style: undefined,
  // 后台管理地址
  adminUrl: undefined,
  // 应用版本 10免费版 20专业版 30永久授权
  version: undefined,
  // 服务到期时间
  expirationTime: undefined,
  // 模版ID
  templateId: undefined,
  // 行业类型(父级)
  industryParent: undefined,
  // 行业类型(子级)
  industryChild: undefined,
  // 企业ID
  companyId: undefined,
  // 所在国家
  country: undefined,
  // 所在省份
  province: undefined,
  // 所在城市
  city: undefined,
  // 所在辖区
  region: undefined,
  // 经度
  longitude: undefined,
  // 纬度
  latitude: undefined,
  // 街道地址
  address: undefined,
  // 联系电话
  phone: undefined,
  // 电子邮箱
  email: undefined,
  // ICP备案号
  icpNo: undefined,
  // 公安备案
  policeNo: undefined,
  // 备注
  comments: undefined,
  // 是否推荐
  recommend: undefined,
  // 运行状态
  running: undefined,
  // 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
  status: undefined,
  // 维护说明
  statusText: undefined,
  // 关闭说明
  statusClose: undefined,
  // 状态图标
  statusIcon: undefined,
  // 全局样式
  styles: undefined,
  content: undefined,
  // 排序号
  sortNumber: undefined,
  // 用户ID
  userId: undefined,
  // 是否删除, 0否, 1是
  deleted: undefined,
  // 租户id
  tenantId: undefined,
  // 创建时间
  createTime: undefined,
  // 修改时间
  updateTime: undefined,
  // 网站配置
  config: undefined,
  topNavs: undefined,
  bottomNavs: undefined,
  loginUser: undefined
});

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


// 加载评论
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 goBack = () => {
  router.back();
}

// 读取项目详情
const reload = async () => {
  getCmsWebsiteAll(navId.value).then(data => {
    // 获取栏目信息
    assignFields(data)
    page.value = {
      image: data.websiteLogo,
      title: data.websiteName,
      categoryName: '插件市场',
      ...data,
    }

    // 应用截图
    if (data.files) {
      const imgArr = JSON.parse(data.files);
      imgArr.map((item: any) => {
        srcList.value.push(item)
      })
    }

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

  }).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;
  }
}

.scrollbar-flex-content {
  display: flex;
}

.scrollbar-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>
