<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="设备充值"
    @ok="submit"
    @visible-change="handleVisibleChange"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" :model="modelRef">
        <template #userName="{ record }">
          {{ record.userName }}
        </template>
        <template #text="{ model, field }">
          {{ model[field] }}
        </template>
      </BasicForm>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, inject } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { addPoint } from '/@/api/corporation/modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { t } from '/@/hooks/web/useI18n';
  const schemas: FormSchema[] = [
    {
      field: 'managerPhone',
      component: 'Input',
      label: '充值账号',
      labelWidth: 100,
      slot: 'text',
      colProps: {
        span: 20,
      },
    },
    {
      field: 'point',
      component: 'Input',
      slot: 'text',
      label: '当前余额',
      labelWidth: 100,
      colProps: {
        span: 20,
      },
      componentProps: {
        disabled: true,
      },
    },
    {
      field: 'addPointnumber',
      component: 'InputNumber',
      label: '充 值',
      labelWidth: 100,
      colProps: {
        span: 20,
      },
      defaultValue: 0,
    },
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    emits: ['register', 'update'],
    setup(props, { emit }) {
      const { createConfirm, createMessage } = useMessage();
      const reload = inject('tablereload');
      const modelRef = ref({
        id: 0,
      });
      const [registerForm, { setFieldsValue, resetFields, getFieldsValue }] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      async function saveTable() {
        let { addPointnumber } = getFieldsValue();
        let res = await addPoint({
          id: modelRef.value.id,
          point: Number(addPointnumber),
        });
        console.log('saveTable', res, addPoint);
        createMessage.success(t('common.optSuccess'));
        // reload();
        emit('update');
        closeModal();
      }
      async function submit() {
        createConfirm({
          iconType: 'warning',
          title: '提示',
          content: '此操作将对该账号进行充值, 是否继续?',
          onOk: async () => {
            saveTable();
          },
        });
      }
      function onDataReceive(data) {
        console.log('Data Received', data.record);
        // 方式1;
        resetFields();
        setFieldsValue({
          ...data.record,
        });

        // // 方式2
        modelRef.value = {
          ...data.record,
        };
      }

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

      return {
        register,
        submit,
        saveTable,
        reload,
        schemas,
        registerForm,
        modelRef,
        handleVisibleChange,
      };
    },
  });
</script>
