<template>
  <div class="right-slide">
    <div
      class="right-slide-item"
      :class="{ active: currentRightMenu === 0 }"
      @click="handleChange(0)"
    >
      <lz-svg-icon icon-class="aicz" class="right-slide-item-icon"/>
      <div>AI创作</div>
    </div>
    <div
      class="right-slide-item"
      :class="{ active: currentRightMenu === 1 }"
      @click="handleChange(1)"
    >
      <lz-svg-icon icon-class="airs" class="right-slide-item-icon"/>
      <div>AI润色</div>
    </div>
    <div
      class="right-slide-item"
      :class="{ active: currentRightMenu === 2 }"
      @click="handleChange(2)"
    >
      <lz-svg-icon icon-class="aizs" class="right-slide-item-icon"/>
      <div>AI助手</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import useStore from '@/stores'
import { computed } from 'vue'
const { docs }  = useStore()

const currentRightMenu = computed(() => docs.currentRightMenu)
const emit = defineEmits(['change'])

const handleChange = (val: any) => {
  docs.setCurrentPolish(0)
  docs.setCurrentRightMenu(val)
  emit('change', val)
}

</script>
<style scoped lang="scss">
.right-slide {
  width: 83px;

  &-item {
    width: 60px;
    margin: 16px auto;
    text-align: center;
    padding: 8px 0;
    transition: ease-in-out .3s all;
    &-icon {
      font-size: 22px;
      margin-bottom: 6px;
    }
  }

  &-item:hover,
  .active {
    color: #3067ef;
    background: #e8efff;
    border-radius: 8px 8px 8px 8px;
    cursor: pointer;
  }
}
</style>
