<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="84%"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    :title="isUpdate ? '续费管理' : '续费管理'"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <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 }"
            >
              <div class="upload-image">
                <ele-image-upload
                  v-model:value="logo"
                  :item-style="{ width: '90px', height: '90px' }"
                  :limit="1"
                  :disabled="!editStatus"
                />
                <ele-image-upload
                  v-model:value="appQrcode"
                  :item-style="{ width: '90px', height: '90px' }"
                  :limit="1"
                  :disabled="!editStatus"
                />
              </div>
              <a-form-item label="AppId" name="appId">
                <span>{{ form.appId }}</span>
              </a-form-item>
              <a-form-item label="AppSecret" name="appSecret">
                <span style="margin-right: 10px">********</span>
                <a-space>
                  <a @click="onAppSecret(form.appId)">查看</a>
                  <a-divider type="vertical" />
                  <a @click="onUpdateAppSecret(form.appId)">重置</a>
                </a-space>
              </a-form-item>
            </a-col>
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="应用名称" name="appName">
                <a-input
                  allow-clear
                  v-if="editStatus"
                  placeholder="请输入应用名称"
                  v-model:value="form.appName"
                />
                <span v-else>{{ form.appName }}</span>
              </a-form-item>
              <a-form-item label="企业名称" name="companyName">
                <SelectCompany
                  :placeholder="`所属企业`"
                  v-if="editStatus"
                  v-model:value="form.companyName"
                  @done="chooseCompanyName"
                />
                <span v-else>{{ form.companyName }}</span>
              </a-form-item>
              <!--              <a-form-item label="开发者单位" name="developer">-->
              <!--                <SelectCompany-->
              <!--                  :placeholder="`请选择开发者企业`"-->
              <!--                  v-if="editStatus"-->
              <!--                  v-model:value="form.developer"-->
              <!--                  @done="chooseDeveloper"-->
              <!--                />-->
              <!--                <span v-else>{{ form.developer }}</span>-->
              <!--              </a-form-item>-->
              <a-form-item label="应用地址" name="appUrl">
                <a-input
                  allow-clear
                  placeholder="请输入应用地址"
                  v-if="editStatus"
                  v-model:value="form.appUrl"
                />
                <span v-else>{{ form.appUrl }}</span>
              </a-form-item>
              <!--              <a-form-item label="后台管理" name="adminUrl">-->
              <!--                <a-input-->
              <!--                  allow-clear-->
              <!--                  placeholder="请输入后台管理地址"-->
              <!--                  v-if="editStatus"-->
              <!--                  v-model:value="form.adminUrl"-->
              <!--                />-->
              <!--                <span v-else>{{ form.adminUrl }}</span>-->
              <!--              </a-form-item>-->
            </a-col>
            <a-col
              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
            >
              <a-form-item label="应用状态" name="appStatus">
                <DictSelect
                  dict-code="appstoreStatus"
                  placeholder="请选择应用状态"
                  v-if="editStatus"
                  v-model:value="form.appStatus"
                />
                <template v-else>
                  <a-tag v-if="form.appStatus == '开发中'" color="red">{{
                    form.appStatus
                  }}</a-tag>
                  <a-tag v-if="form.appStatus == '已上架'" color="green">{{
                    form.appStatus
                  }}</a-tag>
                </template>
              </a-form-item>
              <a-form-item label="应用类型" name="appTypeMultiple">
                <DictSelectMultiple
                  dict-code="AppTypeMultiple"
                  placeholder="请选择应用类型"
                  v-if="editStatus"
                  v-model:value="form.appTypeMultiple"
                />
                <template v-else>
                  <a-tag
                    v-for="(item, index) in form.appTypeMultiple"
                    :key="index"
                    >{{ item }}</a-tag
                  >
                </template>
              </a-form-item>
              <a-form-item label="应用描述" name="comments">
                <a-textarea
                  :rows="4"
                  :maxlength="200"
                  placeholder="请输入应用描述"
                  v-if="editStatus"
                  v-model:value="form.comments"
                />
                <div v-else v-html="form.comments"></div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <template v-if="hasRole('superAdmin') || hasRole('admin')">
          <a-divider style="height: 8px" />
          <RenewList
            :app-id="data?.appId"
            :companyId="data?.companyId"
            :editStatus="editStatus"
          />
        </template>
      </a-form>
    </div>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import type { App } from '@/api/oa/app/model';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import { FormInstance } from 'ant-design-vue/es/form';
  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
  import { pageCompany } from '@/api/system/company';
  import { hasRole } from '@/utils/permission';
  import RenewList from './renew-list.vue';
  import { assignObject } from 'ele-admin-pro';

  // 是否是修改
  const isUpdate = ref(false);
  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: App | null;
  }>();

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

  // 提交状态
  const loading = ref(false);
  // 是否显示最大化切换按钮
  const maxable = ref(true);
  // 当期时间
  const editStatus = ref(false);

  const formRef = ref<FormInstance | null>(null);

  // 用户信息
  const form = reactive<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: undefined,
    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: ''
  });

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

  const handleEditStatus = () => {
    editStatus.value = !editStatus.value;
  };

  // 查看秘钥
  const onAppSecret = () => {};
  // 重置秘钥
  const onUpdateAppSecret = () => {};

  const reload = () => {
    loading.value = true;
    // 加载企业信息
    const companyId = props.data?.companyId;
    pageCompany({ companyId }).then((res) => {
      form.tenantId = undefined;
      const list = res?.list;
      if (list && list.length > 0) {
        form.tenantId = list[0].tenantId;
      }
    });
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        console.log(visible);
        if (props.data) {
          assignObject(form, props.data);
          if (props.data.appTypeMultiple) {
            form.appTypeMultiple = JSON.parse(props.data.appTypeMultiple);
          }
          reload();
        } else {
          editStatus.value = true;
          isUpdate.value = false;
        }
      }
    }
  );
</script>
<style lang="less"></style>

<style lang="less">
  .tab-pane {
    min-height: 300px;
  }

  .ml-10 {
    margin-left: 5px;
  }

  .upload-text {
    margin-right: 70px;
  }

  .upload-image {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
  }
</style>
