<template>
  <div class="item-input-con flex-default">
    <div class="label">
      {{ label }}
    </div>
    <div class="value flex-default">
      <slot name="input">
        <input
          class="uni-input"
          :type="type"
          :maxlength="maxlength"
          @input="onKeyInput"
          v-model="changeValue"
          :placeholder="placeholder ? placeholder : '请输入'"
        />
      </slot>
    </div>
    <div
      class="m-icon close"
      v-show="changeValue && closeIcon"
      @click="clearValue"
    />
    <slot name="append"></slot>
  </div>
</template>

<script>
export default {
  props: [
    "label",
    "value",
    "placeholder",
    "closeIcon",
    "type",
    "maxlength",
  ],
  data() {
    return {
      changeValue: "",
    };
  },
  created() {
    this.changeValue = this.value;
  },
  methods: {
    onKeyInput() {
      this.$emit("input", this.changeValue);
    },
    clearValue() {
      this.changeValue = "";
      this.onKeyInput();
    },
  },
};
</script>

<style lang="less">
.item-input-con {
  height: 53px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
  .label {
    font-size: 14px;
    color: #140603;
    flex-shrink: 0;
    width: 89px;
  }
  .value {
    flex-shrink: 1;
    // margin-left: 10px;
    width: 100%;
    align-items: center;
    .uni-input {
      padding: 0;
      font-size: 14px;
      flex: 1;
      text-align: left;
      width: 100%;
      &::placeholder{
        color: #AEAEAE;
      }
    }
  }
  .m-icon.close {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background-size: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAABj0lEQVQ4T62UzWoUURCFz0kVuNQXcKe+gasoInMHx4B/GH+IoqJbfRZ9AhM0KCoKmog49w5IRBBfIdGNe90qdHGkgy1DT48xMr08depr6tx7i+j4cs4nSC4BmJe0n6QkfSX5AcBqSqm02zgulFIOkbwvab7rB2PaBsmbvV7vc6P9AeWcj5BcB7B3B0hT/i5pod/vf6yFbdBwODxoZp8k7ftHSGP7BuBwSunLNqiUsgHg6C4hjf1dSuk4SykJQG5B+iTvSDrd0tdJ3pU0GtdJ9jgajZYl3Wg1rJnZUkQ8AnCqrkl67e6XI2IVwJmWf4U5502SB9pjSXrl7lci4rGkOXe/FBEPAZzt8G7Vo/0AsGdKPi/N7Gpdi4gHAM5N8f3cCfTGzC7WzVVVPSG5MBX0l9HeuvtiRKwAmDOzaxHxFMDJDthmZ9iShu5+PiKWASz+DvuFu1+PiGcABhNhdx1/RBwzs9sALrQanku6R/L9xPHP7ELO9InUsJk82mbe3ayRqqpuDQaDrYk1Mh7e/yy2X9ix2x2RgcAfAAAAAElFTkSuQmCC);
  }
}
</style>
