<template>
  <!--div獨占一行-->
    <div class="dropdown-container">
      <span>評分：</span>
      <select v-model="selectedNumber" class="dropdown">
        <option v-for="option in options" :key="option.value" :value="option.value">
          {{ option.label }}
        </option>
      </select>
      （默認滿分5分）
    </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 5, // 用于接口調(diào)用的實際值
      options: [ // 下拉框的選項，模擬接口返回的值，包含顯示的標簽和實際的值
        { label: '1分', value: 1 },
        { label: '2分', value: 2 },
        { label: '3分', value: 3 },
        { label: '4分', value: 4 },
        { label: '5分', value: 5 }
      ]
    };
  },
  methods: {
    // 你可以在這里添加一個方法來處理選項選擇后的操作，例如調(diào)用接口
    handleSelection() {
      // 使用 this.selectedValue 作為調(diào)用接口的參數(shù)
      console.log("Selected value for API call:", this.selectedValue);
      // 這里添加調(diào)用接口的代碼
    }
  },
  watch: {
    // 監(jiān)聽 selectedValue 的變化，以便在值改變時執(zhí)行某些操作
    selectedValue(newValue) {
      this.handleSelection();
    }
  }
};
</script>

<style>
  .dropdown-container{
    display: block;
    margin-top: 20px;/*外邊距20px，做到獨占一行 */
  }

  .dropdown {
    width: 25%;
  }
</style>

<template>
  <select v-model="selectedOption" @change="handleChange">
    <option v-for="option in options" :key="option.value" :value="option.value">
      {{ option.text }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [ /* 選項數(shù)據(jù) */ ]
    };
  },
  methods: {
    handleChange(event) {
      // 處理選項變化
      console.log("Selected option changed to:", this.selectedOption);
    }
  }
};
</script>

         <Card>
          <Select v-model="typeSelect" style="width:150px;float: right;z-index:999;position: relative" placeholder="請選擇指標" @click="changeType()">
            <Option v-for="type in typeArray" :value="type.value" :key="type.label">{{ type.label }}</Option>
          </Select>
          <chart-card :stats-data="playTypePie"></chart-card>
        </Card>

    changeType:function (){
      console.log('您選擇了', this.typeSelect)
    },