<template>
  <div style="width: 100%">
    <t-radio-group
      v-model="valueData"
      allow-uncheck
      :options="options"
      style="min-height: 32px; width: 100%"
      :disabled="!config.writable"
      @change="emitChange"
    >
    </t-radio-group>
    <t-input
      v-model="inputData"
      :disabled="!config.writable || inputDisabled"
      placeholder="请填写具体内容"
      @change="emitChange"
    ></t-input>
  </div>
</template>

<script setup name="RADIOWITHINPUT">
import { ref, computed, watch } from 'vue';
const props = defineProps({
  config: { type: Object },
  modelValue: { type: Object },
});
const emit = defineEmits(['update:modelValue', 'change']);
const valueData = ref('');
const inputData = ref('');

const options = computed(() => {
  const config = props.config || {};
  return !config.options
    ? []
    : typeof config.options === 'string'
    ? JSON.parse(config.options)
    : config.options;
});
const inputDisabled = computed(() => {
  return valueData.value != options.value[options.value.length - 1].value;
});
const emitChange = () => {
  const data = {
    value: valueData.value,
    input: inputData.value,
  };

  emit('update:modelValue', data);
  emit('change', data);
};

watch(
  () => props.modelValue,
  (val, oldval) => {
    if (val === oldval) return;
    valueData.value = val?.value || '';
    inputData.value = val?.input || '';
  },
  {
    immediate: true,
  }
);
watch(valueData, (val) => {
  if (val != options.value[options.value.length - 1].value) {
    let data = { value: valueData.value, input: '' };
    emit('update:modelValue', data);
    emit('change', data);
  }
});
</script>
