<template>
  <view class="login-wrapper" :style="{ padding: pd }">
    <view class="login-main">
      <view class="login-title" v-if="title">{{ title }}</view>
      <view class="login-input" :style="{ backgroundColor: bgColor }">
        <input
          :password="password"
          :placeholder="place"
          :type="type"
          placeholder-style="color: #A6A6A6;"
          :value="value"
          @input="change($event)"
        />
        <view class="login-right"> <slot></slot> </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { watchEffect, onBeforeUnmount, onMounted } from "vue"
import { addRules, clearOneRule } from "@/hooks/rules"
const props = defineProps({
  title: {
    type: String,
    default: "账号",
  },
  place: {
    type: String,
    default: "请输入登录名/手机号",
  },
  type: {
    type: String,
    default: "text",
  },
  value: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "text",
  },
  pd: {
    type: String,
    default: "50rpx",
  },
  bgColor: {
    type: String,
    default: "#f3f2f5",
  },
  password: { type: Boolean, default: false },
  rules: { default: null },
})
const emits = defineEmits(["update:value"])
const change = (e) => {
  emits("update:value", e.detail.value)
}

onMounted(() => {
  if (props.rules !== null) {
    props.rules.Msg = props.title
    addRules(props.rules)
  }
})
onBeforeUnmount(() => {
  if (props.rules !== null) {
    clearOneRule(props.rules)
  }
})
</script>

<style lang="scss" scoped>
.login-wrapper {
  padding: 50rpx;
  .login-title {
    margin-left: 20rpx;
    margin-bottom: 20rpx;
    font-size: 30rpx;
  }
  .login-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 110rpx;

    .login-right {
      align-self: center;
    }
    border-radius: 16rpx;
    background: #f3f2f5;
    input {
      flex: 1;
      font-size: 33rpx;
      height: 110rpx;
      margin-left: 32rpx;
    }
  }
}
</style>
