<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
      <BasicForm @register="register" @submit="handleSubmit">
        <template #add="{ field }">
          <Button v-if="Number(field) === 1" @click="add">+</Button>
          <Button v-if="field > 1" @click="del(field)">-</Button>
        </template>
      </BasicForm>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {defineComponent, ref, computed, unref} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
  
  import { CollapseContainer } from '/@/components/Container/index';
  import { Input } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { Button } from '/@/components/Button';
    import {saveOrUpdate} from '../RateKeyitem.api';
    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    const rateDomainId = ref('');
    const id = ref('');
    const n = ref(2);
    const nmax= ref(2);
    
     const [register, { appendSchemaByField, removeSchemaByFiled,setFieldsValue,validate }] = useForm({
        schemas: [
          {
            field: 'filename1',
            component: 'Input',
            label: '附件1',
            colProps: {
              span: 16,
            },
            required: true,
          },
          
          {
            field: '1',
            component: 'Input',
            label: ' ',
            colProps: {
              span: 8,
            },
            slot: 'add',
          },
        ],
        labelWidth: 100,
        actionColOptions: { span: 24 },
        showResetButton: false,
        showActionButtonGroup: false,
      });
      

       
     

      function add() {
        if(n.value>10){
          alert("附件最多设置10种文档上传");
        }else {
        appendSchemaByField(
          {
            field: `filename${n.value}`,
            component: 'Input',
            label: '附件' + n.value,
            colProps: {
              span: 16,
            },
            required: true,
          },
          ''
        );
        

        appendSchemaByField(
          {
            field: `${n.value}`,
            component: 'Input',
            label: ' ',
            colProps: {
              span: 8,
            },
            slot: 'add',
          },
          ''
        );
        n.value++;
        nmax.value++;
        }
      }

      function del(field) {
        removeSchemaByFiled([`filename${field}`,  `${field}`]);
        n.value--;
      }



    
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
      
        //重置表单
        //await resetFields();
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        rateDomainId.value = data.record.rateDomainId;
        id.value = data.record.id;
        let filestr=data.record.filenamestr;
        let filenum=data.record.filenum;
         n.value=2;

        console.log('filenum---------->: ', filenum);
        console.log('filestr---------->: ', filestr);
        
        if(filenum==1){

          setFieldsValue({
          filename1: filestr,
          });
        
        }else if(filenum>1){
          let myArray = filestr.split(',');
           setFieldsValue({
          filename1: myArray[0],
          });
         
          if(filenum==2){
            add();
           setFieldsValue2();
          }
          if(filenum==3){
            add();
            add();
           setFieldsValue({
          filename2: myArray[1],
          filename3: myArray[2],
          });
          }

          if(filenum==4){
            add();
            add();
             add();
           setFieldsValue({
          filename2: myArray[1],
          filename3: myArray[2],
          filename4: myArray[3],
          });
          }

          if(filenum==5){
            add();
            add();
            add();
            add();
           setFieldsValue({
          filename2: myArray[1],
          filename3: myArray[2],
          filename4: myArray[3],
          filename5: myArray[4],
          });
          }
          
          if(filenum==6){
            add();
            add();
            add();
            add();
            add();
          setFieldsValue({
          filename2: myArray[1],
          filename3: myArray[2],
          filename4: myArray[3],
          filename5: myArray[4],
          filename6: myArray[5],
          });
          }
          //
          if(filenum==7){
            add();
            add();
            add();
            add();
            add();
            add();
          setFieldsValue({
          filename2: myArray[1],
          filename3: myArray[2],
          filename4: myArray[3],
          filename5: myArray[4],
          filename6: myArray[5],
          filename7: myArray[6],
          });
          }
          //
          if(filenum==8){
            add();
            add();
            add();
            add();
            add();
            add();
            add();
          setFieldsValue({
          filename2: myArray[1],
          filename3: myArray[2],
          filename4: myArray[3],
          filename5: myArray[4],
          filename6: myArray[5],
          filename7: myArray[6],
          filename8: myArray[7],
          });
          }
          //
          if(filenum==9){
            add();
            add();
            add();
            add();
            add();
            add();
            add();
            add();
          setFieldsValue({
          filename2: myArray[1],
          filename3: myArray[2],
          filename4: myArray[3],
          filename5: myArray[4],
          filename6: myArray[5],
          filename7: myArray[6],
          filename8: myArray[7],
          filename9: myArray[8],
          });
          }
          //
          if(filenum==10){
            add();
            add();
            add();
            add();
            add();
            add();
            add();
            add();
            add();
          setFieldsValue({
          filename2: myArray[1],
          filename3: myArray[2],
          filename4: myArray[3],
          filename5: myArray[4],
          filename6: myArray[5],
          filename7: myArray[6],
          filename8: myArray[7],
          filename9: myArray[8],
          filename10: myArray[9],
          });
          }
          //

        }

        
        
        if (unref(isUpdate)) {
           
        }
        // 隐藏底部时禁用整个表单
       setProps({ disabled: !data?.showFooter })
    });

    
    //设置标题
    const title = computed(() => ('配置附件'));
    //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await validate();
            setModalProps({confirmLoading: true});

            let filenamestr="";
            let iend=n.value-1;
            
              for(let i=1;i<nmax.value;i++) {
              
                let filen=values['filename'+ i];
                 
                 if(filen!=undefined){
                  filenamestr=filenamestr+filen+",";
                  }
   
            }
            filenamestr=filenamestr.substr(0,filenamestr.length-1);
            //console.log("filenamestr------>", filenamestr);     
            
            values.filenamestr=filenamestr;
            values.rateDomainId=rateDomainId.value;
            values.filenum=n.value-1;
             values.id= id.value;
          
            //提交表单
           await saveOrUpdate(values, isUpdate.value);
            n.value=2;
            nmax.value=2;
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>