<template>
  <el-select
    v-model="selectedValues"
    filterable
    clearable
    placeholder="请选择计划模板"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import axios from 'axios'

export default {
  name: 'CampaignTemplateSelector',
  props: {
    value: {
      type: [Number, String, null],
      default: null
    }
  },
  data() {
    return {
      options: [],
      selectedValues: []
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.selectedValues = newVal
      },
      immediate: true
    }
  },
  created() {
    this.fetchOptions()
  },
  methods: {
    async fetchOptions() {
      try {
        const response = await axios.get(process.env.PUTIN_API + '/campaign-templates')
        if (response.data && response.data.result && response.data.result.data) {
          this.options = response.data.result.data.value || []
        }
      } catch (error) {
        console.error('Failed to fetch campaign templates:', error)
      }
    },
    handleChange(values) {
      this.$emit('input', values)
      this.$emit('change', values)
    }
  }
}
</script>
