<template>
    <a-row style="width: 100%;">
      <a-col :span="10">
        <a-input-group compact>
          <a-input
            v-model:value="startValue"
            :prefix="prefix"
            style="width: 100px; text-align: center"
          />
          <a-input
            style="width: 5px; border-left: 1; pointer-events: none; height: 33px"
            placeholder="~"
            disabled=""
          />
          <a-input
            :suffix="suffix"
            v-model:value="endValue"
            style="width: 100px; text-align: center; border-left: 0"
          />
        </a-input-group>
      </a-col>
      <a-col :span="3">
        <a-checkbox
          style="margin-left: 20px;"
          @change="handleCheckboxChange"
          v-mode:checked="props.checked"
          :checked="chkChecked"
          ref="refCheckbox"
        >
          提醒
        </a-checkbox>
      </a-col>
      <a-col :span="11">
        <JSelectUser
          v-model:value="model[fieldName]"
          placeholder="请选择"
          :disabled="disabled"
        />
      </a-col>
    </a-row>
  </template>
  
  <script lang="ts" setup>
  import { ref, computed, toRefs,watch } from 'vue';
  import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
  
  const props = defineProps({
    model: {
      type: Object,
      required: true
    },
    field: {
      type: String,
      required: true
    },
    type: {
      type: String,
      required: true,
      validator: (value: string) => ['low', 'middle', 'high'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: true
    },
    checked: {
      type: Boolean,
      default: false
    },
    metricSetVal: {
      type: Object,
      default: () => ({})
    }
  });
 
  const emit = defineEmits(['change']);

  const disabled  = ref(true)
  const chkChecked = ref()
  const selUser = ref(props.metricSetVal)
  
  // 根据类型确定字段名和符号
  const fieldConfig = computed(() => {
    const config = {
      low: {
        startField: 'stTolVal',
        endField: 'tolVal',
        noticeField: 'noticeReceiveLow',
        prefix: '【',
        suffix: '】'
      },
      middle: {
        startField: 'tolVal',
        endField: 'warnVal',
        noticeField: 'noticeReceiveMiddle',
        prefix: '（',
        suffix: '）'
      },
      high: {
        startField: 'warnVal',
        endField: 'intvVal',
        noticeField: 'noticeReceiveHight',
        prefix: '【',
        suffix: '】'
      }
    };
    
    return config[props.type];
  });
  
  const fieldName = computed(() => fieldConfig.value.noticeField);
  const prefix = computed(() => fieldConfig.value.prefix);
  const suffix = computed(() => fieldConfig.value.suffix);

  
  const startValue = computed({
    get: () => props.model[fieldConfig.value.startField],
    set: (value) => props.model[fieldConfig.value.startField] = value
  });
  
  const endValue = computed({
    get: () => props.model[fieldConfig.value.endField],
    set: (value) => props.model[fieldConfig.value.endField] = value
  });

  function handleCheckboxChange() {
    disabled.value = !disabled.value
    chkChecked.value  = !chkChecked.value
  }

  const { metricSetVal } = toRefs(props);

  watch(metricSetVal, (newVal) => {
    if (newVal && Object.keys(newVal).length > 0) {
      disabled.value = false;
      chkChecked.value = true;
    } else {
      disabled.value = true;
      chkChecked.value = false;
    }
  }, { immediate: true }); 
  </script>
\