<template>
  <a-steps v-model:current="dataValue" @change="dataValueChange">
    <a-step
      :title="sItem.title"
      :description="sItem.detail"
      v-for="(sItem, sIndex) in props.record.formItemStep"
      :key="sIndex"
      :disabled="props.readonly || props.disabled"
    />
  </a-steps>
</template>

<script setup name="FormStep">
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  value: {
    type: Number,
    default: 0
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object,
    default: {}
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  }
});

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

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

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

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

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

<style></style>
