import { defineComponent, ref, watch } from "vue";

const animateList = [
  { label: "无", value: "" },
  { label: "fadeIn", value: "fadeIn" },
  { label: "fadeInDown", value: "fadeInDown" },
  { label: "fadeInLeft", value: "fadeInLeft" },
  { label: "fadeInRight", value: "fadeInRight" },
  { label: "fadeInUp", value: "fadeInUp" },
  { label: "fadeOut", value: "fadeOut" },
  { label: "fadeOutDown", value: "fadeOutDown" },
  { label: "fadeOutLeft", value: "fadeOutLeft" },
  { label: "fadeOutRight", value: "fadeOutRight" },
  { label: "fadeOutUp", value: "fadeOutUp" },
  { label: "slideInDown", value: "slideInDown" },
  { label: "slideInLeft", value: "slideInLeft" },
  { label: "slideInRight", value: "slideInRight" },
  { label: "slideInUp", value: "slideInUp" },
  { label: "slideOutDown", value: "slideOutDown" },
  { label: "slideOutLeft", value: "slideOutLeft" },
  { label: "slideOutRight", value: "slideOutRight" },
  { label: "slideOutUp", value: "slideOutUp" },
  { label: "zoomIn", value: "zoomIn" },
  { label: "zoomInDown", value: "zoomInDown" },
  { label: "zoomInLeft", value: "zoomInLeft" },
  { label: "zoomInRight", value: "zoomInRight" },
  { label: "zoomInUp", value: "zoomInUp" },
  { label: "zoomOut", value: "zoomOut" },
  { label: "zoomOutDown", value: "zoomOutDown" },
  { label: "zoomOutLeft", value: "zoomOutLeft" },
  { label: "zoomOutRight", value: "zoomOutRight" },
  { label: "zoomOutUp", value: "zoomOutUp" },
  { label: "bounceIn", value: "bounceIn" },
  { label: "bounceInDown", value: "bounceInDown" },
  { label: "bounceInLeft", value: "bounceInLeft" },
  { label: "bounceInRight", value: "bounceInRight" },
  { label: "bounceInUp", value: "bounceInUp" },
  { label: "bounceOut", value: "bounceOut" },
  { label: "bounceOutDown", value: "bounceOutDown" },
  { label: "bounceOutLeft", value: "bounceOutLeft" },
  { label: "bounceOutRight", value: "bounceOutRight" },
  { label: "bounceOutUp", value: "bounceOutUp" },
  { label: "flipInX", value: "flipInX" },
  { label: "flipInY", value: "flipInY" },
  { label: "flipOutX", value: "flipOutX" },
  { label: "flipOutY", value: "flipOutY" },
  { label: "lightSpeedIn", value: "lightSpeedIn" },
  { label: "lightSpeedOut", value: "lightSpeedOut" },
  { label: "rotateIn", value: "rotateIn" },
  { label: "rotateInDownLeft", value: "rotateInDownLeft" },
  { label: "rotateInDownRight", value: "rotateInDownRight" },
  { label: "rotateInUpLeft", value: "rotateInUpLeft" },
  { label: "rotateInUpRight", value: "rotateInUpRight" },
  { label: "rotateOut", value: "rotateOut" },
  { label: "rotateOutDownLeft", value: "rotateOutDownLeft" },
  { label: "rotateOutDownRight", value: "rotateOutDownRight" },
  { label: "rotateOutUpLeft", value: "rotateOutUpLeft" },
  { label: "rotateOutUpRight", value: "rotateOutUpRight" },
  { label: "rollIn", value: "rollIn" },
  { label: "rollOut", value: "rollOut" }
];

export default defineComponent({
  name: "ReAnimateSelector",
  props: {
    modelValue: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "请选择动画"
    }
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const currentValue = ref(props.modelValue);

    watch(
      () => props.modelValue,
      val => {
        currentValue.value = val;
      }
    );

    watch(currentValue, val => {
      emit("update:modelValue", val);
    });

    return () => (
      <el-select
        v-model={currentValue.value}
        placeholder={props.placeholder}
        clearable
        filterable
        class="w-full"
      >
        {animateList.map(item => (
          <el-option key={item.value} label={item.label} value={item.value} />
        ))}
      </el-select>
    );
  }
});
