<template>
  <div style="width: 100%">
    <dict-radio
      :valueType="record.formItemSelect.dictValueType == 1 ? 'dictId' : 'dictCode'"
      v-model:value="dataValue"
      :dictTypeId="record.formItemSelect.dictTypeId"
      :disabled="readonly || disabled"
      @change="dataValueChange"
      ref="selectRef"
      type="user"
    ></dict-radio>
  </div>
</template>

<script setup name="FormRadio">
import { isNumber } from '@/utils/common/util';
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  value: {
    type: [String, Number],
    default: ''
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 当前行数据
  record: {
    type: Object,
    default: {}
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['update:value', 'onChange']);

// ref
const selectRef = ref();
// 选中的值
const dataValue = ref('');

onMounted(() => {
  dataValue.value = props.value;
});

// 更改值
const dataValueChange = () => {
  emits('update:value', dataValue.value);
  emits('onChange', props.record);
};

watch(
  () => props.value,
  val => {
    dataValue.value = isNumber(props.value) ? props.value.toString() : props.value;
    dataValueChange();
  },
  { deep: true }
);

watch(
  () => selectRef.value?.dictList,
  val => {
    props.record.dictList = val;
  },
  { deep: true, immediate: true }
);

watch(
  () => props.record.dictList,
  val => {
    if (val) {
      selectRef.value.dictList = val;
    }
  },
  { deep: true }
);
</script>

<style></style>
