<template>
  <BasicModal v-bind="$attrs" 
    @register="registerModal" :centered="true" destroyOnClose :title="title" 
    width="60%" 
    @ok="handleSubmit">
    <BasicForm @register="registerForm">
        <template #tolVal="{model,field}">
            <a-row>
                <a-col :span="10">
                    <a-input-group compact>
                        <a-input  v-model:value="model['stTolVal']"
                            prefix="【"
                            style="width: 100px; text-align: center"
                        />
                        <a-input
                            style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff;height:33px"
                            placeholder="~"
                            disabled
                        />
                        <a-input suffix="】"
                            v-model:value="model['tolVal']"
                            style="width: 100px; text-align: center; border-left: 0"
                        />
                    </a-input-group>
                </a-col>
                <a-col :span="3">
                    <a-checkbox value="1" name="type" style="margin-left:20px;" @change="handleChangeLow" :checked="checkedLow">提醒</a-checkbox>
                </a-col>
                <a-col :span="11">
                    <JSelectUser v-model:value="model['noticeReceiveLow']" placeholder="请选择" :disabled="isDisabledLow"/>
                </a-col>
            </a-row>   
        </template>
        <template #warnVal="{model,field}">
            <a-row>
                <a-col :span="10">
                    <a-input-group compact>
                        <a-input  v-model:value="model['tolVal']"
                            prefix="（"
                            style="width: 100px; text-align: center"
                        />
                        <a-input
                            style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff;height:33px"
                            placeholder="~"
                            disabled
                        />
                        <a-input suffix="）"
                            v-model:value="model['warnVal']"
                            style="width: 100px; text-align: center; border-left: 0"
                        />
                    </a-input-group>
                </a-col>
                <a-col :span="3">
                    <a-checkbox value="1" name="type" style="margin-left:20px;"  @change="handleChangeMiddle" :checked="checkedMiddle">提醒</a-checkbox>
                </a-col>
                <a-col :span="11">
                    <JSelectUser v-model:value="model['noticeReceiveMiddle']" placeholder="请选择" :disabled="isDisabledMiddle"/>
                </a-col>
            </a-row>
        </template>
        <template #intvVal="{model,field}">
            <a-row>
                <a-col :span="10">
                    <a-input-group compact>
                        <a-input
                            v-model:value="model['warnVal']" prefix="【"
                            style="width: 100px; text-align: center"
                        />
                        <a-input
                            style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff;height:33px"
                            placeholder="~"
                            disabled
                        />
                        <a-input suffix="】"  v-model:value="model['intvVal']"
                            style="width: 100px; text-align: center; border-left: 0"
                        />
                    </a-input-group>
                </a-col>    
                <a-col :span="3">
                    <a-checkbox value="1" name="type" style="margin-left:20px;"  @change="handleChangeHight" :checked="checkedHight">提醒</a-checkbox>
                </a-col>
                <a-col :span="11">
                    <JSelectUser v-model:value="model['noticeReceiveHight']" placeholder="请选择" :disabled="isDisabledHight"/>
                </a-col>
            </a-row>
        </template>
      </BasicForm>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref,h} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
    import {formSchema} from '../MetricMonitorSet.data';
    import {saveOrUpdate,queryAllMetric} from '../MetricMonitorSet.api';
    import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';

    const emit = defineEmits(['register','success']);
    const mtrcCtp = ref();
    const isUpdate = ref(true);

    const isDisabledLow = ref(true);
    const isDisabledMiddle = ref(true);
    const isDisabledHight = ref(true);

    const checkedLow = ref(false);
    const checkedMiddle = ref(false);
    const checkedHight = ref(false);

    const [registerForm, {setProps,getFieldsValue,resetFields, setFieldsValue, validate,removeSchemaByFiled,appendSchemaByField}] = useForm({
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: {span: 24}
    });

    const metricSetVal = ref();

    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        clearThis();
        await removeSchemaByFiled("collMethod");
        mtrcCtp.value = data.mtrcCtp
        metricSetVal.value = data.record
        await resetFields();
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        if (unref(isUpdate)) {
            await setFieldsValue({
                ...data.record,
            }); 
        } else {
            await setFieldsValue({
                mtrcCtp:data.mtrcCtp
            }); 
        }

        if (unref(isUpdate)) {
            if(data.record.noticeReceiveMiddle) {
                isDisabledMiddle.value = false
                checkedMiddle.value = true
            }
            if(data.record.noticeReceiveHight) {
                isDisabledHight.value = false
                checkedHight.value  = true
            }
            if(data.record.noticeReceiveLow) {
                isDisabledLow.value = false
                checkedLow.value = true
            }
        }

    

        setProps({ disabled: !data?.showFooter })
    });

    const title = computed(() => (!unref(isUpdate) ? '新增计算指标' : '编辑计算指标'));
    async function handleSubmit() {
        try {
            let values = await validate();
            values['mtrcCtp'] =  mtrcCtp.value
            setModalProps({confirmLoading: true});
            await saveOrUpdate(values);
            closeModal();
            emit('success');
        } catch(e){
            console.log(e)
        } finally {
            setModalProps({confirmLoading: false});
        }
    }

    function handleChangeLow(checked) {
        if (checkedLow.value) {
            isDisabledLow.value =true
            setFieldsValue({
                noticeReceiveLow:""
            }); 
        } else {
            isDisabledLow.value =false
            setFieldsValue({
                noticeReceiveLow:metricSetVal.value.noticeReceiveLow
            }); 
        }
        checkedLow.value =!checkedLow.value
    }
    function handleChangeMiddle() {
        if (checkedMiddle.value) {
            isDisabledMiddle.value =true
            setFieldsValue({
                noticeReceiveMiddle:""
            }); 
        } else {
            isDisabledMiddle.value =false
            setFieldsValue({
                noticeReceiveMiddle:metricSetVal.value.noticeReceiveMiddle
            }); 
        }
        checkedMiddle.value =!checkedMiddle.value
    }

    function handleChangeHight(event) {
        if (checkedHight.value) {
            isDisabledHight.value =true
            setFieldsValue({
                noticeReceiveHight:""
            }); 
        } else {
            isDisabledHight.value =false
            setFieldsValue({
                noticeReceiveHight:metricSetVal.value.noticeReceiveHight
            }); 
        }
        checkedHight.value =!checkedHight.value
    }

    function clearThis() {
        isDisabledLow.value = true
        isDisabledMiddle.value = true
        isDisabledHight.value = true
        checkedLow.value =  false 
        checkedMiddle.value = false 
        checkedHight.value = false 
    }

</script>

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

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