<template>
  <ele-modal
    width="90%"
    :visible="visible"
    :title="`项目信息（${appId}）`"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    :footer="null"
    @ok="save"
  >
    <div style="background-color: #f3f3f3; padding: 8px">
      <a-form
        ref="formRef"
        :model="form"
        :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
      >
        <a-card title="基本信息" :bordered="false">
          <a-row :gutter="16">
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="租户ID" name="tenantId">
                <span>{{ form.tenantId }}</span>
              </a-form-item>
              <a-form-item label="项目名称" name="appName">
                <span>{{ form.appName }}</span>
              </a-form-item>
              <a-form-item label="项目描述" name="comments">
                <div v-html="form.comments"></div>
              </a-form-item>
            </a-col>
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="项目状态" name="appStatus">
                <a-tag v-if="form.appStatus == '开发中'" color="red">{{
                  form.appStatus
                }}</a-tag>
                <a-tag v-if="form.appStatus == '已上架'" color="green">{{
                  form.appStatus
                }}</a-tag>
              </a-form-item>
              <a-form-item label="项目类型" name="appTypeMultiple">
                <a-tag
                  v-for="(item, index) in form.appTypeMultiple"
                  :key="index"
                  >{{ item }}</a-tag
                >
              </a-form-item>
              <a-form-item label="项目域名" name="appUrl">
                <span>{{ form.appUrl }}</span>
              </a-form-item>
            </a-col>
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <div class="upload-image">
                <ele-image-upload
                  v-model:value="logo"
                  :item-style="{ width: '120px', height: '120px' }"
                  :limit="3"
                  disabled
                />
              </div>
            </a-col>
          </a-row>
        </a-card>
        <a-divider style="height: 8px" />
        <a-card title="开发信息" :bordered="false">
          <a-row :gutter="16">
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="应用标识" name="appCode">
                {{ form.appCode }}
              </a-form-item>
              <a-form-item label="应用包名" name="packageName">
                <span>{{ form.packageName }}</span>
              </a-form-item>
            </a-col>
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="主节点" name="serverUrl">
                {{ form.serverUrl }}
              </a-form-item>
              <a-form-item label="模块节点" name="modulesUrl">
                {{ form.modulesUrl }}
              </a-form-item>
            </a-col>
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="服务端仓库" name="gitUrl">
                {{ form.gitUrl }}
              </a-form-item>
              <a-form-item label="vue端仓库" name="gitUrl">
                {{ form.gitUrl }}
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-divider style="height: 8px" />
        <a-card title="项目需求" :bordered="false">
          <a-row :gutter="16">
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="原型图" name="prototypeUrl">
                {{ form.prototypeUrl }}
              </a-form-item>
            </a-col>
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="项目需求" name="docsUrl">
                {{ form.docsUrl }}
              </a-form-item>
            </a-col>
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="腾讯文档" name="docsUrl">
                {{ form.docsUrl }}
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-divider style="height: 8px" />
        <a-card title="其他资料" :bordered="false">
          <!-- 编辑器 -->
          <byte-md-viewer :value="requirement" :plugins="plugins" />
        </a-card>
      </a-form>
    </div>
  </ele-modal>
</template>
<script lang="ts" setup>
  import { User } from '@/api/system/user/model';
  import { ref, watch } from 'vue';
  import { App } from '@/api/oa/app/model';
  import { getApp } from '@/api/oa/app';
  import useFormData from '@/utils/use-form-data';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import gfm from '@bytemd/plugin-gfm';
  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
  import highlight from '@bytemd/plugin-highlight';

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    appId: number;
  }>();

  const emit = defineEmits<{
    (e: 'done', user: User): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);
  const logo = ref<any[]>([]);
  const requirement = ref('');
  const qrcode = ref('https://file.jimeigroup.cn/reg-code3/hgkghiji.png');

  // 应用信息
  const { form, resetFields, assignFields } = useFormData<App>({
    // 应用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: '',
    // 发布者昵称
    nickname: '',
    // 子菜单
    children: [],
    // 权限树回显选中状态, 0未选中, 1选中
    checked: false,
    //
    key: undefined,
    //
    value: undefined,
    //
    parentIds: [],
    //
    openType: undefined,
    //
    search: undefined,
    // 成员管理
    users: [],
    // 项目需求
    requirement: '',
    file1: '[]',
    file2: '[]',
    file3: '[]'
  });

  const chooseUser = (item: User) => {
    form.userId = item.userId;
    form.nickname = item.nickname;
  };

  // 插件
  const plugins = ref([
    gfm({
      locale: zh_HansGfm
    }),
    highlight()
  ]);

  const save = () => {
    emit('done', form);
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        // content.value = '';
        requirement.value = '';
        if (props.appId) {
          getApp(props.appId).then((appInfo) => {
            assignFields(appInfo);
            logo.value = [];
            // images.value = [];
            if (appInfo.appIcon) {
              logo.value.push({
                uid: 0,
                url: appInfo.appIcon,
                status: 'done'
              });
            }
            if (appInfo.appTypeMultiple) {
              form.appTypeMultiple = JSON.parse(appInfo.appTypeMultiple);
            }
            if (appInfo.requirement) {
              requirement.value = appInfo.requirement;
            }
          });
        }
      } else {
        resetFields();
      }
    }
  );
</script>
<style scoped lang="less">
  .upload-image {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
  }
</style>
