<template>
  <el-select
    v-model="selectedValue"
    :placeholder="placeholder"
    :multiple="multiple"
    :disabled="disabled"
    :filterable="filterable"
    :clearable="clearable"
    :loading="loading"
    @change="handleChange"
    class="project-selector"
  >
    <el-option
      v-for="item in filteredList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
      :disabled="item.disabled"
    >
      <span class="option-label">{{ item.name }}</span>
      <span class="option-type" v-if="item.type">
        <el-tag size="small">{{ item.type }}</el-tag>
      </span>
    </el-option>
  </el-select>
</template>

<script>
import { getProjectList } from '@/api/martial/project'

export default {
  name: 'ProjectSelector',

  props: {
    modelValue: {
      type: [Number, Array],
      default: null
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择项目'
    },
    filterable: {
      type: Boolean,
      default: true
    },
    clearable: {
      type: Boolean,
      default: true
    },
    // 赛事ID,用于过滤项目
    competitionId: {
      type: Number,
      default: null
    },
    // 项目类型过滤
    projectType: {
      type: String,
      default: null
    }
  },

  emits: ['update:modelValue', 'change'],

  data() {
    return {
      loading: false,
      projectList: [],
      selectedValue: this.modelValue
    }
  },

  computed: {
    filteredList() {
      let list = this.projectList

      if (this.projectType) {
        list = list.filter(item => item.type === this.projectType)
      }

      return list
    }
  },

  watch: {
    modelValue(newVal) {
      this.selectedValue = newVal
    },

    competitionId(newVal) {
      if (newVal) {
        this.loadProjects()
      } else {
        this.projectList = []
      }
    }
  },

  mounted() {
    if (this.competitionId) {
      this.loadProjects()
    }
  },

  methods: {
    async loadProjects() {
      if (!this.competitionId) {
        this.projectList = []
        return
      }

      this.loading = true
      try {
        const res = await getProjectList({
          competitionId: this.competitionId,
          current: 1,
          size: 1000
        })
        if (res.data && res.data.records) {
          this.projectList = res.data.records.map(item => ({
            id: item.id,
            name: item.name,
            type: item.type,
            disabled: false
          }))
        }
      } catch (error) {
        console.error('加载项目列表失败:', error)
        this.$message.error('加载项目列表失败')
      } finally {
        this.loading = false
      }
    },

    handleChange(value) {
      this.$emit('update:modelValue', value)

      // 获取选中的选项
      let selectedOptions = null
      if (this.multiple) {
        selectedOptions = this.projectList.filter(item =>
          value.includes(item.id)
        )
      } else {
        selectedOptions = this.projectList.find(item =>
          item.id === value
        )
      }

      this.$emit('change', value, selectedOptions)
    }
  }
}
</script>

<style lang="scss" scoped>
.project-selector {
  width: 100%;

  :deep(.el-select-dropdown__item) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .option-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .option-type {
    margin-left: 10px;
    flex-shrink: 0;
  }
}
</style>
