<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="t('routes.scenes.addAssistant')"
    width="600px"
    :minHeight="100"
    :centered="true"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <div class="pt-20px">
      <BasicForm @register="registerForm" />
    </div>
    <template #centerFooter> </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { addCollaborateApi } from '/@/api/scene/list';
  const { t } = useI18n();
  const { createMessage } = useMessage();
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    emits: ['register', 'success', 'cancel'],
    setup(_, { emit }) {
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      const currentNum = ref('');
      const [registerForm, { getFieldsValue, resetFields }] = useForm({
        schemas: [
          {
            field: 'userName',
            component: 'Input',
            // '企业账号'
            label: t('sys.login.corporationName'),
          },
        ],
        labelWidth: 100,
        baseColProps: { span: 22 },
        autoSubmitOnEnter: true,
        showResetButton: false,
        showSubmitButton: false,
        submitFunc: async () => {},
      });

      const checked = ref<boolean>(false);
      const headerInfo = reactive<Recordable>({});
      const searchInfo = reactive<Recordable>({});

      function onDataReceive(data) {
        console.log('Data Received', data.num);
        currentNum.value = data.num;
      }

      // const handleSelect = async () => {};
      const handleChange = (val, row) => {
        console.log('val,row', val, row);
      };
      const handleSubmit = async () => {
        const field = getFieldsValue();
        console.log('field', field);
        if (!field.userName) {
          createMessage.error('请选择企业账号');

          return;
        } else {
          const res = await addCollaborateApi({
            numList: [currentNum.value],
            userName: field.userName,
          });
          console.log('res', res);
          createMessage.success(t('common.optSuccess'));
          closeModal();
          resetFields();
          emit('success');
        }
      };

      const handleCancel = () => {
        emit('cancel');
        resetFields();
      };

      return {
        register,
        searchInfo,
        closeModal,
        // handleSelect,
        headerInfo,
        handleChange,
        t,
        checked,
        handleSubmit,
        registerForm,
        handleCancel,
      };
    },
  });
</script>
