<template>
  <div>
    <CusForm :columns="animateFormItems" @change="handleSetAnimate" />
  </div>
</template>

<script setup lang="ts">
import { CusForm, IFormItem } from "@shalu/dashboard-ui";
import { computed } from "vue";

const animateFormItems = computed((): IFormItem[] => {
  return [
    {
      label: "组件动画",
      type: "divider",
    },
    {
      label: "开启动画",
      prop: "animate.enable",
      type: "switch",
      defaultValue: false,
    },
    {
      type: "dependency",
      label: "",
      prop: "",
      name: ["animate.enable"],
      children: (model: Record<string, any>) => {
        return model["animate.enable"]
          ? [
              {
                label: "动画类型",
                prop: "animate.props.type",
                type: "select",
                fieldProps: {
                  placeholder: "请选择",
                  options: [
                    { label: "淡入", value: "fade-in" },
                    { label: "向右进入", value: "fade-right" },
                    { label: "向左进入", value: "fade-left" },
                    { label: "向上进入", value: "fade-top" },
                    { label: "向下进入", value: "fade-bottom" },
                  ],
                },
              },
              {
                label: "动画时长",
                prop: "animate.props.duration",
                type: "inputNumber",
                fieldProps: {
                  min: 0,
                  addonAfter: "ms",
                },
                defaultValue: 1000,
              },
            ]
          : [];
      },
    },
  ];
});
const handleSetAnimate = (data: any) => {
  console.log(data);
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
}
</style>
