<template>
  <view class="u-flex">
    <view @click="show = true">
      <slot v-if="$slots.default"> </slot>
      <view v-else class="choose-goods u-flex u-row-between">
        <text class="color-333 u-font-28 font-bold">{{ statusText }}</text>
        <up-icon size="14" name="arrow-down" color="#333" bold></up-icon>
      </view>
    </view>

    <up-action-sheet
      :show="show"
      cancel-text="取消"
      closeOnClickAction
      @close="show = false"
      :actions="actions"
      @select="confirm"
    ></up-action-sheet>
  </view>
</template>
<script setup>
import { ref ,computed } from "vue";
const show = ref(false);
const modelValue = defineModel({
  type: String,
  default: "",
});
function confirm(item) {
  modelValue.value = item.value;
}
const actions = ref([
  {
    name: "全部",
    value: "",
  },
  {
    name: "已兑换",
    value: "1",
  },
  {
    name: "未兑换",
    value: "0",
  },
]);

const statusText = computed(() => {
  if (modelValue.value === "") {
    return "全部";
  }
  return modelValue.value === "1" ? "已兑换" : "未兑换";
});
</script>
