<!--评分控件-->
<template>
  <div>
    <el-select
      v-model="score1"
      placeholder="请选择"
      class="select-width"
      size="small"
      @keyup.enter.native="handleQuery"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <span class="line">-</span>
    <el-select
      v-model="score2"
      placeholder="请选择"
      class="select-width"
      size="small"
      @keyup.enter.native="handleQuery"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "Score",
  props: {
    startScore: {
      type: Number,
    },
    endScore: {
      type: Number,
    },
  },
  data() {
    return {
      score1: this.startScore,
      score2: this.endScore,
      options: [
        {
          value: 0,
          label: "0",
        },
        {
          value: 1,
          label: "1",
        },
        {
          value: 2,
          label: "2",
        },
        {
          value: 3,
          label: "3",
        },
        {
          value: 4,
          label: "4",
        },
        {
          value: 5,
          label: "5",
        },
      ],
    };
  },
  watch: {
    score1: {
      handler(val) {
        this.$emit("update:startScore", val);
      },
    },
    score2: {
      handler(val) {
        this.$emit("update:endScore", val);
      },
    },
    startScore: {
      handler(val) {
        this.score1 = val
      },
    },
    endScore: {
      handler(val) {
        this.score2 = val
      },
    },
  },
  methods: {
    handleQuery() {
      
    },
  },
};
</script>
<style scoped>
.select-width {
  width: 90px;
}
</style>