<template>
  <div class="color-input">
    <div class="color-input-header">
      <span class="color-input-label">{{ name }}</span>
    </div>
    <div class="color-input-content">
      <div class="color-picker-container">
        <el-color-picker 
          v-model="colorValue" 
          show-alpha
          @change="colorChanged"
        ></el-color-picker>
      </div>
      <div class="pattern-selector">
        <el-select v-model="patternValue" placeholder="模式" @change="patternChanged">
          <el-option
            v-for="(pattern, index) in patternList"
            :key="index"
            :label="pattern"
            :value="pattern">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ColorInput',
  props: {
    name: {
      type: String,
      default: 'Color'
    },
    color: {
      type: String,
      default: '#000000'
    },
    pattern: {
      type: [String, Array],
      default: null
    },
    patternList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      colorValue: this.color,
      patternValue: this.pattern
    }
  },
  methods: {
    colorChanged(value) {
      this.$emit('changed', {
        color: value,
        pattern: this.patternValue
      });
    },
    patternChanged(value) {
      this.$emit('changed', {
        color: this.colorValue,
        pattern: value
      });
    },
    updateEyeDropper(color) {
      this.colorValue = color;
      this.$emit('eyedropper-changed', color);
    }
  },
  watch: {
    color(val) {
      this.colorValue = val;
    },
    pattern(val) {
      this.patternValue = val;
    }
  }
}
</script>

<style scoped>
.color-input {
  margin-bottom: 15px;
}

.color-input-header {
  margin-bottom: 8px;
}

.color-input-label {
  font-weight: bold;
  font-size: 14px;
}

.color-input-content {
  display: flex;
  align-items: center;
}

.color-picker-container {
  margin-right: 15px;
}

.pattern-selector {
  flex: 1;
}
</style> 