<template>
  <div>
    <div class="button-list-div">
      <div :class="`button-item ${getClassName(item)}`"
        v-for="item in list" 
        @click=changeButton(item)
      >
        <div class="button-span">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

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

const chartEditStore = useChartEditStore();

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

const defaultClick = props.chartConfig.option.selectButton;

const changeButton = (type) => {

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

// 每次切换后展示默认选中按钮
watch(
  ()=> props.chartConfig.status.hide,
  (newVal)=>{
    if(!newVal){
      changeButton(defaultClick)
    }
  }
)

const getClassName = (type) => {
  let className = ''
  switch(type){
    case '无人机':
      className = 'drone'
      break
    case '摄像头':
      className = 'camera'
      break
    case '高空瞭望':
      className = 'sentry'
      break
    case '卫星遥感':
      className = 'satellite'
      break
    default:
      className = 'app'
      break
  }
  if(props.chartConfig.option.selectButton == type){
    className = className + '-select'
  }
  return className
}


const { list, selectButton } = props.chartConfig.option
</script>
<style lang="scss" scoped>
.button-list-div{
  width: 100%;
  height: 100%;
  display: flex;
  .button-item{
    width: 186px;
    height: 168px;
    background-size: 100% 100%;
    cursor: pointer;
    user-select: none;
    position: relative;
    margin-right: 5px;
    .button-span{
      width: 100%;
      position: absolute;
      bottom: 5px;
      display: flex;
      justify-content: center;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 20px;
      color: #F1F8FF;
      line-height: 28px;
      letter-spacing: 1px;
      text-shadow: 0px 1px 4px rgba(34,54,74,0.5);
    }
  }
  .button-item:nth-last-child(1){
    margin-right: 0px;
  }
  .drone{
    background-image: url('/public/components/DeviceMenu/drone.png');
  }
  .drone-select{
    background-image: url('/public/components/DeviceMenu/drone_select.png');
  }
  .camera{
    background-image: url('/public/components/DeviceMenu/camera.png');
  }
  .camera-select{
    background-image: url('/public/components/DeviceMenu/camera_select.png');
  }
  .sentry{
    background-image: url('/public/components/DeviceMenu/sentry.png');
  }
  .sentry-select{
    background-image: url('/public/components/DeviceMenu/sentry_select.png');
  }
  .satellite{
    background-image: url('/public/components/DeviceMenu/satellite.png');
  }
  .satellite-select{
    background-image: url('/public/components/DeviceMenu/satellite_select.png');
  }
  .app{
    background-image: url('/public/components/DeviceMenu/app.png');
  }
  .app-select{
    background-image: url('/public/components/DeviceMenu/app_select.png');
  }
}
</style>
