<template>
  <el-form class="anima"
           label-width="90px"
           label-position="left">
    <el-form-item label="开启动画">
      <avue-switch v-model="contain.activeComponent.animatedSwitch"></avue-switch>
    </el-form-item>
    <el-form-item label="移入动画">
      <avue-input v-model="contain.activeComponent.animated"></avue-input>
    </el-form-item>
    <el-form-item label="移出动画">
      <avue-input v-model="contain.activeComponent.animatedHide"></avue-input>
    </el-form-item>
    <el-form-item label="开启循环">
      <avue-switch v-model="contain.activeComponent.animatedInfinite"></avue-switch>
    </el-form-item>
    <el-form-item label="播放速度">
      <avue-select v-model="contain.activeComponent.animateSpeed"
                   placeholder="请选择播放速度"
                   :dic="dicOption.animateSpeed"></avue-select>
    </el-form-item>
    <el-form-item label="交替方向">
      <avue-select placeholder="请选择交替方向"
                   v-model="contain.activeComponent.animateDirection"
                   :dic="dicOption.animateDirection"></avue-select>
    </el-form-item>
    <el-form-item label="动画时长">
      <el-input placeholder="2"
                v-model="contain.activeComponent.animateDuration">
        <template #append>
          <span>秒</span>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="动画延时">
      <el-input placeholder="0"
                v-model="contain.activeComponent.animateDelay">
        <template #append>
          <span>秒</span>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label-width="0">
      <el-tabs class="menu__tabs"
               stretch
               v-model="tabs">
        <el-tab-pane :name="index"
                     :key="index"
                     v-for="(item,index) in list">
          <template #label>
            <span>{{ item.label }}</span>
          </template>
        </el-tab-pane>
        <div class="anima__link">
          <a href="https://www.dowebok.com/demo/2014/98/"
             target="_blank">动画库参考</a>
        </div>
      </el-tabs>
      <div class="anima__list">
        <div class="anima__item"
             @mouseenter="item.hover=true"
             @mouseleave="item.hover=false"
             v-for="(item,index) in list[tabs].list"
             :key="index">
          <el-button :type="isActiveAnimation(item.value)?'primary':'info'" @click="handleAnimationClick(item.value)">
            <div :class="getClass(item)">
              {{ item.label }}
              <div class="anima__badge" v-if="getAnimationTypes(item.value).length > 0">
                <el-tooltip effect="dark" placement="top">
                  <template #content>
                    <div v-for="(type, index) in getAnimationTypes(item.value)" :key="index">
                      {{ type === 'in' ? '移入动画' : '移出动画' }}
                    </div>
                  </template>
                  <el-tag size="small" :type="getBadgeType(item.value)">
                    {{ getBadgeText(item.value) }}
                  </el-tag>
                </el-tooltip>
              </div>
            </div>
          </el-button>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { dicOption } from '@/option/config'
export default {
  inject: ["contain"],
  data () {
    return {
      dicOption,
      tabs: 0,
      customAnimated: '',
      list: [{
        label: '移入',
        list: [{
          label: '渐显',
          value: 'fadeIn',
          hover: false
        }, {
          label: '向右进入',
          value: 'fadeInRight',
          hover: false
        }, {
          label: '向左进入',
          value: 'fadeInLeft',
          hover: false
        }, {
          label: '向上进入',
          value: 'fadeInUp',
          hover: false
        }, {
          label: '向下进入',
          value: 'fadeInDown',
          hover: false
        }, {
          label: '向右长距进入',
          value: 'fadeInLeftBig',
          hover: false
        }, {
          label: '向左长距进入',
          value: 'fadeInRightBig',
          hover: false
        }, {
          label: '向上长距进入',
          value: 'fadeInUpBig',
          hover: false
        }, {
          label: '向下长距进入',
          value: 'fadeInDownBig',
          hover: false
        }, {
          label: '旋转进入',
          value: 'rotateIn',
          hover: false
        }, {
          label: '左顺时针旋转',
          value: 'rotateInDownLeft',
          hover: false
        }, {
          label: '右逆时针旋转',
          value: 'rotateInDownRight',
          hover: false
        }, {
          label: '左逆时针旋转',
          value: 'rotateInUpLeft',
          hover: false
        }, {
          label: '右逆时针旋转',
          value: 'rotateInUpRight',
          hover: false
        }, {
          label: '弹入',
          value: 'bounceIn',
          hover: false
        }, {
          label: '向右弹入',
          value: 'bounceInRight',
          hover: false
        }, {
          label: '向左弹入',
          value: 'bounceInLeft',
          hover: false
        }, {
          label: '向上弹入',
          value: 'bounceInUp',
          hover: false
        }, {
          label: '向下弹入',
          value: 'bounceInDown',
          hover: false
        }, {
          label: '光速从右进入',
          value: 'lightSpeedInRight',
          hover: false
        }, {
          label: '光速从左进入',
          value: 'lightSpeedInLeft',
          hover: false
        }, {
          label: '光速从右进入',
          value: 'lightSpeedOutRight',
          hover: false
        }, {
          label: '光速从左进入',
          value: 'lightSpeedOutRight',
          hover: false
        }, {
          label: 'Y轴旋转',
          value: 'flip',
          hover: false
        }, {
          label: '中心X轴旋转',
          value: 'flipInX',
          hover: false
        }, {
          label: '中心Y轴旋转',
          value: 'flipInY',
          hover: false
        }, {
          label: '左长半径旋转',
          value: 'rollIn',
          hover: false
        }, {
          label: '由小变大进入',
          value: 'rollIn',
          hover: false
        }, {
          label: '左变大进入',
          value: 'zoomInLeft',
          hover: false
        }, {
          label: '右变大进入',
          value: 'zoomInRight',
          hover: false
        }, {
          label: '向上变大进入',
          value: 'zoomInUp',
          hover: false
        }, {
          label: '向下变大进入',
          value: 'zoomInDown',
          hover: false
        }, {
          label: '向右滑动展开',
          value: 'slideInRight',
          hover: false
        }, {
          label: '向左滑动展开',
          value: 'slideInLeft',
          hover: false
        }, {
          label: '向上滑动展开',
          value: 'slideInUp',
          hover: false
        }, {
          label: '向下滑动展开',
          value: 'slideInDown',
          hover: false
        },{
          label: '弹跳',
          value: 'bounce',
          hover: false
        }, {
          label: '闪烁',
          value: 'flash',
          hover: false
        }, {
          label: '放大缩小',
          value: 'pulse',
          hover: false
        }, {
          label: '快速放大缩小',
          value: 'heartBeat',
          hover: false
        }, {
          label: '放大缩小弹簧',
          value: 'rubberBand',
          hover: false
        }, {
          label: '左右晃动',
          value: 'headShake',
          hover: false
        }, {
          label: '左右扇形摇摆',
          value: 'swing',
          hover: false
        }, {
          label: '放大晃动缩小',
          value: 'tada',
          hover: false
        }, {
          label: '扇形摇摆',
          value: 'wobble',
          hover: false
        }, {
          label: '左右上下晃动',
          value: 'jello',
          hover: false 
        }]
      }, {
        label: '移出',
        list: [{
          label: '渐隐',
          value: 'fadeOut',
          hover: false
        }, {
          label: '向左退出',
          value: 'fadeOutLeft',
          hover: false
        }, {
          label: '向右退出',
          value: 'fadeOutRight',
          hover: false
        }, {
          label: '向上退出',
          value: 'fadeOutUp',
          hover: false
        }, {
          label: '向下退出',
          value: 'fadeOutDown',
          hover: false
        }, {
          label: '向左长距退出',
          value: 'fadeOutLeftBig',
          hover: false
        }, {
          label: '向右长距退出',
          value: 'fadeOutRightBig',
          hover: false
        }, {
          label: '向上长距退出',
          value: 'fadeOutUpBig',
          hover: false
        }, {
          label: '向下长距退出',
          value: 'fadeOutDownBig',
          hover: false
        }, {
          label: '旋转退出',
          value: 'rotateOut',
          hover: false
        }, {
          label: '左顺时针旋转',
          value: 'rotateOutDownLeft',
          hover: false
        }, {
          label: '右逆时针旋转',
          value: 'rotateOutDownRight',
          hover: false
        }, {
          label: '左逆时针旋转',
          value: 'rotateOutUpLeft',
          hover: false
        }, {
          label: '右逆时针旋转',
          value: 'rotateOutUpRight',
          hover: false
        }, {
          label: '弹出',
          value: 'bounceOut',
          hover: false
        }, {
          label: '向左弹出',
          value: 'bounceOutLeft',
          hover: false
        }, {
          label: '向右弹出',
          value: 'bounceOutRight',
          hover: false
        }, {
          label: '向上弹出',
          value: 'bounceOutUp',
          hover: false
        }, {
          label: '向下弹出',
          value: 'bounceOutDown',
          hover: false
        }, {
          label: '中心X轴旋转',
          value: 'flipOutX',
          hover: false
        }, {
          label: '中心Y轴旋转',
          value: 'flipOutY',
          hover: false
        }, {
          label: '左长半径旋转',
          value: 'rollOut',
          hover: false
        }, {
          label: '由小变大退出',
          value: 'zoomOut',
          hover: false
        }, {
          label: '左变大退出',
          value: 'zoomOutLeft',
          hover: false
        }, {
          label: '右变大退出',
          value: 'zoomOutRight',
          hover: false
        }, {
          label: '向上变大退出',
          value: 'zoomOutUp',
          hover: false
        }, {
          label: '向下变大退出',
          value: 'zoomOutDown',
          hover: false
        }, {
          label: '向左滑动收起',
          value: 'slideOutLeft',
          hover: false
        }, {
          label: '向右滑动收起',
          value: 'slideOutRight',
          hover: false
        }, {
          label: '向上滑动收起',
          value: 'slideOutUp',
          hover: false
        }, {
          label: '向下滑动收起',
          value: 'slideOutDown',
          hover: false
        }]
      }]
    }
  },
  methods: {
    getClass (item) {
      return 'animated ' + (item.hover ? item.value : '');
    },
    isActiveAnimation (value) {
      // 检查当前动画值是否被用作移入或移出动画
      const isInAnimation = this.contain.activeComponent.animated === value;
      const isOutAnimation = this.contain.activeComponent.animatedHide === value;
      
      // 如果任一类型的动画被设置为该值，则高亮显示
      return isInAnimation || isOutAnimation;
    },
    handleAnimationClick (value) {
      // 根据当前选中的选项卡设置不同的动画类型
      if (this.tabs === 0) {
        if (this.contain.activeComponent.animated === value) {
          this.contain.activeComponent.animated = '';
        } else {
          this.contain.activeComponent.animated = value;
        }
      } else if (this.tabs === 1) {
        if (this.contain.activeComponent.animatedHide === value) {
          this.contain.activeComponent.animatedHide = '';
        } else {
          this.contain.activeComponent.animatedHide = value;
        }
      }
    },
    getAnimationTypes (value) {
      const types = [];
      
      // 检查是否被设置为移入动画
      if (this.contain.activeComponent.animated === value) {
        types.push('in');
      }
      
      // 检查是否被设置为移出动画
      if (this.contain.activeComponent.animatedHide === value) {
        types.push('out');
      }
      
      return types;
    },
    getBadgeType (value) {
      const types = this.getAnimationTypes(value);
      if (types.includes('in') && types.includes('out')) {
        // 同时用作移入和移出动画
        return 'warning';
      } else if (types.includes('in')) {
        // 仅用作移入动画
        return 'success';
      } else if (types.includes('out')) {
        // 仅用作移出动画
        return 'danger';
      }
      return 'info';
    },
    getBadgeText (value) {
      const types = this.getAnimationTypes(value);
      if (types.includes('in') && types.includes('out')) {
        return '入出';
      } else if (types.includes('in')) {
        return '入';
      } else if (types.includes('out')) {
        return '出';
      }
      return '';
    }
  }
}
</script>

<style lang="scss">
.anima {
  &__list {
    display: flex;
    flex-wrap: wrap;
  }
  &__item {
    box-sizing: border-box;
    padding: 5px;
    position: relative;
    
    .el-button {
      padding-left: 0;
      padding-right: 0;
      text-align: center;
      width: 90px;
    }
    
    .el-dropdown {
      display: block;
    }
  }
  &__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 1;
  }
  &__link {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    
    a {
      color: var(--primary-color);
      text-decoration: none;
      font-size: 14px;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>