<template>
  <div>
    <div class="button-list-div">
      <div :class="`button-item ${props.chartConfig.option.selectButton == item? 'button-select': ''}`"
        v-for="item in list" 
        @click=changeButton(item)
      >
        {{item}}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';

const chartEditStore = useChartEditStore();

const props = defineProps({
  chartConfig: {
    type: Object,
    required: true
  }
})

const changeButton = (type) => {

  props.chartConfig.option.selectButton = type

  eventHandlerHook(
    chartEditStore.getComponentList,
    props.chartConfig.events.interactConfigEvents[type],
    'click',
    type,
  );

}


const { list, selectButton } = props.chartConfig.option
</script>
<style lang="scss" scoped>
.button-list-div{
  width: 100%;
  height: 100%;
  display: flex;
  .button-item{
    width: 102px;
    height: 38px;
    background-image: url('/public/components/FeatureMenu/feature_button_background.png');
    background-size: 100% 100%;
    font-family: 'PingFangSC-Regular';
    font-weight: 400;
    font-size: 16px;
    color: #D4E9FF;
    line-height: 22px;
    text-shadow: 0px 1px 4px rgba(34,54,74,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    cursor: pointer;
    user-select: none;
  }
  .button-select{
    background-image: url('/public/components/FeatureMenu/feature_button_active.png');
  }
  .button-item:nth-last-child(1){
    margin-right: 0px;
  }
}
</style>
