<template>
  <el-select
    v-model="selectedValue"
    filterable
    clearable
    placeholder="请选择分类"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.category"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { commonFetchData } from '@/api/report'

export default {
  name: 'AppCategorySelector',
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      options: [],
      selectedValue: ''
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.selectedValue = newVal
      },
      immediate: true
    }
  },
  created() {
    this.fetchOptions()
  },
  methods: {
    fetchOptions() {
      // Using the commonFetchData function with Promise approach
      commonFetchData({sqlId: 1641})
        .then(res => {
          if (res && res.result) {
            this.options = res.result.data || []
          } else {
            console.error('Failed to fetch category data: Invalid response format')
          }
        })
        .catch(error => {
          console.error('Failed to fetch category data:', error)
        })
    },
    handleChange(value) {
      this.$emit('input', value)
      this.$emit('change', value)
    }
  }
}
</script>
