<template>
  <div class="category-selector">
    <el-select v-model="selectedCategory" placeholder="请选择分类" style="width: 300px" @change="handleCategoryChange">
      <el-option
        v-for="category in categories"
        :key="category.id"
        :label="category.label"
        :value="category.id"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'CategorySelector',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedCategory: this.value,
      categories: [
        { id: '1', label: '电影和动画' },
        { id: '2', label: '汽车' },
        { id: '10', label: '音乐' },
        { id: '15', label: '宠物和动物' },
        { id: '17', label: '体育' },
        { id: '18', label: '短片' },
        { id: '19', label: '旅游和活动' },
        { id: '20', label: '游戏' },
        { id: '21', label: '视频博客' },
        { id: '22', label: '人物和博客' },
        { id: '23', label: '喜剧' },
        { id: '24', label: '娱乐' },
        { id: '25', label: '新闻和政治' },
        { id: '26', label: 'DIY 和生活百科' },
        { id: '27', label: '教育' },
        { id: '28', label: '科学和技术' },
        { id: '30', label: '电影' },
        { id: '31', label: '动漫/动画' },
        { id: '32', label: '动作/冒险' },
        { id: '33', label: '经典' },
        { id: '34', label: '喜剧' },
        { id: '35', label: '纪录片' },
        { id: '36', label: '剧情片' },
        { id: '37', label: '家庭片' },
        { id: '38', label: '外国' },
        { id: '39', label: '恐怖片' },
        { id: '40', label: '科幻/幻想' },
        { id: '41', label: '惊悚片' },
        { id: '42', label: '短视频' },
        { id: '43', label: '节目' },
        { id: '44', label: '预告片' }
      ]
    }
  },
  watch: {
    value(newVal) {
      this.selectedCategory = newVal;
    }
  },
  methods: {
    handleCategoryChange(value) {
      this.$emit('input', value);
    }
  }
}
</script>

<style scoped>
.category-selector {
  margin-bottom: 10px;
}
</style>
