<template>
  <a-page-header
    :title="title"
    :style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
    @back="() => $router.go(-1)"
  >
    <a-spin :spinning="spinning">
      <a-card
        :bordered="false"
        :body-style="{ paddingTop: '5px' }"
        v-if="isShow"
      >
        <a-tabs v-model:active-key="active" @change="onChange">
          <a-tab-pane tab="基本信息" key="base">
            <ProductInfo :data="form" :appField="productTabs" :logo="logo" />
          </a-tab-pane>
          <a-tab-pane tab="参数设置" key="param">
            <ProductTab
              :productId="productId"
              :data="productTabs"
              @done="reload"
            />
          </a-tab-pane>
          <a-tab-pane tab="项目附件" key="annex">
            <ProductAnnex :productId="productId" :data="form" />
          </a-tab-pane>
          <a-tab-pane tab="产品图片" key="photo">
            <ProductPhoto
              :product="form.productId"
              :data="form"
              :images="images"
            />
          </a-tab-pane>
          <a-tab-pane tab="使用说明" key="about">
            <ProductAbout :product="form.productId" :data="form.content" />
          </a-tab-pane>
          <a-tab-pane tab="用户评价" key="comment">
            <ProductAbout :product="form.productId" :data="form.content" />
          </a-tab-pane>
        </a-tabs>
      </a-card>
      <a-card v-else :bordered="false">
        <div style="max-width: 960px; margin: 0 auto">
          <a-result
            status="error"
            title="无查看权限"
            sub-title="请先添加为项目成员"
          >
            <template #extra>
              <a-space size="middle">
                <a-button type="primary" @click="openUrl('/oa/product/index')"
                  >返回</a-button
                >
              </a-space>
            </template>
          </a-result>
        </div>
      </a-card>
    </a-spin>
  </a-page-header>
</template>

<script lang="ts" setup>
  import { ref, unref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import ProductInfo from './components/product-info.vue';
  import ProductPhoto from './components/product-photo.vue';
  import ProductAbout from './components/product-about.vue';
  import ProductAnnex from './components/product-annex.vue';
  import ProductTab from './components/product-tabs.vue';
  import useFormData from '@/utils/use-form-data';
  import { Product } from '@/api/oa/product/model';
  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import { ProductTabs } from '@/api/oa/product/tabs/model';
  import { openUrl } from '@/utils/common';
  import { getProduct } from '@/api/oa/product';
  import { pageProductTabs } from '@/api/oa/product/tabs';

  const { currentRoute } = useRouter();
  // 当前选项卡
  const active = ref('base');
  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { screenWidth } = storeToRefs(themeStore);
  const title = ref('项目名称');
  const spinning = ref(true);
  const isShow = ref(true);
  const logo = ref<any[]>([]);
  const productId = ref<number>(0);
  const productQrcode = ref<any[]>([]);
  const images = ref<ItemType[]>([]);
  const productTabs = ref<ProductTabs[]>();

  // 应用信息
  const { form, assignFields, resetFields } = useFormData<Product>({
    productId: undefined,
    name: '',
    code: '',
    logo: '',
    type: '',
    money: undefined,
    salesInitial: undefined,
    salesActual: undefined,
    stockTotal: undefined,
    adminUrl: undefined,
    // 下载地址
    downUrl: undefined,
    content: '',
    comments: '',
    backgroundColor: '',
    backgroundImage: '',
    backgroundGif: '',
    buyUrl: '',
    files: '',
    serverUrl: undefined,
    callbackUrl: undefined,
    tenantId: undefined
  });

  const onChange = () => {
    reload();
  };

  /**
   * 加载数据
   */
  const reload = () => {
    resetFields();
    logo.value = [];
    productQrcode.value = [];
    images.value = [];
    productTabs.value = [];
    // 加载项目详情
    getProduct(productId.value)
      .then((data) => {
        assignFields(data);
        if (data.name) {
          title.value = data.name;
          // 修改页签标题
          setPageTabTitle(data.name);
        }
        if (data.logo) {
          logo.value.push({
            uid: data.productId,
            url: data.logo,
            status: 'done'
          });
        }
        isShow.value = true;
        spinning.value = false;
      })
      .catch((err) => {
        isShow.value = false;
        spinning.value = false;
      });
    // 加载产品属性
    pageProductTabs({ productId: productId.value, limit: 50 }).then((res) => {
      productTabs.value = res?.list;
    });
  };

  watch(
    currentRoute,
    (route) => {
      const { params } = unref(route);
      const { id } = params;
      if (id) {
        productId.value = Number(id);
      }
      reload();
    },
    { immediate: true }
  );
</script>

<script lang="ts">
  export default {
    name: 'ProductDetail'
  };
</script>
