<script setup>
  import { computed, useSlots } from 'vue'

  const slots = useSlots()

  // 判断默认的插槽是否存在
  const hasDefaultSlot = computed(() => slots.default !== undefined)

  const name = defineModel({
    type: String,
    default: ''
  })

  const props = defineProps({
    /**
     * 输入框状态类型
     * text: 文本
     * password: 密码
     * number: 数字
     * tel: 手机号
     * email: 邮箱
     */
    type: {
      type: String,
      default: 'text'
    },
    title: {
      type: String,
      default: '标题'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    /** 是否使用输入框 */
    isInput: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  })

  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #D9D9D9; font-size: 28rpx; font-style: normal; text-transform: none;`
</script>

<template>
  <view class="card-input">
    <view class="input-box">
      <text class="title">{{ props.title }}</text>
      <input
        v-if="props.isInput"
        v-model="name"
        :disabled="props.disabled"
        :type="props.type"
        :placeholder-style="placeholderStyle"
        :placeholder="props.placeholder"
      />
      <view v-else class="right-box">
        <slot name="right"></slot>
      </view>
    </view>
    <view v-if="hasDefaultSlot" class="bottom-slot">
      <slot></slot>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .card-input + .card-input {
    margin-top: 16rpx;
  }
  .card-input {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx 32rpx;
    display: flex;
    flex-direction: column;
    .input-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .right-box {
        display: flex;
        align-items: center;
      }
    }
    .bottom-slot {
      margin-top: 26rpx;
    }
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    input {
      width: 340rpx;
      text-align: right;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }
  }
</style>
