<template>
  <a-modal title="企业信息" :width="600" v-model:visible="visible" @ok="handleOk">
    <ns-form ref="formRef" :schemas="formSchema" :model="formData" formLayout="vertical" />
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  export default defineComponent({
    name: 'AddBorderVisible',
    setup() {
      let formData = ref({});
      const formRef = ref();
      const visible = ref(false);
      const toggle = () => {
        visible.value = !visible.value;
      };
      const formSchema = reactive([
        {
          field: 'name',
          label: '企业名称',
          component: 'NsInput',
          componentProps: {
            placeholder: '请输入企业名称',
            maxLength: 20,
          },
          rules: [
            {
              required: true,
              message: '请输入企业名称',
              trigger: 'blur',
            },
          ],
        },
        {
          field: 'Isshare',
          label: '点位数据',
          component: 'NsRadioGroup',
          componentProps: {
            radioType: 'radio',
            options: [
              { label: '分享', value: 1 },
              { label: '不分享', value: 2 },
            ],
          },
          rules: [
            {
              required: true,
              message: '请选择是否分享',
              type: 'number',
              trigger: 'blur',
            },
          ],
        },
      ]);
      const handleOk = () => {
        formRef.value?.triggerSubmit().then(() => {
          toggle();
        });
      };
      return { handleOk, formData, formSchema, visible, toggle, formRef };
    },
  });
</script>

<style lang="less" scoped>
  // :deep(.ns-child-form) {
  //   width: 1100px !important;
  //   justify-content: flex-start !important;
  // }
  // :deep(.ant-input-group-addon) {
  //   border: 0px solid #dcdfe2 !important;
  // }
</style>
