<template>
  <el-dialog :title="title"
             class="avue-dialog"
             width="1000"
             :model-value="modelValue"
             @update:model-value="handleModelValueUpdate">
    <div class="map-preview">
      <div class="map-controls">
        <el-form :model="option.option" label-width="100px" size="small">
          <!-- 基础设置 -->
          <div class="form-section">
            <el-form-item label="缩放比例">
              <el-slider v-model="option.option.zoom" 
                        :min="0.1" 
                        :max="2" 
                        :step="0.1"/>
            </el-form-item>
            <el-form-item label="边框宽度">
              <el-input-number v-model="option.option.borderWidth" 
                              :min="0" 
                              :max="10"/>
            </el-form-item>
            <el-form-item label="字体大小">
              <el-input-number v-model="option.option.fontSize" 
                              :min="8" 
                              :max="24"/>
            </el-form-item>
          </div>

          <!-- 颜色设置 -->
          <div class="form-section">
            <el-form-item label="边框颜色">
              <el-color-picker v-model="option.option.borderColor" 
                              show-alpha/>
            </el-form-item>
            <el-form-item label="区域颜色">
              <el-color-picker v-model="option.option.areaColor" 
                              show-alpha/>
            </el-form-item>
            <el-form-item label="高亮颜色">
              <el-color-picker v-model="option.option.empAreaColor" 
                              show-alpha/>
            </el-form-item>
            <el-form-item label="文字颜色">
              <el-color-picker v-model="option.option.color" 
                              show-alpha/>
            </el-form-item>
          </div>

          <!-- 提示设置 -->
          <div class="form-section">
            <el-form-item label="提示背景色">
              <el-color-picker v-model="option.option.tipBackgroundColor" 
                              show-alpha/>
            </el-form-item>
            <el-form-item label="提示文字色">
              <el-color-picker v-model="option.option.tipColor" 
                              show-alpha/>
            </el-form-item>
            <el-form-item label="提示字号">
              <el-input-number v-model="option.option.tipFontSize" 
                              :min="12" 
                              :max="32"/>
            </el-form-item>
          </div>
        </el-form>
      </div>
      
      <div class="map-container">
        <avue-echart-map v-if="modelValue"
                         v-bind="option"
                         :map-formatter="mapFormatter"></avue-echart-map>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getMapData } from '@/api/map'
import AvueEchartMap from '@/echart/packages/map/index.vue'

export default {
  name: 'MapPreview',
  components: {
    AvueEchartMap
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    mapData: {
      type: [Number, String],
      required: true
    },
    title: {
      type: String,
      default: '地图预览'
    }
  },
  data() {
    return {
      mapFormatter: getMapData,
      option: {
        width: 600,
        height: 500,
        option: {
          mapData: this.mapData,
          tipBackgroundColor: "rgba(13, 255, 255, .5)",
          tipColor: "rgba(217, 38, 10, 1)",
          tipFontSize: "20",
          borderWidth: 1,
          scale: 100,
          type: 0,
          borderColor: "#0dffff",
          areaColor: "rgba(6, 29, 51, 0.59)",
          fontSize: 12,
          zoom: 0.5,
          empAreaColor: "rgba(35, 183, 229, 0.42)",
          empColor: "rgba(217, 38, 10, 1)",
          color: "rgba(13, 255, 255, 1)",
        }
      }
    }
  },
  watch: {
    mapData: {
      handler(val) {
        this.option.option.mapData = val
      },
      immediate: true
    }
  },
  methods: {
    handleModelValueUpdate(value) {
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-preview {
  display: flex;
  gap: 20px;
  
  .map-controls {
    width: 300px;
    background: var(--bg-color-overlay);
    border-radius: 8px;
    border: 1px solid var(--border-color-light);
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb-color);
      border-radius: 3px;
    }
  }
  
  .map-container {
    flex: 1;
    background: var(--bg-color-overlay);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border-color-light);
  }
}

.form-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color-light);
  
  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.section-title {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 2px solid var(--primary-color);
}

// 表单项样式
:deep(.el-form-item) {
  margin-bottom: 15px;
  
  .el-form-item__label {
    color: var(--text-color-secondary);
    font-size: 14px;
  }
}

// 输入框样式
:deep(.el-input-number) {
  width: 100%;
  .el-input__wrapper {
    background: var(--bg-color-input);
    border: 1px solid var(--border-color-light);
  }
}

// 滑块样式
:deep(.el-slider) {
  .el-slider__runway {
    background-color: var(--border-color-light);
  }
  .el-slider__bar {
    background-color: var(--primary-color);
  }
  .el-slider__button {
    border: 2px solid var(--primary-color);
  }
}
</style> 