<template>
  <div>
    <p>
      点击树选项是否跳转：
      <a-switch v-model:checked="treeRadio" checked-children="是" un-checked-children="否" />
    </p>
    <p>
      矢量图层透明度：
      <a-slider
        v-model:value="nowValue_tuceng"
        :tooltipOpen="false"
        :tip-formatter="getValue"
        :marks="marks"
        :step="1"
        min="0"
        max="5"
        @afterChange="sliderChange_tuceng"
      >
        <template #mark="{ label, point }">
          <template v-if="point < 100">{{ label }}</template>
        </template>
      </a-slider>
    </p>
    <!-- <p>
      历史影像树层级分类：
      <a-radio-group v-model:value="yingxiangTreeMenu" button-style="solid">
        <a-radio-button value="0">时间</a-radio-button>
        <a-radio-button value="1">区县</a-radio-button>
      </a-radio-group>
    </p> -->
    <p>
      历史影像透明度：
      <a-slider
        v-model:value="nowValue_yingxiang"
        :tooltipOpen="false"
        :tip-formatter="getValue"
        :marks="marks"
        :step="1"
        min="0"
        max="5"
        @afterChange="sliderChange_yingxiang"
      >
        <template #mark="{ label, point }">
          <template v-if="point < 100">{{ label }}</template>
        </template>
      </a-slider>
    </p>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  // emit
  const emit = defineEmits([
    'changeFillLayerOpacity_tuceng',
    'changeFillLayerOpacity_yingxiang',
    'changeYingxiangTreeMenu',
  ]);

  // 点击树选项功能-------------------------------------------------------
  const treeRadio = ref(true);
  // 历史影像树层级分类-------------------------------------------------------
  const yingxiangTreeMenu = ref('0');
  watch(
    () => yingxiangTreeMenu.value,
    () => {
      emit('changeYingxiangTreeMenu');
    },
    {
      deep: true,
    },
  );

  // 抛出函数
  defineExpose({
    treeRadio,
    yingxiangTreeMenu,
  });

  // 标识
  const marks = ref<Record<number, any>>({
    0: 0,
    1: 0.2,
    2: 0.4,
    3: 0.6,
    4: 0.8,
    5: 1,
  });
  // 获取标识值
  const getValue = (key: number) => {
    if (marks.value) {
      return marks.value[key];
    }
  };

  // 矢量图层-------------------------------------------------------
  // 当前值
  const nowValue_tuceng = ref<number>(5);
  // 发生改变
  const sliderChange_tuceng = (key: number) => {
    emit('changeFillLayerOpacity_tuceng', getValue(key));
  };

  // 历史影像-------------------------------------------------------
  // 当前值
  const nowValue_yingxiang = ref<number>(5);
  // 发生改变
  const sliderChange_yingxiang = (key: number) => {
    emit('changeFillLayerOpacity_yingxiang', getValue(key));
  };
</script>
<style type="less" scoped></style>
