<template>
  <div class="time-sort-select-box">
    <el-select v-model="sortValue" placeholder="排序方式" style="width: 130px" @change="handlePxChange">
      <template #prefix>
        <div style="display: flex; align-items: center; height: 100%">
          <img v-if="sortValue === 1" src="./down.svg" style="width: 16px; height: 16px" />
          <img v-else-if="sortValue === 2" src="./up.svg" style="width: 16px; height: 16px" />
          <img v-else-if="sortValue === 3" src="./down1.svg" style="width: 16px; height: 16px" />
          <img v-else-if="sortValue === 4" src="./down2.svg" style="width: 16px; height: 16px" />
        </div>
      </template>
      <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>

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

const props = defineProps({
  sortDemension: {
    type: Number,
    default: 1
  }
})

const sortValue = ref(1)

const sortList = computed(() => {
  if (props.sortDemension === 1) {
    return [
      { label: "时间倒序", value: 1 },
      { label: "时间正序", value: 2 },
    ]
  } else if (props.sortDemension === 2) {
    return [
      { label: "时间倒序", value: 1 },
      { label: "时间正序", value: 2 },
      { label: "评分倒序", value: 3 },
    ]
  } else {
    return [
      { label: "时间倒序", value: 1 },
      { label: "时间正序", value: 2 },
      { label: "评分倒序", value: 3 },
      { label: "热度倒序", value: 4 },
    ]
  }
})

const emits = defineEmits(['handlePxChange'])

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

</script>

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