<template>
  <div class="x-rate">
    <template v-if="mode === '查询'">
      <a-select
        style="width:100%"
        :value="value"
        :disabled="disabled"
        :filter-option="filterOption"
        :getPopupContainer="getPopupContainer"
        :placeholder="placeholder"
        :mode="queryType === 'IN' ? 'multiple' : undefined"
        show-search
        allowClear
        @change="handleSelectChange"
      >
        <a-select-option v-if="!queryType || queryType !== 'IN'" key="999999" value="">全部</a-select-option>
        <a-select-option
          v-for="val in getRateOptions"
          :key="val"
          :value="val"
        >
          <a-rate
            :value="transformValueToStars(val)"
            :count="displayCount"
            :allowHalf="allowHalf"
            disabled
          >
            <a-icon slot="character" :type="icon" theme="filled"/>
          </a-rate>
        </a-select-option>
      </a-select>
    </template>
    <a-rate
      v-else
      :value="transformValueToStars(value)"
      :count="displayCount"
      :disabled="disabled"
      :allowHalf="allowHalf"
      @change="handleRateChange"
    >
      <a-icon slot="character" :type="icon" theme="filled"/>
    </a-rate>
  </div>
</template>

<script>
export default {
  name: 'XRate',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: {
      type: [Number, String],
      default: undefined
    },
    mode: {
      type: String,
      default: '新增/修改'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    queryType: {
      type: String,
      default: ''
    },
    maxCount: {
      type: Number,
      default: 5
    },
    // 新增属性：控制显示的星星数量
    displayCount: {
      type: Number,
      default: 5 // 默认显示5颗星
    },
    allowHalf: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: 'star'
    }
  },
  computed: {
    getRateOptions () {
      const options = []
      // 根据 allowHalf 确定步长
      const step = this.allowHalf ? 0.5 : 1

      // 从 step 开始循环到 maxCount
      for (let i = step; i <= this.maxCount; i += step) {
        options.push(i)
      }
      return options
    }
  },
  methods: {
    // 将实际分值转换为星星显示值（1-5星）
    transformValueToStars (value) {
      if (!value && value !== 0) return 0
      return (value / this.maxCount) * this.displayCount // 使用 displayCount
    },
    // 处理评分变化
    handleRateChange (value) {
      // 将星星数（1-displayCount）转换为实际分值
      const actualValue = (value / this.displayCount) * this.maxCount // 使用 displayCount

      // 如果支持半星，保留一位小数；否则取整
      const result = this.allowHalf
        ? Math.round(actualValue * 10) / 10
        : Math.round(actualValue)

      this.$emit('input', result)
      this.$emit('change', result)
    },
    // 处理下拉选择变化
    handleSelectChange (value) {
      this.$emit('input', value)
      this.$emit('change', value)
    },
    filterOption (input, option) {
      const child = option.componentOptions.children[0]
      if (child.text) {
        return child.text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      } else if (child.elm.innerText) {
        return child.elm.innerText.toLowerCase().indexOf(input.toLowerCase()) >= 0
      } else {
        return child.child.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    },
    getPopupContainer (triggerNode) {
      return document.body
    }
  }
}
</script>

<style lang="less" scoped>
.x-rate::v-deep {
  width: 100%;
  display: inline-block;
  .ant-select-selection {
    height: 32px;
    max-height: 32px;
    overflow-y: scroll;
  }
}
</style>
