<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="请求方式" prop="requestMethod">
          <ElSelect
            v-model="formData.requestMethod"
            placeholder="请求方式">
            <ElOption label="GET 请求" value="GET"/>
            <ElOption label="POST 请求" value="POST"/>
            <ElOption label="PUT 请求" value="PUT"/>
            <ElOption label="DELETE 请求" value="DELETE"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="路由前缀" prop="routingPath">
          <ElInput
            v-model="formData.routingPath"
            placeholder="以 / 开头 或 为空"/>
        </ElFormItem>
        <ElFormItem label="端点地址" prop="endpointPath">
          <ElInput
            v-model="formData.endpointPath"
            placeholder="以 / 开头"/>
        </ElFormItem>
        <ElFormItem label="访问模式" prop="accessModel">
          <ElSelect
            v-model="formData.accessModel"
            placeholder="访问模式">
            <ElOption label="允许匿名访问" value="Anonymous"/>
            <ElOption label="允许已登录用户访问" value="Logined"/>
            <ElOption label="仅拥有权限的用户访问" value="Authenticated"/>
            <ElOption label="禁止访问" value="Forbidden"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="备注" prop="memo">
          <ElInput
            v-model="formData.memo"
            placeholder="备注"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import EndpointApi from '@/pages/sys/endpoint/endpoint-api.ts'
import Strings from '@/common/utils/strings.ts'
import type { InternalRuleItem } from 'async-validator/dist-types/interface'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const status = ref<'add' | 'modify'>('add')
const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const formPanelProps = buildFormPanelProps<GoodsTypes.GoodsForm>({
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve()
    } else {
      status.value = 'modify'
      return EndpointApi.detail(id!)
        .then((res) => {
          return res.data
        })
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return EndpointApi.add(data)
        .then(props.research)
    } else {
      return EndpointApi.modify(data)
        .then(props.research)
    }
  },
  rules: {
    requestMethod: [ {required: true, message: '请选择请求方式', trigger: 'blur'} ],
    routingPath: [ {
      validator(_: InternalRuleItem, value: string, callback: (error?: string | Error) => void) {
        if (!Strings.isEmpty(value)) {
          if (!value.startsWith('/')) {
            callback('必须以“/”开头')
            return
          }
        }
        callback()
      }, message: '请填写路由前缀', trigger: 'blur',
    } ],
    endpointPath: [ {
      required: true, validator(_: InternalRuleItem, value: string, callback: (error?: string | Error) => void) {
        if (Strings.isBlank(value)) {
          callback(new Error('请填写端点地址'))
          return
        }
        if (!Strings.isEmpty(value)) {
          if (!value.startsWith('/')) {
            callback(new Error('必须以“/”开头'))
            return
          }
        }
        callback()
      }, trigger: 'blur',
    } ],
    accessModel: [ {required: true, message: '请选择访问模式', trigger: 'blur'} ],
  },
})
watchEffect(() => {
  formPanelProps.title = status.value === 'add' ? '新建产品' : '修改产品'
})

defineExpose({
  open(data?: EndpointTypes.SearchEndpointResult) {
    formPanelIns.value?.open(data?.id)
  },
})
</script>

<style lang="stylus" scoped>
.form-items {
  grid-template-columns: 1fr 1fr;

  :deep(.el-form-item) {
    &:last-child {
      grid-column: span 2;
      width: 100%;
    }
  }
}
</style>
