<template>
  <van-popup v-model="showPopup" position="bottom" round>
    <div class="personal-popup-con flex-default">
      <div class="popup-title">
        修改昵称
        <m-icon
          icon="icon-close-square"
          className="close"
          @click="showPopup = false"
          :size="18"
        />
      </div>
      <div class="popup-con">
        <div class="nick-name flex-default">
          <input
            confirm-type="done"
            v-model="dataValue"
            placeholder-style="color:#AEAEAE"
            placeholder="请输入昵称"
            autocomplete="off"
            type=""
            class="uni-input-input"
          />
          <div
            class="m-icon close"
            v-show="dataValue"
            @click="dataValue = ''"
          />
        </div>
      </div>
      <div class="popup-bottom flex-default">
        <van-button
          type="primary"
          style="width: 164px"
          class="normal"
          @click="showPopup = false"
          round
        >
          取 消
        </van-button>
        <van-button
          type="primary"
          style="width: 164px"
          @click="submitForm"
          round
        >
          确 定
        </van-button>
      </div>
    </div>
  </van-popup>
</template>
<script>
export default {
  props: {
    value: Boolean,
    componentData: String,
  },
  data() {
    return {
      showPopup: false,
      dataValue: "",
    };
  },
  mounted() {
    this.showPopup = this.value;
    if (this.value) {
      if (typeof this.componentData === "string") {
        this.dataValue = this.componentData;
      }
    }
  },
  watch: {
    value(val) {
      this.showPopup = val;
      if (val) {
        if (typeof this.componentData === "string") {
          this.dataValue = this.componentData;
        }
      }
    },
    showPopup(val) {
      this.$emit("input", val);
    },
  },
  methods: {
    submitForm() {
      this.$emit("change", this.dataValue);
      this.showPopup = false;
    },
    setInitialValue(val) {
      this.dataValue = val;
    },
  },
};
</script>

<style lang="less">
@import "../components/css/personal-popup.less";
.nick-name {
  margin-top: 5px;
  height: 40px;
  border-bottom: 1px solid #f1f1f1;
  align-items: center;
  .uni-input-input {
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    width: 100%;
    flex-shrink: 1;
  }
  .m-icon.close {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    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>
