<template>
  <div class="h-full">
    <el-tabs size="small" class="h-full">
      <el-tab-pane label="属性">
        <property />
      </el-tab-pane>
      <el-tab-pane label="变量">
        <variable-config v-model:variables="variables" />
      </el-tab-pane>
      <el-tab-pane label="动画">
        <animation-config v-model:animation="animation" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
// import PropertyConfig from './PropertyConfig.vue'
import VariableConfig from './VariableConfig.vue'
import AnimationConfig from './AnimationConfig.vue'
import Property from './property/index.vue'
import { useProjectStore } from '@/store/modules/project'

const projectStore = useProjectStore()

// 变量
const variables = computed({
  get() {
    return projectStore.project?.variables || []
  },
  set(val) {
    if (projectStore.project) projectStore.project.variables = val
  }
})
// 动画
const animation = computed({
  get() {
    return projectStore.project?.animations || []
  },
  set(val) {
    if (projectStore.project) projectStore.project.animations = val
  }
})
</script>

<style scoped lang="less">
:deep(.el-tabs__nav-wrap.is-top) {
  padding: 0 20px;
}
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
