<template>
  <el-select
    v-model="selectedValue"
    :placeholder="placeholder"
    :multiple="multiple"
    :disabled="disabled"
    :filterable="filterable"
    :clearable="clearable"
    :loading="loading"
    @change="handleChange"
    class="competition-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-status">
        <el-tag :type="getStatusType(item.status)" size="small">
          {{ getStatusText(item.status) }}
        </el-tag>
      </span>
    </el-option>
  </el-select>
</template>

<script>
import { getCompetitionList } from '@/api/martial/competition'

export default {
  name: 'CompetitionSelector',

  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
    },
    // 过滤状态: 0-未开始, 1-报名中, 2-进行中, 3-已结束
    status: {
      type: Array,
      default: null
    }
  },

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

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

  computed: {
    filteredList() {
      if (!this.status || this.status.length === 0) {
        return this.competitionList
      }
      return this.competitionList.filter(item =>
        this.status.includes(item.status)
      )
    }
  },

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

  mounted() {
    this.loadCompetitions()
  },

  methods: {
    async loadCompetitions() {
      this.loading = true
      try {
        const res = await getCompetitionList({
          current: 1,
          size: 1000
        })
        if (res.data && res.data.records) {
          this.competitionList = res.data.records.map(item => ({
            id: item.id,
            name: item.name,
            status: item.status,
            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.competitionList.filter(item =>
          value.includes(item.id)
        )
      } else {
        selectedOptions = this.competitionList.find(item =>
          item.id === value
        )
      }

      this.$emit('change', value, selectedOptions)
    },

    getStatusType(status) {
      const typeMap = {
        0: 'info',
        1: 'success',
        2: 'warning',
        3: 'info'
      }
      return typeMap[status] || 'info'
    },

    getStatusText(status) {
      const textMap = {
        0: '未开始',
        1: '报名中',
        2: '进行中',
        3: '已结束'
      }
      return textMap[status] || '未知'
    }
  }
}
</script>

<style lang="scss" scoped>
.competition-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-status {
    margin-left: 10px;
    flex-shrink: 0;
  }
}
</style>
