<template>
  <u-popup :show="show" :round="10" mode="center" :custom-style="{width: '80%', maxWidth: '300px'}">
    <view class="nickname-popup">
      <view class="popup-header">修改昵称</view>
      <view class="popup-input">
        <input v-model="nickName" maxlength="16" focus placeholder="请输入昵称" :disabled="loading" />
      </view>
      <view class="popup-bottom justify-between">
        <u-button text="取消" class="popup-button" @click="close"></u-button>
        <u-button :disabled="loading" :loading="loading" text="确定" class="popup-button popup-ok-button" @click="submit"></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        this.nickName = val
      },
      immediate: true
    }
  },
  data() {
    return {
      nickName: '',
      show: false,
      loading: false
    }
  },
  methods: {
    submit() {
      const nickName = /^[\u4E00-\u9FA5A-Za-z0-9_]{2,16}$/
      if (!nickName.test(this.nickName)) {
        uni.showToast({
            icon: 'none',
            title: '昵称必须是2-16位中文、英文和数字的组合~!',
            duration: 3000
        })
        return
      }
      this.loading = true
      this.$emit('change', this.nickName)
    },
    close() {
      this.show = false
    }
  }
}
</script>

<style lang="scss">
.nickname-popup {
  padding: 15px;
  .popup-header {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
  }
  .popup-input {
    width: 100%;
    height: 44px;
    margin: 17px auto 0;
    background-color: #f8f8f8;
    border-radius: 4px;
    padding: 12px;
  }
  .popup-bottom {
    margin-top: 15px;
    .popup-button {
      height: 40px;
      background-color: #f8f8f8;
      border: none;
      flex: 1 1 0%;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
      &.popup-ok-button {
        background-color: $uni-color-primary;
        color: #fff;
      }
    }
  }
}
</style>