<template>
  <view>
    <wd-input-number v-model="localNum" />
  </view>
</template>

<script setup lang="ts">
  const props = defineProps({
    num: {
      type: Number,
      default: 1,
    },
  })
  const emit = defineEmits(['update:num'])
  // 计算属性 `localShow`，用于 v-model 绑定
  const localNum = computed({
    get: () => props.num,
    set: (value) => emit('update:num', value),
  })
</script>

<style lang="scss" scoped>
  :deep(.wd-input-number) {
    display: flex;
    // align-items: center;
    // justify-content: center;
    .wd-input-number__action {
      box-sizing: border-box;
      flex-direction: column;
      gap: 20rpx;
      align-items: center;
      justify-content: center;
      width: 64rpx;
      height: 64rpx;
      padding: 10rpx 20rpx;
      background: var(--ff-4-c-1-b, $shop-primary);
      border-radius: 12rpx;
    }
    .is-disabled {
      background: var(--f-2-f-2-f-2, $shop-bg-line);
    }
    .wd-input-number__inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64rpx;
      height: 64rpx;
      margin: 0 24rpx;
      // background: var(--f-2-f-2-f-2, $shop-bg-line);
      border: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);
      border-radius: 12rpx;
    }
  }
</style>
