<template>
  <el-scrollbar height="calc(100vh - 130px)" class="config">
    <el-form label-position="top">
      <ViewTitle title="设置动画">
        <template #right>
          <el-button type="text" @click="addAnimation"
            ><el-icon class="cursor-pointer" @click.stop="addAnimation"> <Plus /> </el-icon
          ></el-button>
        </template>
      </ViewTitle>
      <div v-for="item in data" :key="item.id">
        <el-collapse v-model="activeNames">
          <el-collapse-item :name="item.id">
            <template #title>
              <div class="collapse-title">
                <el-icon class="arrow" :class="{ active: activeNames.includes(item.id) }">
                  <ArrowRight />
                </el-icon>

                <span class="title-text">动画 - {{ item.name }}</span>

                <el-icon @click.stop="handleAnimationRemove(item)">
                  <Delete />
                </el-icon>
              </div>
            </template>
            <div class="px-10px">
              <el-input
                spellcheck="false"
                v-model="item.name"
                placeholder="动画名称"
                class="my-10px"
              />
              <el-card
                v-for="(animationItem, index) in item.timeline"
                :key="index"
                class="mb-10px relative"
              >
                <el-icon
                  class="absolute! right-12px bottom-10px cursor-pointer"
                  @click.stop="handletTimingFunction(item.timeline, 'delete', animationItem)"
                >
                  <Delete />
                </el-icon>
                <div class="mt-10px mb-10px flex justify-between items-center">
                  <span>动画属性</span>
                  <el-select
                    style="width: 100px"
                    v-model="animationItem.target"
                    placeholder="目标属性"
                    size="small"
                  >
                    <el-option
                      v-for="target in animationTargets"
                      :key="target.value"
                      :value="target.value"
                      :label="target.label"
                    />
                  </el-select>
                </div>
                <div class="flex flex-wrap gap-10px mb-10px pb-20px">
                  <input-number
                    v-model="animationItem.start"
                    controls-position="right"
                    placeholder="开始值"
                    :step="0.1"
                    :min="0"
                    style="flex: 0 0 calc(50% - 5px)"
                  />
                  <input-number
                    v-model="animationItem.end"
                    controls-position="right"
                    placeholder="结束值"
                    :step="0.1"
                    :min="0"
                    style="flex: 0 0 calc(50% - 5px)"
                  />
                  <input-number
                    v-model="animationItem.duration"
                    controls-position="right"
                    placeholder="动画时间"
                    :step="0.1"
                    :min="0"
                    style="flex: 0 0 calc(50% - 5px)"
                  />
                  <input-number
                    v-model="animationItem.delay"
                    controls-position="right"
                    placeholder="延迟时间"
                    :step="0.1"
                    :min="0"
                    style="flex: 0 0 calc(50% - 5px)"
                  />
                  <el-select
                    v-model="animationItem.timingFunction"
                    placeholder="动画效果"
                    style="flex: 0 0 calc(50% - 5px)"
                  >
                    <el-option
                      v-for="timing in timingFunctions"
                      :key="timing.value"
                      :value="timing.value"
                      :label="timing.label"
                    />
                  </el-select>
                  <el-select
                    v-model="animationItem.iterationCount"
                    placeholder="循环次数"
                    style="flex: 0 0 calc(50% - 5px)"
                  >
                    <el-option
                      v-for="iteration in iterationCounts"
                      :key="iteration.value"
                      :value="iteration.value"
                      :label="iteration.label"
                    />
                  </el-select>
                </div>
              </el-card>
              <div class="flex justify-between items-center gap-10px">
                <el-button
                  type="primary"
                  style="width: 100%"
                  @click="handletTimingFunction(item.timeline, 'add', '')"
                  >添加属性</el-button
                >
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-form>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { Animation } from '@/types/animation'
import { ArrowRight, Plus, Delete } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { animationTargets, timingFunctions, iterationCounts } from '@/constants'
import { v4 } from 'uuid'
interface Emits {
  (e: 'update:animation', val: Animation[]): void
}
const emit = defineEmits<Emits>()
const props = defineProps<{
  animation?: Animation[]
}>()
const activeNames = ref<string[]>([])
const data = ref<Animation[]>(props.animation || ({} as Animation[]))
watch(data, (val) => emit('update:animation', val))

const addAnimation = () => {
  const id = v4()
  data.value.push({
    id,
    name: `animation_${data.value.length + 1}`,
    timeline: []
  })
  activeNames.value.push(id)
}

const handleAnimationRemove = (animation) => {
  ElMessageBox.confirm('确定删除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = data.value.findIndex((item) => item.id === animation.id)
    if (index !== -1) {
      data.value.splice(index, 1)
    }
  })
}

const handletTimingFunction = (timeline, name, animationItem) => {
  if (name === 'add') {
    timeline.push({
      target: '',
      start: undefined,
      end: undefined,
      delay: undefined,
      duration: undefined,
      timingFunction: '',
      iterationCount: undefined
    })
  } else {
    const index = timeline.findIndex((item) => item.id === animationItem.id)
    if (index !== -1) {
      timeline.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-form-item) {
  margin-bottom: 5px;
}
:deep(.el-collapse-item__header) {
  padding-right: 0px;
}
:deep(.el-collapse-item__arrow) {
  display: none;
}
.collapse-title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}

.arrow {
  margin-right: 8px;
  transition: transform 0.2s;
}

.arrow.active {
  transform: rotate(90deg);
}

.title-text {
  flex: 1;
  font-weight: 500;
}
</style>
