<template>
  <BasicModal v-bind="$attrs" @register="registerModal"  :centered="true" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
    <BasicForm @register="registerForm">
       
    </BasicForm>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
    // import {formSchema} from '../MetricApiCfg.data';
    import { JDictSelectTag, JInput } from '/@/components/Form';
    import {saveOrUpdate} from '../MetricApiCfg.api';
    import { queryAllMetricNoPage } from '../MetricMonitorSet.api';
    // Emits声明
    const emit = defineEmits(['register','success']);
  

    const isUpdate = ref(true);
    const metricList = ref([])

   
    const formSchema = [
        {
            label: '接口名称',
            field: 'apiName',
            component: 'Input',
            required: true
        },
        {
            label: '关联指标',
            field: 'mtrcNo',
            component: 'JSearchSelect',
            componentProps:{
                options: metricList
            },
            required: true
        },
        {
            label: '接口URL',
            field: 'url',
            component: 'Input',
            required: true
        },
        {
            label: '返回值类型',
            field: 'valueType',
            component: 'JDictSelectTag',
            componentProps: {
                dictCode: 'mtrc_api_valtp',
                placeholder: '请选择',
                stringToNumber: true,
            },
            required: true
        },
        {
            label: '返回值名',
            field: 'valueField',
            component: 'Input',
        },
        {
            label: '通知接收人',
            field: 'receiver',
            required: true,
            component: 'JSelectUser',
            componentProps: {
                labelKey: 'username',
                rowKey: 'username',
            },
        },
        {
            label: '开始日期',
            field: 'stDate',
            component:"DatePicker",
            placeholder: '请输入开始抓取日期',    
        },
        {
            label: '开始时点',
            field: 'stTime',
            component:"InputNumber",
            placeholder: '请输入几点开始抓取', 
        },
        // {
        //     label: '倍数',
        //     field: 'mult',
        //     component:"InputNumber",
        //     defaultValue:1,
        //     dynamicRules: ({model,schema}) => {
        //         return [
        //                 { required: true, message: '请输入倍数!'},
        //         ];
        //     },
        // },
        {
            label: '',
            field: 'id',
            component: 'Input',
            show: false
        },
    ]
   
    //表单配置
    const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
        //labelWidth: 150,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: {span: 24}
    });
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        //重置表单
        await resetFields();
        await setMetricList({collMethod:2});
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        if (unref(isUpdate)) {
            //表单赋值
            await setFieldsValue({
                ...data.record,
            }); 
        } else {
            await setFieldsValue({
                mtrcNo:data.record.mtrcNo
            }); 
        }
        // 隐藏底部时禁用整个表单
       setProps({ disabled: !data?.showFooter })

      
       
    });
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
    //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await validate();
            setModalProps({confirmLoading: true});
            //提交表单
            await saveOrUpdate(values, isUpdate.value);
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }



 const setMetricList = async (params) => {
    const list = await queryAllMetricNoPage(params);
    const retList = list.map(item => ({
      label: item.mtrcName,
      value: item.mtrcNo
    }));
    metricList.value = retList
}


</script>

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

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