<template>
  <div class="animations">
    <template v-if="props.pen.animations.length">
      <t-collapse
        v-model="openedCollapses"
        :borderless="true"
        :expand-on-row-click="true"
      >
        <t-collapse-panel v-for="(item, i) in props.pen.animations" :value="i">
          <template #header>
            <div class="flex middle" @click.stop>
              <t-input
                :title="item.name"
                :value="item.name"
                autoWidth
                class="mr-8"
                style="max-width: 60px"
                @change="changeAnimateName($event, item)"
                @blur="checkAnimateName(item)"
                @focus="bakAnimateName(item.name)"
              />
              <stop-circle-icon v-if="isPlaying === i"  
                class="hover primary"
                style="font-size: 16px"
                @click="stop"/>
              <play-circle-icon v-else 
                class="hover"
                style="font-size: 16px"
                @click="play(i)"/>
              <!-- <t-icon
                v-if="isPlaying === i"
                name="stop-circle"
                class="hover primary"
                style="font-size: 16px"
                @click="stop"
              />
              <t-icon
                v-else
                name="play-circle"
                class="hover"
                style="font-size: 16px"
                @click="play(i)"
              /> -->
            </div>
          </template>
          <template #headerRightContent>
            <t-space size="small" @click.stop>
              <edit-icon v-if="!props.pen.type && item.animate"
                class="hover mr-4"
                @click="animate = item"/>
              <!-- <t-icon
                v-if="!props.pen.type && item.animate"
                name="edit"
                class="hover mr-4"
                @click="animate = item"
              /> -->

              <t-popconfirm
                :content="$t('确认删除该动画吗')"
                placement="left"
                @confirm="delAnimate(i)"
              >
                <delete-icon  class="hover"/>
                <!-- <t-icon name="delete" class="hover" /> -->
              </t-popconfirm>
            </t-space>
          </template>
          <template v-if="props.pen.type">
            <div class="form-item">
              <label>{{$t('动画类型')}}</label>
              <t-select v-model="item.lineAnimateType" @change="changeValue(i)" :placeholder="$t('水流')">
                <t-option :key="0" :value="0" :label="$t('水流')"></t-option>
                <t-option :key="1" :value="1" :label="$t('水珠')"></t-option>
                <t-option :key="2" :value="2" :label="$t('圆点')"></t-option>
                <t-option v-if="['polyline','line'].includes(props.pen.lineName)" :key="3" :value="3" :label="$t('箭头')"></t-option>
                <t-option v-if="['polyline','line'].includes(props.pen.lineName)" :key="4" :value="4" :label="$t('水滴')"></t-option>
              </t-select>
            </div>

            <div class="form-item mt-8">
              <label>{{$t('运动速度')}}</label>
              <t-slider class="ml-12" v-model="item.animateSpan" :show-tooltip="true" :min="1" :max="10" @change="changeValue(i)"></t-slider>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('动画颜色')}}</label>
              <t-color-picker class="w-full" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" :clearable="true" v-model="item.animateColor" @change="changeValue(i)"></t-color-picker>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('发光效果')}}</label>
              <t-switch class="ml-8 mt-8" size="small" v-model="item.animateShadow" @change="changeValue(i)"></t-switch>
            </div>
            <div v-if="item.animateShadow" class="form-item mt-8">
              <label>{{$t('发光颜色')}}</label>
              <t-color-picker class="w-full" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" :clearable="true" v-model="item.animateShadowColor" @change="changeValue(i)"></t-color-picker>
            </div>
            <div v-if="item.animateShadow" class="form-item mt-8">
              <label>{{$t('发光模糊')}}</label>
              <t-input-number v-model="item.animateShadowBlur" theme="column" :min="1" @change="changeValue(i)" :placeholder="$t('默认6')"></t-input-number>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('轨迹宽度')}}</label>
              <t-input-number v-model="item.animateLineWidth" theme="column" :min="1" @change="changeValue(i)" :placeholder="$t('默认6')"></t-input-number>
            </div>
            <div v-if="item.lineAnimateType===3||item.lineAnimateType===4" class="form-item mt-8">
              <label>{{$t('轨迹间隔')}}</label>
              <t-input-number v-model="item.animateInterval" theme="column" :min="1" @change="changeValue(i)" :placeholder="$t('默认100')"></t-input-number>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('反向流动')}}</label>
              <t-switch class="ml-8 mt-8" size="small" v-model="item.animateReverse" @change="changeValue(i)"></t-switch>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('播放次数')}}</label>
              <t-input-number v-model="item.animateCycle" theme="column" :min="1" @change="changeValue(i)" :placeholder="$t('无限')" :title="$t('缺省无限循环播放')"></t-input-number>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('自动播放')}}</label>
              <t-switch class="ml-8 mt-8" size="small" v-model="item.autoPlay" @change="changeAnimateAutoPlay($event, item)"></t-switch>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('下个动画类型')}}</label>
              <t-radio-group class="ml-8" v-model="item.temType" @change="item.nextAnimate = ''">
                <t-radio value="id">{{$t('图元')}}</t-radio>
                <t-radio value="tag">{{$t('组')}}</t-radio>
              </t-radio-group>
            </div>
            <div class="form-item mt-8" :title="$t('当前动画结束后自动播放下一个对象的动画')">
              <label>{{$t('下个动画')}}</label>
              <t-tree-select v-if="item.temType === 'id'" v-model="item.nextAnimate" :data="penTree" filterable :placeholder="$t('无')"></t-tree-select>
              <t-select v-else v-model="item.nextAnimate" :options="groups" :placeholder="$t('组')"></t-select>
            </div>
          </template>
          <template v-else>
            <div class="form-item">
              <label>{{$t('动画类型')}}</label>
              <t-select v-model="item.animate" clearable :options="animateList" @change="changeAnimate(item)" :placeholder="$t('动画')"></t-select>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('播放次数')}}</label>
              <t-input-number v-model="item.animateCycle" theme="column" :min="1" :placeholder="$t('无限')" :title="$t('缺省无限循环播放')"></t-input-number>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('结束状态')}}</label>
              <t-select v-model="item.keepAnimateState" :placeholder="$t('初始状态')">
                <t-option :key="false" :value="false" :label="$t('初始状态')"></t-option>
                <t-option :key="true" :value="true" :label="$t('当前状态')"></t-option>
              </t-select>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('线性播放')}}</label>
              <t-tooltip placement="top" :content="$t('仅支持数字属性匀速线性播放')">
                <t-select v-model="item.linear" :placeholder="$t('是')">
                  <t-option :key="true" :value="true" :label="$t('是')"></t-option>
                  <t-option :key="false" :value="false" :label="$t('否')"></t-option>
                </t-select>
              </t-tooltip>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('自动播放')}}</label>
              <t-switch class="ml-8 mt-8" size="small" v-model="item.autoPlay" @change="changeAnimateAutoPlay($event, item)"></t-switch>
            </div>
            <div class="form-item mt-8">
              <label>{{$t('下个动画类型')}}</label>
              <t-radio-group class="ml-8" v-model="item.temType" @change="item.nextAnimate = ''">
                <t-radio value="id">{{$t('图元')}}</t-radio>
                <t-radio value="tag">{{$t('组')}}</t-radio>
              </t-radio-group>
            </div>
            <div class="form-item mt-8" :title="$t('当前动画结束后自动播放下一个对象的动画')">
              <label>{{$t('下个动画')}}</label>
              <t-tree-select v-if="item.temType === 'id'" v-model="item.nextAnimate" :data="penTree" filterable :placeholder="$t('无')"></t-tree-select>
              <t-select v-else v-model="item.nextAnimate" :options="groups" :placeholder="$t('组')"></t-select>
            </div>
          </template>
        </t-collapse-panel>
      </t-collapse>
      <t-divider />
      <div class="p-16">
        <t-button class="w-full" @click="addAnimate" style="height: 30px">
          {{$t('添加动画')}}
        </t-button>
      </div>
    </template>
    <div class="flex column center blank" v-else>
      <img src="/img/blank.png">
      <div class="gray center">{{$t('还没有动画')}}</div>
      <div class="mt-8">
        <t-button @click="addAnimate" style="height: 30px">{{$t('添加动画')}}</t-button>
      </div>
    </div>
  </div>
  <AnimateFrames
    v-if="animate"
    :animate="animate"
    @close="animate = undefined"
  />
</template>

<script lang="ts" setup>
import { onBeforeMount, ref, watch, onUnmounted,onBeforeUnmount,getCurrentInstance } from 'vue';

import { getPenTree } from '@/services/common';
import { deepClone } from '@meta2d/core';

import AnimateFrames from './AnimateFrames.vue';
import { defaultPureColor } from '@/services/defaults';
import { MessagePlugin } from 'tdesign-vue-next';
import {StopCircleIcon, PlayCircleIcon, EditIcon, DeleteIcon} from 'tdesign-icons-vue-next';
const { proxy } = getCurrentInstance();
const $t = proxy.$t
const props = defineProps<{
  pen: any;
}>();
let animateNameBak = '';
function changeAnimateAutoPlay(value, item) {
  if (value) {
    props.pen.autoPlay = true;
    if (props.pen.animations.length === 1) {
      item.autoPlay = true;
      return;
    }
    props.pen.animations.forEach((i) => {
      if (i.name !== item.name) {
        i.autoPlay = false;
      }
    });
    item.autoPlay = true;
  } else {
    let allFalse = props.pen.animations.every((i) => !i.autoPlay);
    if (allFalse) {
      props.pen.autoPlay = false;
      props.pen.frames = null;
    }
  }
}
const checkAnimateName = (item:any) => {
  if(!item.name) {
    MessagePlugin.warning($t('动画名不能为空！'));
    item.name = animateNameBak;
  }
}
const bakAnimateName = (name:string) => {
  animateNameBak = name;
}
const changeAnimateName = (event, item) => {
  let result = props.pen.animations.filter(
    (animation) => animation.name === event
  );
  if (result && result.length) {
    MessagePlugin.warning($t('已存在同名动画！'));
    return;
  } else {
    item.name = event;
  }
};

const penTree: any = ref([]);
const groups: any = ref([]);

const openedCollapses = ref([0]);

const animate: any = ref(undefined);

const animateList = [
  {
    label: $t('闪烁'),
    value: $t('闪烁'),
    data: [
      {
        visible: true,
        duration: 100,
      },
      {
        visible: false,
        duration: 100,
      },
    ],
  },
  {
    label: $t('缩放'),
    value: $t('缩放'),
    data: [
      {
        scale: 1.1,
        duration: 100,
      },
      {
        scale: 1,
        duration: 400,
      },
    ],
  },
  {
    label: $t('旋转'),
    value: $t('旋转'),
    data: [
      {
        rotate: 360,
        duration: 1000,
      },
    ],
  },
  {
    label: $t('逆向旋转'),
    value: $t('逆向旋转'),
    data: [
      {
        rotate: -360,
        duration: 1000,
      },
    ],
  },
  {
    label: $t('上下跳动'),
    value: $t('上下跳动'),
    data: [
      {
        y: -10,
        duration: 100,
      },
      { y: 0, duration: 100 },
      { y: -10, duration: 200 },
    ],
  },
  {
    label: $t('左右跳动'),
    value: $t('左右跳动'),
    data: [
      {
        x: -10,
        duration: 100,
      },
      {
        x: 10,
        duration: 80,
      },
      {
        x: -10,
        duration: 50,
      },
      {
        x: 10,
        duration: 30,
      },
      {
        x: 0,
        duration: 300,
      },
    ],
  },
  {
    label: $t('颜色变化'),
    value: $t('颜色变化'),
    data: [
      { color: '#4583ff', duration: 200 },
      { color: '#ff4000', duration: 200 },
    ],
  },
  {
    label: $t('背景变化'),
    value: $t('背景变化'),
    data: [
      { background: '#4583ff', duration: 200 },
      { background: '#ff4000', duration: 200 },
    ],
  },
  {
    label: $t('文字变化'),
    value: $t('文字变化'),
    data: [
      { text: $t('乐吾乐'), duration: 200 },
      { text: 'le5le', duration: 200 },
    ],
  },
  {
    label: $t('状态变化'),
    value: $t('状态变化'),
    data: [
      { showChild: 0, duration: 200 },
      { showChild: 1, duration: 200 },
    ],
  },
  {
    label: $t('翻转'),
    value: $t('翻转'),
    data: [
      { flipX: true, flipY: true, duration: 200 },
      { flipX: false, flipY: false, duration: 200 },
    ],
  },
  {
    label: $t('自定义'),
    value: 'custom',
    data: [],
  },
];

const isPlaying = ref(-1);

onBeforeMount(() => {
  if (!props.pen.animations) {
    props.pen.animations = [];
  }

  const p = meta2d.findOne(props.pen.id);
  if (p?.calculative?.start) {
    // @ts-ignore
    isPlaying.value = p?.currentAnimation;
  }
  meta2d.on('animateEnd', cancleAnimatePlayState);
  penTree.value = getPenTree().map(i=>{
    i.label+='-'+ i.value;
    return i
  }
  );
  groups.value = [];
  const d = meta2d.store.data as any;
  if (d.groups) {
    for (const item of d.groups) {
      groups.value.push({ label: item, value: item });
    }
  }
});
onBeforeUnmount(() => {
  meta2d.off('animateEnd', cancleAnimatePlayState);
})
const cancleAnimatePlayState = (pen) => {
  if(pen.id === props.pen.id) {
    isPlaying.value = -1;
  }
}
const watcher = watch(
  () => props.pen.id,
  () => {
    const p = meta2d.findOne(props.pen.id);
    if (p?.calculative?.start) {
      // @ts-ignore
      isPlaying.value = p?.currentAnimation;
    } else {
      isPlaying.value = -1;
    }
  }
);

const addAnimate = () => {
  openedCollapses.value.push(props.pen.animations.length);
  props.pen.animations.push({
    name: $t('动画') + (props.pen.animations.length + 1),
    temType: 'id'
  });
};

const delAnimate = (i: number) => {
  if (isPlaying.value === i) {
    meta2d.stopAnimate(props.pen.id);
    isPlaying.value = undefined;
  }
  if(props.pen.animate) {
    meta2d.setValue({
      id:props.pen.id,
      animate:undefined,
      animateCycle:undefined,
      autoPlay:undefined,
      frames:[]
    })
  }
  if(props.pen.type){
    meta2d.setValue({
      id:props.pen.id,
      autoPlay:undefined,
    });
  }
  props.pen.animations.splice(i, 1);
  animate.value = undefined;
};

const changeAnimate = (item: any) => {
  const animate: any = animateList.find((elem: any) => {
    return elem.value === item.animate;
  });

  if (!animate) {
    return;
  }

  item.frames = deepClone(animate.data);
};

const play = (i: number) => {
  meta2d.startAnimate(props.pen.id, i);
  isPlaying.value = i;
};

const stop = () => {
  meta2d.stopAnimate(props.pen.id);
  isPlaying.value = -1;
};

const changeValue = (i) => {
  if(i===isPlaying.value){
    play(i);
  }
};

onUnmounted(() => {
  watcher();
});
</script>
<style lang="postcss" scoped>
.animations {
  height: 100%;

  .blank {
    height: 70%;
    img {
      padding: 16px;
      opacity: 0.9;
    }
  }

  :deep(.t-collapse) {
    .t-collapse-panel__header {
      .t-input {
        border-color: transparent;
        &:hover {
          border-color: var(--color-border-input);
        }
      }
    }

    .t-collapse-panel__icon:hover {
      background: none;
      svg {
        color: var(--color-primary);
      }
    }
  }
}
</style>
