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

  <div class="page-main md:w-screen-xl m-auto p-3">
    <el-row :gutter="24">
      <el-col :span="18" :xs="24">
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>产品参数</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item v-for="(item,index) in form.parameters" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>应用截图</span>
            </div>
          </template>
          <div class="flex gap-xl">
            <template v-for="(item,index) in form.files" :key="index" class="text item">
              <el-image
                  :src="item.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="srcList"
                  :initial-index="4"
                  fit="contain"
              />
            </template>
          </div>

        </el-card>
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>说明</span>
            </div>
          </template>
          <p v-html="form.content"></p>
        </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="hover:border-green-50 hover:border-2 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.companyLogo"/>
            </div>
            <div class="flex flex-col">
              <span class="font-bold text-lg text-gray-600">{{ form.companyName }}</span>
              <span class="text-gray-400 pb-1 line-clamp-2">{{ form.comments }}</span>
            </div>
          </el-space>
          <div class="flex flex-col text-gray-500 justify-between leading-7 mt-3">
            <el-space class="flex items-center"><el-icon><Download /></el-icon>下载：6</el-space>
            <el-space class="flex items-center"><el-icon><Star /></el-icon>收藏：0</el-space>
            <el-space class="flex items-center"><el-icon><Coin /></el-icon>赞赏：0</el-space>
            <el-space class="flex items-center"><el-icon><Tickets /></el-icon>文档：0</el-space>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>
<script setup lang="ts">
import {Cpu,Download,Star,Coin,Tickets} from '@element-plus/icons-vue'
import type {ApiResult, PageResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import {getIdBySpm} from "~/utils/common";
import useFormData from "~/utils/use-form-data";
import PageBanner from './components/PageBanner.vue';
import Comments from './components/Comments.vue';
import type {CmsProductComment} from "~/api/cms/cmsProductComment/model";
import type {Company} from "~/api/system/company/model";
import type {CompanyParameter} from "~/api/system/companyParameter/model";

// 引入状态管理
const route = useRoute();
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
const comments = ref<CmsProductComment[]>([]);
const commentsTotal = ref(0);
const commentsPage = ref(1);
const activeName = ref();
const url =
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = ref<any[]>([]);

// 配置信息
const {form, assignFields} = useFormData<Company>({
  companyId: undefined,
  type: undefined,
  shortName: undefined,
  companyName: undefined,
  companyType: undefined,
  companyTypeMultiple: undefined,
  appType: undefined,
  companyLogo: undefined,
  image: undefined,
  files: undefined,
  content: undefined,
  companyCode: undefined,
  domain: undefined,
  phone: undefined,
  tel: undefined,
  email: undefined,
  InvoiceHeader: undefined,
  startTime: undefined,
  expirationTime: undefined,
  version: undefined,
  versionName: undefined,
  versionCode: undefined,
  members: undefined,
  storage: undefined,
  storageMax: undefined,
  buys: undefined,
  clicks: undefined,
  users: undefined,
  departments: undefined,
  industryParent: undefined,
  industryChild: undefined,
  country: undefined,
  province: undefined,
  city: undefined,
  region: undefined,
  address: undefined,
  latitude: undefined,
  longitude: undefined,
  businessEntity: undefined,
  comments: undefined,
  authentication: undefined,
  industryId: undefined,
  industryName: undefined,
  status: undefined,
  userId: undefined,
  official: undefined,
  price: undefined,
  planId: undefined,
  sortNumber: undefined,
  authoritative: undefined,
  merchantId: undefined,
  tenantId: undefined,
  tenantName: undefined,
  tenantCode: undefined,
  modules: undefined,
  requestUrl: undefined,
  socketUrl: undefined,
  serverUrl: undefined,
  modulesUrl: undefined,
  merchantUrl: undefined,
  websiteUrl: undefined,
  mpWeixinCode: undefined,
  mpAlipayCode: undefined,
  h5Code: undefined,
  androidUrl: undefined,
  iosUrl: undefined,
  avatar: undefined,
  nickname: undefined,
  code: undefined,
  createTime: undefined,
  updateTime: undefined,
  password: undefined,
  password2: undefined,
  collection: undefined,
  recommend: undefined,
  title: undefined,
  parentName: undefined,
  categoryName: undefined,
  parameters: undefined,
  links: undefined,
});
const doComments = async (page: any) => {
  commentsPage.value = page;
  await reloadComments();
}


// 加载评论
const reloadComments = async () => {
  const {data: commentsResponse} = await useServerRequest<ApiResult<PageResult<CmsProductComment>>>('/cms/cms-product-comment/page', {
    params: {
      productId: 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 () => {

  // 存在spm(优先级高)
  const {data: item} = await useServerRequest<ApiResult<Company>>('/system/company/' + getIdBySpm(5))
  if (item.value?.data) {
    assignFields(item.value.data)
    form.title = item.value?.data?.title;
    form.parentName = '产品';
    form.categoryName = '产品详情';
    if (item.value.data.files) {
      form.files = JSON.parse(item.value?.data?.files)
      srcList.value = form.files?.map(d => d.url)
    }
    form.comments = item.value?.data?.comments;
  }

  await reloadComments();

  // seo
  useHead({
    title: `${form.tenantName} - ${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>
