<template>
<!-- :placeholder="val.placeholder" 
:clearable="val.clearable"-->
  <Input
    :type="val.inputType"
    :value="val.inpuValue"
    :size="val.size"
    :disabled="val.disabled"
    :readonly="val.readonly"
    :maxlength="val.maxlength"
    :icon="val.inputIcon"
    :prefix="val.prefix"
    :suffix="val.suffix"
    :search="val.search"
    :number="val.number"
    :rows="val.rows"
    :autofocus="val.autofocus"
    :style="{
      position: 'absolute',
      width: val.width  + '%',
      height: val.height  + '%',
      left: val.left  + '%',
      top: val.top  + '%',
      zIndex: val.z,
      backgroundColor: val.bgColor,
      backgroundImage: 'url(' + val.backPic + ')',
      color: val.color
    }"
  />
</template>

<script>
import stylec from "./style.vue";
const WIDGET_NAME = "braid-input";

export default {
  name: WIDGET_NAME,
  icon: {
    type: "ios-create"
  },
  title: "输入框",
  panel: stylec,
  setting: {
    type: WIDGET_NAME,
    isContainer: false,
    isUpload: false,
    hasGuide: true,
    isChild: true,
    draggable: true,
    resizable: true,
    name: "输入框",
    width: 30,
    height: 10,
    left: 20,
    top: 0,
    offsetLeft: 50,
    offsetTop: 0,
    offsetWidth: 100,  // 父组件相对于page的百分比
    offsetHeight: 100, // 父组件相对于page的百分比
    z: 0,
    bgColor: "#fff",
    backPic: "",
    backPicUrl: "",
    color: "",
    text: "输入框",
    belong: "page",
    animationName: "",
    dargType: 'width'
  },
  props: ["h", "val", "playState", "w"],

  methods: {
    updateText(e, uuid) {
      let text = e.target.innerHTML;
      this.$vpd.commit("updateData", {
        uuid: uuid,
        key: "text",
        value: text
      });
    }
  }
};
</script>

<style>
/* .ivu-input {
  height: 100%;
} */
</style>
