<script setup lang="ts">
import { ref } from 'vue';
import { useNaiveForm } from '@/hooks/common/form';
import ImageUpload from '@/components/common/image-upload.vue';
import Markdown from '@/components/common/markdown.vue';

defineOptions({
  name: 'SystemEnvConfig'
});

type ThirdPartyLoginType = 'wechatOpen' | 'wechatEnterprise' | 'wechatEnterpriseInner' | 'ddEnterpriseEnvConfig';
interface ModelData {
  name: string;
  favicon: string;
  webBaseUrl: string;
  allowThirdPartyLogin: 0 | 1;
  thirdPartyLoginTypeList: ThirdPartyLoginType[];
  copyright: string;
}

const model = ref<ModelData>({
  name: '',
  favicon: '',
  webBaseUrl: '',
  allowThirdPartyLogin: 0,
  thirdPartyLoginTypeList: [],
  copyright: ''
});

const { formRef, validate } = useNaiveForm();

const rules: Record<keyof Pick<ModelData, 'name' | 'favicon' | 'webBaseUrl' | 'copyright'>, App.Global.FormRule> = {
  name: { required: true, message: '请输入系统名称', trigger: 'blur' },
  favicon: { required: true, message: '请上传系统Favicon', trigger: 'blur' },
  webBaseUrl: { required: true, message: '请输入项目前端所在域名', trigger: 'blur' },
  copyright: { required: true, message: '请输入版权信息', trigger: 'blur' }
};

const thirdPartyLoginTypeList: { label: string; value: ThirdPartyLoginType }[] = [
  { label: '微信', value: 'wechatOpen' },
  { label: '企业微信', value: 'wechatEnterprise' },
  { label: '企业微信内部', value: 'wechatEnterpriseInner' },
  { label: '钉钉', value: 'ddEnterpriseEnvConfig' }
];

function getData() {
  console.log('getData');
}

async function handleSubmit() {
  await validate();
  console.log('handleSubmit');
}
</script>

<template>
  <NScrollbar>
    <NForm
      ref="formRef"
      :model="model"
      :rules="rules"
      require-mark-placement="left"
      label-placement="left"
      label-width="130"
      class="my-10px"
    >
      <NFormItem label="系统名称" path="name">
        <NInput v-model:value="model.name" placeholder="请输入系统名称"></NInput>
      </NFormItem>
      <NFormItem label="上传logo" path="favicon">
        <ImageUpload v-model:model-value="model.favicon" />
      </NFormItem>
      <NFormItem label="域名" path="webBaseUrl">
        <NInput v-model:value="model.webBaseUrl" placeholder="请输入项目前端所在域名"></NInput>
      </NFormItem>
      <NFormItem label="三方授权注册" path="allowThirdPartyLogin">
        <NSwitch v-model:value="model.allowThirdPartyLogin" :checked-value="1" :unchecked-value="0" />
      </NFormItem>
      <NFormItem label="三方授权类型" path="thirdPartyLoginTypeList">
        <NCheckboxGroup v-model:value="model.thirdPartyLoginTypeList" :max="1">
          <NCheckbox
            v-for="item in thirdPartyLoginTypeList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </NCheckboxGroup>
      </NFormItem>
      <NFormItem label="版权信息" path="copyright">
        <Markdown v-model:value="model.copyright" placeholder="请输入版权信息"></Markdown>
      </NFormItem>
      <NFormItem>
        <div class="ml-100px flex gap-x-20px">
          <NButton @click="getData">重置</NButton>
          <NButton type="primary" @click="handleSubmit">保存</NButton>
        </div>
      </NFormItem>
    </NForm>
  </NScrollbar>
</template>

<style scoped>
:deep(.n-upload-file--image-card-type) {
  width: 140px !important;
  height: 140px !important;
}
:deep(.n-upload-trigger.n-upload-trigger--image-card) {
  width: 140px !important;
  height: 140px !important;
}
</style>
