<template>
  <div class="transparency tool-kit" @click.stop>
    <section class="contain">
      <span>透明度</span>
      <a-slider v-model:value="slideVal" :tooltipVisible="false" @change="changeSlider" />
      <span>{{ `${slideVal}%` }}</span>
    </section>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import { computed } from '@vue/reactivity';

export default {
  name: 'Transparency',
  setup() {
    const slideVal = computed({
      get() {
        // getter
        return store.state.map.opacityVal;
      },
      set(val) {
        // setter
        changeSlider(val);
      },
    });

    const store = useStore();
    const changeSlider = (value) => {
      store.commit('map/updateState', { opacityVal: value });
    };

    return {
      slideVal,
      changeSlider,
    };
  },
};
</script>