<template>
  <el-form-item label="入场动画">
    <el-select v-model="enter" style="width: 130px" @change="sync">
      <el-option label="无" value="none" />
      <el-option label="淡入" value="fadeIn" />
      <el-option label="上滑" value="slideUp" />
      <el-option label="左滑" value="slideLeft" />
      <el-option label="缩放" value="zoomIn" />
    </el-select>
    <el-input-number v-model="delay" :min="0" :max="5000" style="width: 110px; margin-left: 8px" @change="sync" />
    <span class="hint">延迟ms</span>
    <el-input-number v-model="duration" :min="100" :max="3000" style="width: 110px; margin-left: 8px" @change="sync" />
    <span class="hint">时长ms</span>
  </el-form-item>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: { type: Object, default: () => ({}) }
})
const emit = defineEmits(['update:modelValue'])

const enter = ref('fadeIn')
const delay = ref(0)
const duration = ref(600)

function fromModel() {
  const a = props.modelValue || {}
  enter.value = a.enter || 'fadeIn'
  delay.value = a.delay_ms ?? 0
  duration.value = a.duration_ms ?? 600
}

function sync() {
  emit('update:modelValue', {
    enter: enter.value,
    delay_ms: delay.value,
    duration_ms: duration.value
  })
}

watch(() => props.modelValue, fromModel, { immediate: true, deep: true })
</script>

<style scoped>
.hint {
  font-size: 12px;
  color: #909399;
  margin-left: 4px;
}
</style>
