<template>
  <BasicModal v-bind="$attrs" @register="register" title="租户开通" @visible-change="handleVisibleChange" @ok="handleSubmit">
    <div class="m-5 result-success">
      <Result status="success" title="提交成功" sub-title="提交成功后请记录管理员账号密码。" />
    </div>
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" :model="model" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicModal, useModalInner, BasicForm, FormSchema, useForm  } from '@jdlinker/ui';
  import { Result } from 'ant-design-vue';

  const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Input',
      label: '账号',
      colProps: {
        span: 24
      },
      dynamicDisabled: true
    },
    {
      field: 'field2',
      component: 'Input',
      label: '密码',
      colProps: {
        span: 24
      },
      dynamicDisabled: true
    }
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm, Result },
    props: {
      userData: { type: Object }
    },
    setup(props) {
      const modelRef = ref({});
      const [
        registerForm,
        {
          // setFieldsValue,
          // setProps
        }
      ] = useForm({
        labelWidth: 100,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24
        }
      });

      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      function onDataReceive(data) {
        modelRef.value = { field1: data.username, field2: data.password };
      }

      function handleVisibleChange(v) {
        v && props.userData && nextTick(() => onDataReceive(props.userData));
      }

      //表单提交事件
      async function handleSubmit() {
        closeModal();
      }

      return { register, schemas, registerForm, model: modelRef, handleVisibleChange, handleSubmit };
    }
  });
</script>

<style lang="less" scoped>
  .result-success {
    padding: 24px 32px;
    background-color: @component-background;

    &__content {
      padding: 24px 40px;
      background-color: @background-color-light;
    }
  }
</style>
