<template>
  <div class="heat-sort-select-box">
    <el-select v-model="isSort" placeholder="热度排序" style="width: 130px" @change="handlePxChange">
      <template #prefix>
        <div style="display: flex; align-items: center; height: 100%">
          <img v-if="isSort" src="./down.svg" style="width: 16px; height: 16px" />
          <img v-else src="./up.svg" style="width: 16px; height: 16px" />
        </div>
      </template>
      <el-option v-for="item in heatList" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isSort = ref(true)

const heatList = ref([
  { label: "热度倒序", value: true },
  { label: "热度正序", value: false }
])

const emits = defineEmits(['handlePxChange'])

const handlePxChange = () => {
  emits('handlePxChange', isSort.value)
}

</script>

<style scoped>
.heat-sort-select-box {
  height: 42px;
  box-sizing: border-box;
  padding: 5px 0;
}
</style>