<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <div class="bg-white rounded-2xl h-full">
      <div class="form-box">
        <a-form
          :model="formState"
          name="basic"
          layout="vertical"
          autocomplete="off"
          @finish="onFinish"
          @finish-failed="onFinishFailed"
        >
          <div class="title-box">
            <NodeHead nodeName="基本信息" />
          </div>
          <a-row :gutter="24" class="!m-0">
            <a-col :span="12">
              <a-form-item
                :label="t('公司名称')"
                name="companyName"
                :rules="[{ required: true, message: t('请输入公司名称') }]"
              >
                <a-input v-model:value="formState.companyName" :placeholder="t('请输入公司名称')" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label="t('公司简称')"
                name="shortName"
                :rules="[{ required: true, message: t('请输入公司简称') }]"
              >
                <a-input v-model:value="formState.shortName" :placeholder="t('请输入公司简称')" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label="t('系统栏标题')"
                name="systemName"
                :rules="[{ required: true, message: t('请输入系统栏标题') }]"
              >
                <a-input
                  v-model:value="formState.systemName"
                  :placeholder="t('请输入系统栏标题')"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <div class="title-box">
            <NodeHead nodeName="logo配置" />
          </div>
          <a-row :gutter="24" class="!m-0">
            <a-col :span="12">
              <a-form-item :label="t('登录页logo')" name="loginLogoId">
                <InputUpload
                  v-model:value="formState.loginLogoId"
                  :placeholder="
                    t('点击上传logo图片，尺寸大约为200*21，鼠标移动至“?”上可查看影响范围')
                  "
                  tipType="img"
                  :tips="imgs.login"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="t('菜单logo')" name="menuLogoId">
                <InputUpload
                  v-model:value="formState.menuLogoId"
                  :placeholder="
                    t('点击上传logo图片，尺寸大约为124*26，鼠标移动至“?”上可查看影响范围')
                  "
                  tipType="img"
                  :tips="imgs.home"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="t('设计器logo')" name="designerLogoId">
                <InputUpload
                  v-model:value="formState.designerLogoId"
                  :placeholder="
                    t('点击上传logo图片，尺寸大约为208*64，鼠标移动至“?”上可查看影响范围')
                  "
                  tipType="img"
                  :tips="imgs.design"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="t('菜单logo小图标')" name="smallMenuLogoId">
                <InputUpload
                  v-model:value="formState.smallMenuLogoId"
                  :placeholder="
                    t('点击上传logo图片，尺寸大约为24*30，鼠标移动至“?”上可查看影响范围')
                  "
                  tipType="img"
                  :tips="imgs.logo"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="t('刷新加载logo')" name="loadingLogoId">
                <InputUpload
                  v-model:value="formState.loadingLogoId"
                  :placeholder="
                    t('点击上传logo图片，尺寸大约为34*15，鼠标移动至“?”上可查看影响范围')
                  "
                  tipType="img"
                  :tips="imgs.loading"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <div class="title-box">
            <NodeHead nodeName="登录页背景图配置" />
          </div>
          <a-row :gutter="24" class="!m-0">
            <a-col :span="12">
              <a-form-item :label="t('登录页背景图')" name="backgroundLogoId">
                <InputUpload
                  v-model:value="formState.backgroundLogoId"
                  :placeholder="t('点击上传登录页背景图片')"
                  :showTip="false"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item>
                <div class="flex justify-center mt-8"
                  ><a-button type="primary" html-type="submit" class="w-25 rounded">
                    {{ t('提交') }}</a-button
                  ></div
                >
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';

  import InputUpload from '/@/components/Form/src/components/InputUpload.vue';
  import { PageWrapper } from '/@/components/Page';
  import { useI18n } from '/@/hooks/web/useI18n';
  import refrash from './images/refrash.jpg';
  import login from './images/login.jpg';
  import home from './images/home.jpg';
  import design from './images/design.jpg';
  import logo from './images/logo.png';
  import loading from './images/loading.png';
  import { getLogoInfoToken, setLogoConfig } from '/@/api/system/login';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { useAppStore } from '/@/store/modules/app';

  const { t } = useI18n();
  const { notification } = useMessage();
  const imgs = {
    refrash: refrash,
    login: login,
    home: home,
    design: design,
    logo: logo,
    loading: loading,
  };
  interface FormState {
    companyName: string;
    shortName: string;
    systemName: string;
    backgroundLogoId?: string;
    designerLogoId?: string;
    loginLogoId?: string;
    menuLogoId?: string;
    smallMenuLogoId?: string;
    loadingLogoId?: string;
  }

  let formState = ref<FormState>({ companyName: '', shortName: '', systemName: '' });
  const id = ref();
  onMounted(() => {
    getLogoInfoToken().then((res) => {
      formState.value = {
        companyName: res.companyName,
        shortName: res.shortName,
        systemName: res.systemName,
        backgroundLogoId: res.backgroundLogoId,
        designerLogoId: res.designerLogoId,
        loginLogoId: res.loginLogoId,
        menuLogoId: res.menuLogoId,
        smallMenuLogoId: res.smallMenuLogoId,
        loadingLogoId: res.loadingLogoId,
      };
      id.value = res.id;
    });
  });
  const onFinish = (values: any) => {
    let params = values;
    params.id = id.value;
    setLogoConfig(params).then((res) => {
      if (res) {
        notification.success({
          message: t('提示'),
          description: t('修改成功'),
        });
        const appStore = useAppStore();
        let config = appStore.getLogoConfig;
        config.systemName = values.systemName;
        appStore.setLogoConfig(config);
      } else {
        notification.success({
          message: t('提示'),
          description: t('修改失败'),
        });
      }
    });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
</script>
<style scoped lang="less">
  .form-box {
    height: 100%;
    overflow: auto;
  }

  .title-box {
    border-bottom: 1px solid #ddd;
    padding: 16px;
    margin-bottom: 30px;
  }
</style>
