<template>
  <div class="style-panel line-style-panel" :class="{ 'style-panel-visible': visible }">
    <div class="style-panel-header">
      <h3>线条样式</h3>
      <el-button icon="el-icon-close" size="mini" circle @click="$emit('close')"></el-button>
    </div>
    <div class="style-content">
      <div class="style-item">
        <span class="style-label">颜色：</span>
        <el-color-picker v-model="lineStyleValue.color" show-alpha @change="updateStyle">
        </el-color-picker>
      </div>
      <div class="style-item">
        <span class="style-label">样式：</span>
        <el-select v-model="lineStyleValue.pattern" placeholder="选择线条样式" @change="updateStyle">
          <el-option v-for="(pattern, key) in linePatterns" :key="key" :label="key" :value="key">
            <div class="pattern-preview-line" :style="getLinePatternStyle(key)"></div>
          </el-option>
        </el-select>
      </div>
      <div class="style-item">
        <span class="style-label">宽度：</span>
        <el-slider v-model="lineStyleValue.width" :min="1" :max="12" show-input
          @change="updateStyle">
        </el-slider>
      </div>
    </div>
  </div>
</template>

<script>
import { LineStyle } from '@int/geotoolkit/attributes/LineStyle';
import { LINE_PATTERNS, LINESTYLE_PATTERNS } from '@/api/Patterns.js';

export default {
  name: 'LineStylePanel',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    lineStyle: {
      type: Object,
      default: () => ({
        color: '#000000',
        width: 2,
        pattern: 'Solid'
      })
    },
    linePatterns: {
      type: Object,
      default: () => LINESTYLE_PATTERNS
    }
  },
  data() {
    return {
      lineStyleValue: { ...this.lineStyle },
      LINE_PATTERNS: LINE_PATTERNS
    };
  },
  watch: {
    lineStyle: {
      handler(newVal) {
        this.lineStyleValue = { ...newVal };
      },
      deep: true
    }
  },
  methods: {
    updateStyle() {
      // 发送样式更新事件
      this.$emit('update', this.lineStyleValue);
    },
    getLinePatternStyle(key) {
      let dashStyle = '';

      // 使用处理后的线条模式
      const patternArray = this.getProcessedLinePattern(key);
      if (patternArray && patternArray.length > 0) {
        dashStyle = patternArray.join('px ') + 'px';
      }

      return {
        background: 'transparent',
        backgroundImage: `url(${this.LINE_PATTERNS[key]})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'contain',
        backgroundPosition: 'center',
        height: '20px',
        width: '100%',
        margin: '5px 0'
      };
    },
    getProcessedLinePattern(pattern) {
      // 如果pattern是数组，直接返回
      if (Array.isArray(pattern)) {
        return pattern;
      }

      // 如果pattern是LINESTYLE_PATTERNS的键，使用该值
      if (this.linePatterns && this.linePatterns[pattern]) {
        return this.linePatterns[pattern];
      }

      // 根据常见的模式名称提供默认数组
      if (typeof pattern === 'string') {
        switch (pattern) {
          case 'Dash':
            return [20, 4];
          case 'Dot':
            return [2, 4];
          case 'DashDot':
            return [20, 4, 2, 4];
          case 'DashDotDot':
            return [20, 4, 2, 4, 2, 4];
          case 'ShortDash':
            return [10, 4];
          case 'LongDash':
            return [40, 4];
          case 'DashLongDash':
            return [20, 4, 40, 4];
          case 'Solid':
          case 'None':
          default:
            return []; // 默认为实线
        }
      }

      // 默认返回空数组（实线）
      console.log('使用默认实线模式，无法识别模式:', pattern);
      return [];
    }
  }
};
</script>

<style scoped>
.style-panel {
  position: fixed;
  right: -300px;
  top: 0;
  width: 300px;
  height: 100vh;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}

.style-panel-visible {
  right: 0;
}

.style-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
}

.style-panel-header h3 {
  margin: 0;
  font-size: 16px;
}

.style-content {
  padding: 15px;
}

.style-item {
  margin-bottom: 15px;
}

.style-label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.pattern-preview-line {
  width: 100%;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.el-slider {
  margin-top: 8px;
}

.el-color-picker {
  width: 100%;
}

.el-select {
  width: 100%;
}
</style> 