<template>
  <div class="sort-wrap" @click="test">
    <slot name="default"></slot>
    <div class="arrow" :class="{ rotate: isHighToLow }">
      <img src="/src/static/assistingAgriculture/shop/arrowGreen.png" alt="" />
      <img src="/src/static/assistingAgriculture/shop/arrow.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const isHighToLow = ref(false);
const test = () => {
  isHighToLow.value = !isHighToLow.value;
};
</script>

<style lang="scss" scoped>
.sort-wrap {
  display: flex;
  font-size: 22rpx;
  color: #343434;
  .arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rpx;
    margin-left: 4rpx;
    img {
      width: 10.5rpx;
      height: 6rpx;
    }
    &.rotate {
      transform: rotateZ(180deg);
    }
  }
}
</style>
