<template>
  <a-page-header
    :title="title"
    :style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
    @back="() => $router.go(-1)"
  >
    <!--    <template #extra>-->
    <!--      <a-button v-if="collection" :icon="h(StarFilled)" @click="onCollection(collection)">已收藏</a-button>-->
    <!--      <a-button v-else :icon="h(StarOutlined)" @click="onCollection(collection)">加入收藏</a-button>-->
    <!--    </template>-->
    <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="param">
            <AppFieldForm :app-id="appId" :data="form" @done="reload"/>
          </a-tab-pane>
          <a-tab-pane tab="项目附件" key="annex">
            <AppAnnex :app-id="appId" :data="form" @done="reload"/>
          </a-tab-pane>
<!--          <a-tab-pane tab="项目图片" key="photo">-->
<!--            <AppPhoto-->
<!--              :appId="form.appId"-->
<!--              :data="form"-->
<!--              :images="images"-->
<!--              @done="reload"-->
<!--            />-->
<!--          </a-tab-pane>-->
          <a-tab-pane tab="链接管理" key="domain">
            <AppRulForm :app-id="appId" :data="form" @done="reload"/>
          </a-tab-pane>
          <a-tab-pane tab="协同文档" key="profile">
            <AppProfile :app-id="appId" :data="form" @done="reload"/>
          </a-tab-pane>
          <a-tab-pane
            tab="成员管理"
            key="users"
            v-if="hasRole('superAdmin') || hasRole('admin')"
          >
            <AppUsers :app-id="appId" :data="form" @done="reload"/>
          </a-tab-pane>
<!--          <a-tab-pane tab="项目详情" key="base">-->
<!--            <AppInfo-->
<!--              :data="form"-->
<!--              :appField="appField"-->
<!--              :logo="logo"-->
<!--              :app-qrcode="appQrcode"-->
<!--              @done="reload"-->
<!--            />-->
<!--          </a-tab-pane>-->
          <!--          <a-tab-pane tab="项目介绍" key="about">-->
          <!--            <AppAbout :appId="form.appId" :data="form" @done="reload"/>-->
          <!--          </a-tab-pane>-->
          <!--          <a-tab-pane-->
          <!--            tab="订单管理"-->
          <!--            key="order"-->
          <!--            v-if="hasRole('superAdmin') || hasRole('admin')"-->
          <!--          >-->
          <!--            <AppOrder-->
          <!--              :appId="form.appId"-->
          <!--              :editStatus="false"-->
          <!--              @done="reload"-->
          <!--            />-->
          <!--          </a-tab-pane>-->
        </a-tabs>
      </a-card>
      <!--      <a-card v-if="!isShow" :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/app/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 {message} from 'ant-design-vue';
import AppUsers from './components/app-users.vue';
import AppProfile from './components/app-profile.vue';
// import AppPhoto from './components/app-photo.vue';
import AppAnnex from './components/app-annex.vue';
// import AppOrder from './components/app-order.vue';
import AppFieldForm from './components/app-field.vue';
import AppRulForm from './components/app-url.vue';
import {getProject} from '@/api/project/project';
import useFormData from '@/utils/use-form-data';
import {Project} from '@/api/project/project/model';
import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
import {hasRole} from '@/utils/permission';
import {setPageTabTitle} from '@/utils/page-tab-util';
import {pageProjectField} from '@/api/project/projectField';
import {ProjectField} from '@/api/project/projectField/model';
import {pageProjectUser} from '@/api/project/projectUser';
import {uuid} from 'ele-admin-pro';
import {addProjectCollection, getProjectCollection, removeProjectCollection} from "@/api/project/projectCollection";
// import AppInfo from "./components/app-info.vue";
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {getCmsWebsiteAll} from "@/api/cms/cmsWebsiteAll";
// import AppInfo from "@/views/project/projectDetail/components/app-info.vue";

const {currentRoute} = useRouter();
// 当前选项卡
const active = ref('param');
// 是否开启响应式布局
const themeStore = useThemeStore();
const {screenWidth} = storeToRefs(themeStore);
const title = ref('项目名称');
const spinning = ref(true);
const isShow = ref(false);
const logo = ref<any[]>([]);
const appId = ref<number>(0);
const appQrcode = ref<any[]>([]);
const images = ref<ItemType[]>([]);
const appField = ref<ProjectField[]>();
const collection = ref<boolean>(false);
const website = ref<CmsWebsite>();

// 应用信息
const {form, assignFields, resetFields} = useFormData<Project>({
  // 应用id
  appId: undefined,
  // 应用秘钥
  appSecret: '',
  enName: '',
  // 应用名称
  appName: '',
  // 上级id, 0是顶级
  parentId: undefined,
  // 应用编号
  appCode: '',
  // 应用图标
  appIcon: '',
  appQrcode: '',
  // 应用截图
  images: '',
  // 应用类型
  appType: '',
  appTypeMultiple: undefined,
  // 菜单类型
  menuType: undefined,
  // 应用地址
  appUrl: '',
  // 后台管理地址
  adminUrl: undefined,
  // 下载地址
  downUrl: undefined,
  serverUrl: undefined,
  callbackUrl: undefined,
  gitUrl: undefined,
  docsUrl: undefined,
  prototypeUrl: undefined,
  ipAddress: undefined,
  fileUrl: undefined,
  // 应用包名
  packageName: '',
  // 点击次数
  clicks: '',
  // 安装次数
  installs: '',
  // 项目介绍
  content: '',
  // 开发者(个人)
  developer: '',
  director: '',
  projectDirector: '',
  salesman: '',
  // 软件定价
  price: '',
  // 评分
  score: '',
  // 星级
  star: '',
  // 菜单组件地址
  component: '',
  // 菜单路由地址
  path: '',
  // 权限标识
  authority: '',
  // 打开位置
  target: '',
  // 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
  hide: undefined,
  // 菜单侧栏选中的path
  active: '',
  // 其它路由元信息
  meta: '',
  // 版本
  edition: '',
  // 版本号
  version: '',
  // 是否已安装
  isUse: undefined,
  // 排序
  sortNumber: undefined,
  // 备注
  comments: '',
  tenantName: '',
  companyName: '',
  // 租户编号
  tenantCode: '',
  // 租户id
  tenantId: undefined,
  // 创建时间
  createTime: '',
  appStatus: '开发中',
  // 状态
  status: undefined,
  // 发布者
  userId: undefined,
  websiteId: undefined,
  progress: undefined,
  // 发布者昵称
  nickname: '',
  // 子菜单
  children: [],
  // 权限树回显选中状态, 0未选中, 1选中
  checked: false,
  //
  key: undefined,
  //
  value: undefined,
  //
  parentIds: [],
  //
  openType: undefined,
  //
  search: undefined,
  // 成员管理
  users: [],
  // 项目需求
  requirement: '',
  file1: '[]',
  file2: '[]',
  file3: '[]',
  showCase: undefined,
  showIndex: undefined,
  recommend: undefined
});

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

// 加入我的收藏
const onCollection = () => {
  if (collection.value) {
    collection.value = false;
    removeProjectCollection(appId.value).then(msg => {
      message.success(msg);
    })
  } else {
    collection.value = true;
    addProjectCollection({
      appId: appId.value
    }).then((msg) => {
      message.success(msg);
    })
  }
}

/**
 * 加载数据
 */
const reload = () => {
  resetFields();
  logo.value = [];
  appQrcode.value = [];
  images.value = [];
  appField.value = [];
  assignFields({});
  // 加载项目详情
  getProject(appId.value)
    .then((data) => {
      spinning.value = false;
      if (data.appName) {
        title.value = data.appName;
        // 修改页签标题
        setPageTabTitle(data.appName);
      }
      if (data.appIcon) {
        logo.value.push({
          uid: data.appId,
          url: data.appIcon,
          status: 'done'
        });
      }
      if (data.appQrcode) {
        const split = data.appQrcode.split('|||');
        split.map((url) => {
          appQrcode.value.push({
            uid: uuid(),
            url: url,
            status: 'done'
          });
        });
      }
      if (data.images) {
        const arr = JSON.parse(data.images);
        arr.map((d, i) => {
          images.value.push({
            uid: d.uid,
            url: d.url,
            status: 'done'
          });
        });
      }
      if (data.websiteId) {
        getCmsWebsiteAll(data.websiteId).then(response => {
          website.value = response;
        })
      }
      isShow.value = true;
      spinning.value = false;
      assignFields(data);
    })
    .catch((err) => {
      console.log(err, 'ssss')
      isShow.value = false;
      spinning.value = false;
    });
  // 加载项目参数
  pageProjectField({appId: appId.value, limit: 50}).then((res) => {
    appField.value = res?.list;
    form.fields = res?.list;
  });
  // 加载项目成员
  pageProjectUser({appId: appId.value}).then((res) => {
    if (res?.list) {
      form.users = res.list;
    }
  });
  // 是否已收藏
  getProjectCollection(appId.value).then((data) => {
    if (data) {
      collection.value = true;
    }
  }).catch(err => {
    console.log(err)
  });

};

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

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