<template>
  <view
    class="layout"
    :class="{ first: props.isBorder }"
    :style="{ padding: props.pd, backgroundColor: props.bgColor, alignItems: align }"
  >
    <!-- 最左侧插槽用于存放icon -->
    <image :src="props.icon" v-if="props.icon" :style="{ width: props.iconSize, height: props.iconSize }" />

    <view class="name" :style="{ color: props.textColor, fontSize: props.size }">{{ props.name }}</view>
    <view class="input">
      <slot>
        <input
          v-if="props.place != '' || props.value != ''"
          :type="type"
          :value="props.value"
          placeholder-style="color:#A6A6A6;"
          :placeholder="(rules != null ? '(必填)' : '') + place"
          :style="{ fontSize: size }"
          :maxlength="maxlength"
          @input="onchange"
          :focus="focus"
          @focus="emits('focusShow')"
          @blur="emits('focusNone')"
        />
        <view v-else :style="{ fontSize: props.size, color: props.rightColor }">{{ props.right }}</view>
      </slot>
    </view>

    <image src="/static/equipmentImg/arrow.svg" v-if="props.img" />
  </view>
</template>

<script setup>
import { ref, reactive, watchEffect, watch, onDeactivated, onBeforeUnmount, onMounted } from "vue"
import { addRules, clearOneRule } from "@/hooks/rules"
const props = defineProps({
  name: { type: String, default: "" }, // 左侧文字
  icon: { type: String, default: "" }, // 左侧图标
  iconSize: { type: String, default: "40rpx" }, // 左侧图标大小
  size: { type: String, default: "33rpx" }, // 文字大小
  right: { type: String, default: "" }, // 右侧文字
  value: { type: String, default: "" }, // 输入框文字
  place: { type: String, default: "" }, // 提示文字
  bgColor: { type: String, default: "" }, // 背景颜色
  isBorder: { type: Boolean, default: false }, // 是否展示上边框
  borderBg: { type: String, default: "#f2f2f2" }, // 上边框颜色
  img: { type: Boolean, default: false }, // 是否展示右箭头
  pd: { type: String, default: "40rpx 32rpx" },
  textColor: { type: String, default: "#000" }, // 左侧文字颜色
  rightColor: { type: String, default: "#fff" }, // 右侧文字颜色
  size: { type: String, default: "33rpx" }, // 文字大小，
  type: { type: String, default: "text" }, //输入框类型
  rules: { default: null },
  maxlength: { type: Number },
  align: { type: String }, //对齐方式
  focus: { type: Boolean, default: false },
})
const borderColor = ref(props.borderBg)
const places = ref("")
const emits = defineEmits(["update:value", "focusShow", "focusNone"])
const onchange = (e) => emits("update:value", e.detail.value)

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

<style scoped lang="scss">
page {
  background-color: #f2f2f2;
}
.layout {
  display: flex;
  align-items: flex-start;
  position: relative;
  box-sizing: border-box;
  .name {
    white-space: nowrap;
    font-size: 33rpx;
    // line-height: 46rpx;
  }
  .input {
    margin: 0 10rpx 0 20rpx;
    flex-grow: 1;
    text-align: right;
  }
  image {
    flex-shrink: 0;
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 32rpx;
    height: 2rpx;
    width: calc(100% - 32rpx);
    background-color: v-bind(borderColor);
  }
}
.first {
  &::before {
    height: 0rpx;
  }
}
</style>
