<template>
    <template v-if="mode === 'DESIGN'">
      <el-rate
          disabled
          :show-score="showScore"
          :allow-half="enableHalf"
          :text-color="color"
          text-color="#ff9900"
          score-template="{value}">
      </el-rate>
      <p>{{ placeholder }}</p>
    </template>
    <template v-else>
      <template v-if="perm === 'E'">
        <el-rate
            v-model="star"
            :show-score="showScore"
            :allow-half="enableHalf"
            :text-color="color"
            score-template="{value}">
        </el-rate>
        <p>{{ placeholder }}</p>
      </template>
      <template v-else-if="perm === 'R'">
        <el-rate
            v-model="star"
            disabled
            :show-score="showScore"
            :allow-half="enableHalf"
            :text-color="color"
            score-template="{value}">
        </el-rate>
      </template>
    </template>
</template>

<script setup>
import {computed, defineEmits, defineProps} from "vue";
const emit = defineEmits(["input"])
const props = defineProps({
  mode: {
    type: String,
    default: 'DESIGN'
  },
  required: {
    type: Boolean,
    default: false
  },
  value: {
    type: Number,
    default: 0
  },
  perm: {
    type: String,
    default: 'E'
  },
  color: {
    type: String,
    default: '#f0a732'
  },
  placeholder: {
    type: String,
    default: '请打分!'
  },
  enableHalf: {
    type: Boolean,
    default: true
  },
  showScore: {
    type: Boolean,
    default: true
  },
})
const star=ref(null)
const _value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("input", val);
  }
})
</script>

<style scoped>
p {
  background-color: #fff;
}

</style>
