<template>
  <div class="base_form">
    <div class="label">
      <Icon iconName="icondd" class="pre-tag" size="18"></Icon>
      <div class="label-text">{{ property.label }}</div>
    </div>
    <div class="input-box">
      <ElInput
        type="textarea"
        :rows="2"
        :placeholder="'请输入' + property.label"
        :modelValue="propertyValue"
        @input="
          (s) => {
            setPropertyValue(s);
          }
        "
      ></ElInput>
    </div>
  </div>
</template>

<script lang="ts">
import { PropType } from "vue";
import { Property } from "../types2";
import { defineComponent } from "vue";
import { ElInput } from "element-plus";
import Icon from "@/components/Icon/index.vue";
export default defineComponent({
  components: {
    ElInput,
    Icon,
  },
  props: {
    property: {
      type: Object as PropType<Property>,
      required: true,
    },
    setPropertyValue: {
      type: Function,
      required: true,
    },
  },
  computed: {
    propertyValue() {
      return this.property.value as string;
    },
  },
});
</script>
<style lang="scss" scoped>
.base_form {
  flex-shrink: 0;
  padding-left: 18px;
  font-size: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: flex-start;
}
.label {
  display: inline-block;
  width: 100px;
  flex-shrink: 0;
  cursor: pointer;
  color: #797d84;
  line-height: 44px;
  font-size: 14px;
  font-weight: 300;
  position: relative;
}
.pre-tag {
  position: absolute;
  left: -50px;
  top: 14px;
  display: none;
}
.label-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.input-box {
  flex-grow: 1;
}
</style>

<style lang="scss">
.input-box {
  .el-textarea__inner:focus {
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
      inset;
  }
}
</style>
