<template>
  <view class="bg-white">
    <view class="name">
      <view class="name-text">{{ title }}</view>
      <switch :checked="checked" class="mr-4 transform-scale-90" @change="change" color="#002ce5" />
    </view>
    <view class="px-3 text-sm whitespace-pre-line pb-2" v-if="placeholder">{{ placeholder }}</view>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'

  const checked = ref(false)

  const props = defineProps({
    title: String,
    placeholder: String,
    value: Boolean
  })

  onMounted(() => {
    checked.value = props.value
  })

  const change = e => {
    console.log(111, e)
    // this.$emit('changeInput', e.detail.value)
  }
</script>

<style scoped lang="scss">
  .name {
    height: 100rpx;
    width: 750rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;

    .name-text {
      margin-left: 32rpx;
      font-weight: bold;
      font-size: 32rpx;
      line-height: 100rpx;
    }
  }
</style>
