<template>
  <div class="custom-edit-bottom">
    <a-space>
      <edit-history></edit-history>
    </a-space>
    <a-space>
      <!-- 缩放比例 -->
      <a-select
        v-model:value="filterValue"
        :disabled="lockScale"
        style="width: 100px"
        size="small"
        :options="filterOptions"
        @change="selectHandle"
      >
      </a-select>

      <a-tooltip>
        <template #title>{{ lockScale ? '解锁' : '锁定' }}当前比例</template>
        <lock-outlined v-if="lockScale" class="lock" @click="lockHandle" />
        <unlock-outlined v-else class="lock" @click="lockHandle" />
      </a-tooltip>

      <div style="width: 150px">
        <a-slider
          v-model:value="sliderValue"
          :disabled="lockScale"
          :min="10"
          :max="200"
          :step="5"
          :marks="sliderMaks"
          @change="sliderHandle"
          :tip-formatter="sliderFormatTooltip"
        />
      </div>
    </a-space>
  </div>
</template>

<script setup name="EditBottom">
import { ref, toRefs, watch, watchEffect, reactive } from 'vue';
import EditHistory from './edit-history.vue';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { useChartLayoutStore } from '@/store/modules/chart/chartLayoutStore';
import { Tooltip as ATooltip, Slider as ASlider } from 'ant-design-vue';

const chartEditStore = useChartEditStore();
const chartLayoutStore = useChartLayoutStore();

const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas);

const isDrag = ref(true);

// 缩放选项
let filterOptions = [
  {
    label: '200%',
    value: 200
  },
  {
    label: '150%',
    value: 150
  },
  {
    label: '100%',
    value: 100
  },
  {
    label: '50%',
    value: 50
  },
  {
    label: '自适应',
    value: 0
  }
];

// 选择值
const filterValue = ref('');

// 用户自选择
const selectHandle = v => {
  if (v === 0) {
    chartLayoutStore.setItemUnHandle('rePositionCanvas', true);
    chartEditStore.computedScale();
    return;
  }
  chartEditStore.setScale(v / 100);
};

// 点击锁处理
const lockHandle = () => {
  chartEditStore.setEditCanvas('lockScale', !lockScale.value);
};

// 拖动
const sliderValue = ref(100);

// 拖动处理
const sliderHandle = v => {
  chartEditStore.setScale(v / 100);
};

// 拖动格式化
const sliderFormatTooltip = v => `${v}%`;

const sliderMaks = reactive({
  100: ''
})

watch(
  () => lockScale.value,
  val => {
    isDrag.value = !lockScale.value;
  }
);

// 监听 scale 变化
watchEffect(() => {
  const value = (scale.value * 100).toFixed(0);
  filterValue.value = `${value}%`;
  sliderValue.value = parseInt(value);
});
</script>

<style scoped lang="less">
.custom-edit-bottom {
  width: 100%;
  min-width: 500px;
  min-width: 670px;
  padding: 0 10px;
  padding-left: 20px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .lock {
    font-size: 18px;
    opacity: 0.5;
  }
}
:deep(.ant-slider-rail) {
  background-color: #dbdbdf;
}
:deep(.ant-slider-disabled .ant-slider-rail) {
  background-color: #dbdbdf !important;
}
:deep(.ant-slider-disabled .ant-slider-track) {
  background-color: var(--primary-3) !important;
}
:deep(.ant-slider-with-marks) {
  margin-bottom: 10px;
}
</style>
