<template>
  <view class="oa-timeLine">
    <view class="oa-timeLine-btn" :style="{ color: fontColor }">
      <span @click="activitiesSortClick()">排序</span>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
import { ref, toRefs } from "vue";

const emit = defineEmits(["activitiesSortChange"]);

const props = defineProps({
  sort: {
    type: String,
    default: "DESC",
  },
  fontColor: {
    type: String,
    default: "#149eff",
  },
});

const { sort, fontColor } = toRefs(props);

const _sort = ref(sort.value);

function activitiesSortClick() {
  if (_sort.value == "ASC") {
    _sort.value = "DESC";
  } else {
    _sort.value = "ASC";
  }

  emit("activitiesSortChange", _sort.value);
}
</script>

<style lang="scss" scoped>
.oa-timeLine {
  padding: 0px 15px;
  padding-bottom: 15px;

  .u-steps-item__wrapper {
    background-color: #f1f1f1;
  }

  .oa-timeLine-btn {
    margin: 0px -3.5px;
    font-size: 13px;
  }
}

.oa-timeLine-data {
  padding: 0px 15px;
  text-align: center;
  color: #bdbdbd;
  font-size: 14px;
}
</style>
