<template>
  <view class="a-wrapper">
    <block v-for="v in list" :key="v.value">
      <view class="a-text" :class="{ selected: v.value === index }" @tap="selected(v)">
        {{ v.text }}
        <view class="solid" v-show="v.value === index"></view>
      </view>
    </block>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue"
const emits = defineEmits(["selected"])
const list = reactive([
  {
    text: "全部",
    value: "",
  },
  {
    text: "成功",
    value: 2,
  },
  {
    text: "审核",
    value: 1,
  },
  {
    text: "驳回",
    value: 3,
  },
])
const index = ref("")
const selected = (val) => {
  index.value = val.value
  emits("selected", val.value)
}
</script>

<style lang="scss" scoped>
.a-wrapper {
  display: flex;
  justify-content: space-around;
  .a-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 28rpx;

    .solid {
      width: 20rpx;
      height: 6rpx;
      margin-top: 12rpx;
      background-color: $primaryColor;
    }
  }
  .selected {
    font-weight: 700;
    color: $primaryColor;
  }
}
</style>
