import {
  addRandomAccountList,
  type addRandomAccountParams
} from '@/api/t-mall-game-account';
import { Form, FormItem, InputNumber, Modal } from '@arco-design/web-vue';
import { defineComponent, onMounted, ref, watchEffect } from 'vue';

export default defineComponent({
  name: 'TMallAccountAddModel',
  props: {
    visible: Boolean
  },
  emits: {
    'update:visible': (_visible: boolean) => true
  },
  setup(props, { emit }) {
    const generateForm = () => {
      return {
        count: 0
      };
    };
    const visible = ref<boolean>(props.visible);
    const formData = ref<addRandomAccountParams>(generateForm());

    onMounted(() => {
      watchEffect(() => {
        emit('update:visible', visible.value);
      });
      watchEffect(() => {
        if (props.visible !== visible.value) {
          visible.value = props.visible;
        }
      });
    });
    return () => (
      <Modal
        title='添加账户'
        v-model:visible={visible.value}
        onBeforeOk={async (done: (closed: boolean) => void) => {
          try {
            await addRandomAccountList(formData.value);
            formData.value = generateForm();
            done(true);
          } catch {
            done(false);
          }
        }}
      >
        <Form model={formData}>
          <FormItem field='count' label='数量'>
            <InputNumber
              v-model={formData.value.count}
              placeholder='请输入数量'
            />
          </FormItem>
        </Form>
      </Modal>
    );
  }
});
