import { defineStore } from 'pinia';
import { setLocalStorage, getLocalStorage } from '@/views/echart-design/utils/storage';
import { useChartEditStore } from './chartEditStore';

const storageChartLayout = getLocalStorage('GUNS_CHART_LAYOUT');

// 编辑区域布局和静态设置
export const useChartLayoutStore = defineStore({
  id: 'useChartLayoutStore',
  state: () => ({
    // 图层控制
    layers: true,
    // 图表组件
    charts: true,
    // 详情设置（收缩为true）
    details: false,
    // 组件列表展示类型（默认单列）
    chartType: 'single',
    // 图层类型（默认图片）
    layerType: 'thumbnail',
    // 是否重置当前画布位置
    rePositionCanvas: false,
    // 防止值不存在
    ...storageChartLayout
  }),
  getters: {
    getLayers() {
      return this.layers;
    },
    getCharts() {
      return this.charts;
    },
    getDetails() {
      return this.details;
    },
    getChartType() {
      return this.chartType;
    },
    getLayerType() {
      return this.layerType;
    },
    getRePositionCanvas() {
      return this.rePositionCanvas;
    }
  },
  actions: {
    setItem(key, value) {
      const chartEditStore = useChartEditStore();
      this.$patch(state => {
        state[key] = value;
      });
      // setLocalStorage('GUNS_CHART_LAYOUT', this.$state);
      // 这里需要标记重置画布位置
      this.rePositionCanvas = true;
      // 重新计算拖拽区域缩放比例
      setTimeout(() => {
        chartEditStore.computedScale();
      }, 500);
    },
    setItemUnHandle(key, value) {
      this.$patch(state => {
        state[key] = value;
      });
    }
  }
});
