<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="t('routes.devices.addDevice')"
    @ok="submitModal"
    @visible-change="handleVisibleChange"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm">
        <template #userName="{ model, field }">
          {{ model[field] }}
        </template>
        <template #name="{ model, field }">
          {{ model[field] }}
        </template>
      </BasicForm>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { AddDevice, checkDevice } from '/@/api/corporation/modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    emits: ['register'],
    setup(props) {
      const modelRef = ref({});
      const num = ref(0);
      const { t } = useI18n();
      const { createMessage } = useMessage();
      const { success, error } = createMessage;
      // const debounce = (fn, delay) => {
      //   var timer = null;
      //   return function () {
      //     var context = this, args = arguments;
      //     clearTimeout(timer);
      //     timer = setTimeout(function () {
      //       fn.apply(context, args);
      //     }, delay);
      //   };
      // }
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      const handlevalidator = async (_, value) => {
        console.log('handlevalidator', value);
        if (!value) {
          return Promise.resolve();
        }
        try {
          let res = await checkDevice({
            childName: value,
          });
          if (res.message) {
            return Promise.reject(res.message);
          } else {
            return Promise.resolve();
          }
        } catch (err) {
          return Promise.reject(err);
        }
      };
      const schemas: FormSchema[] = [
        {
          field: 'companyName',
          label: t('routes.corporation.enterpriseName'),
          slot: 'userName',
          component: 'Input',
        },
        {
          field: 'managerPhone',
          label: t('routes.corporation.enterpriseId'),
          slot: 'name',
          component: 'Input',
        },
        {
          field: 'subNum',
          component: 'InputNumber',
          label: t('routes.corporation.cameraNum'),
          colProps: {
            span: 8,
          },
          componentProps: () => {
            return {
              // xxxx props schema, tableAction, formModel  checkDevice
              min: 0,
              onChange: numOnChange,
            };
          },
        },
      ];
      // let schemasList = []
      const [
        registerForm,
        {
          setFieldsValue,
          resetFields,
          getFieldsValue,
          validateFields,
          appendSchemaByField,
          removeSchemaByFiled,
        },
      ] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      async function submitModal() {
        let formData = {
          ...getFieldsValue(),
        };
        let validate = false;
        try {
          const res = await validateFields();
          validate = true;
          console.log('passing', res, formData);
        } catch (error: unknown) {
          console.log('not passing', error);
        }
        if (validate) {
          const { subNum, id, userName } = modelRef.value;
          let childNameList = [];
          Object.keys(formData).map((ele) => {
            if (ele.includes('ID')) {
              childNameList.push(formData[ele]);
            }
          });
          console.log('modelRef.value', Object.keys(formData), childNameList);
          try {
            const res = await AddDevice({
              childNames: childNameList,
              id,
              subNum,
              userName,
            });
            success(res);
            closeModal();
          } catch (errors) {
            error('errors');
            console.log('not passing', error);
          }
        }
      }
      function onDataReceive(data) {
        // 方式1;
        resetFields();
        setFieldsValue({
          ...data.record,
        });

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

        // setProps({
        //   ...data.record,
        // });
      }
      function numOnChange(event) {
        const value = Number(event);
        if (num.value > value) {
          //减
          let delList = Array.from(new Array(num.value)).map((_, index) => {
            console.log(index, value, num.value);
            if (index >= value) {
              return `ID${index}`;
            }
          });
          removeSchemaByFiled(delList);
          console.log('schemasList减', value, num.value, delList);
          // value,num.value,schemasList.filter((_,index) => {return !(index<num.value)}).map((_,index) => `ID${index}`))
        } else {
          //增
          let device = t('routes.corporation.device');
          let schemasList: FormSchema[] = Array.from(new Array(value)).map((_, index) => {
            return {
              field: `ID${index}`,
              component: 'Input',
              label: device + 'ID' + index,
              helpMessage: [t('common.checkTips'), `${device} ${t('common.unusual')}`],
              itemProps: {
                validateTrigger: 'blur',
              },
              colProps: {
                span: 24,
              },
              rules: [
                {
                  required: true,
                  message: `${t('common.inputText')} ${device} ID`,
                },
                {
                  validator: handlevalidator,
                },
              ],
            };
          });
          console.log(
            'schemasList增',
            num.value,
            schemasList.filter((_, index) => {
              return index >= num.value;
            }),
          );
          schemasList
            .filter((_, index) => {
              return index >= num.value;
            })
            .forEach((item) => appendSchemaByField(item, ''));
        }
        num.value = value;
      }
      function handleVisibleChange(v) {
        v && props.userData && nextTick(() => onDataReceive(props.userData));
      }
      return {
        register,
        submitModal,
        schemas,
        registerForm,
        numOnChange,
        modelRef,
        handleVisibleChange,
        num,
        errorMsg: error,
        t,
      };
    },
  });
</script>
