<template>
  <section v-if="ehcatrsType.includes(item.type)">
    <div class="echarts-box" :id="item.type + currentIndex"></div>
    <div class="echatrs-theme">
      <div class="theme-title">风格切换：</div>
      <div class="theme-list">
        <div
          class="theme-item"
          @click="handlerTheme(item, themeIndex)"
          v-for="(themeItem, themeIndex) in echartsTheme"
          :key="themeIndex"
          :class="item.chartInstanceActiveIndex == themeIndex ? 'activeTheme' : ''"
        >
          {{ themeItem }}
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  currentIndex: {
    type: Number,
    default: 0
  }
})
const emits = defineEmits(['changeTheme'])
//主题
const echartsTheme = ['简约风', '商务风', '科技风']
const ehcatrsType = ['pie', 'line', 'bar', 'number']


const handlerTheme = (item,index)=>{
    emits('changeTheme',item,index)
}
</script>

<style scoped></style>
