<template>
  <h-card :bordered="false" title="仓库管理">
    <h-form class="form">
      <h-row class="form-row" :gutter="16">
        <h-col :lg="6" :md="12" :sm="24">
          <h-form-item label="仓库名" v-bind="validateInfos.name" data-validate-id="name">
            <h-input v-model:value="modelRef.name" placeholder="请输入仓库名称" />
          </h-form-item>
        </h-col>
        <h-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
          <h-form-item label="仓库域名" v-bind="validateInfos.url" data-validate-id="url">
            <h-input
              v-model:value="modelRef.url"
              addon-before="http://"
              addon-after=".com"
              placeholder="请输入"
            />
          </h-form-item>
        </h-col>
        <h-col :xl="{ span: 9, offset: 1 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
          <h-form-item label="仓库管理员" v-bind="validateInfos.owner">
            <h-select v-model:value="modelRef.owner" placeholder="请选择管理员">
              <h-select-option value="王同学">王同学</h-select-option>
              <h-select-option value="李同学">李同学</h-select-option>
              <h-select-option value="黄同学">黄同学</h-select-option>
            </h-select>
          </h-form-item>
        </h-col>
      </h-row>
      <h-row class="form-row" :gutter="16">
        <h-col :lg="6" :md="12" :sm="24">
          <h-form-item label="审批人" v-bind="validateInfos.approver">
            <h-select v-model:value="modelRef.approver" placeholder="请选择审批员">
              <h-select-option value="王晓丽">王晓丽</h-select-option>
              <h-select-option value="李军">李军</h-select-option>
            </h-select>
          </h-form-item>
        </h-col>
        <h-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
          <h-form-item label="生效日期" v-bind="validateInfos.dateRange">
            <h-range-picker v-model:value="modelRef.dateRange" style="width: 100%" />
          </h-form-item>
        </h-col>
        <h-col :xl="{ span: 9, offset: 1 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
          <h-form-item label="仓库类型" v-bind="validateInfos.type">
            <h-select v-model:value="modelRef.type" placeholder="请选择仓库类型">
              <h-select-option value="公开">公开</h-select-option>
              <h-select-option value="私密">私密</h-select-option>
            </h-select>
          </h-form-item>
        </h-col>
      </h-row>
      <h-form-item v-if="showSubmit">
        <h-button @click="handleSubmit">Submit</h-button>
      </h-form-item>
    </h-form>
  </h-card>
</template>

<script lang="ts">
import { Form } from 'ant-design-vue';
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'RepositoryForm',
  props: {
    showSubmit: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    const validateDomain = (_rule: any, value: string) => {
      return new Promise<void>((resolve, reject) => {
        const regex = /^user-(.*)$/;
        if (!regex.test(value)) {
          reject('需要以 user- 开头');
        }
        resolve();
      });
    };

    const modelRef = reactive({
      name: undefined,
      url: undefined,
      owner: undefined,
      approver: undefined,
      dateRange: null, // as RangePickerProps['value'],
      type: undefined,
    });
    const rulesRef = reactive({
      name: [{ required: true, message: '请输入仓库名称' }],
      url: [{ required: true, validator: validateDomain }],
    });

    const { resetFields, validate, validateInfos } = Form.useForm(modelRef, rulesRef);

    const handleSubmit = (e: Event) => {
      e.preventDefault();
    };

    return {
      modelRef,
      resetFields,
      validate,
      validateInfos,
      handleSubmit,
    };
  },
});
</script>
