<template>
  <view class="page">
    <form @submit.prevent="handleSubmit">
      <view class="form-item">
        <input
          v-if="type === 'nickname'"
          v-model="text"
          type="text"
          class="form-input"
          placeholder="请填写昵称"
        />
        <input
          v-else
          v-model="text"
          type="text"
          class="form-input"
          placeholder="请填写邀请人"
        />
      </view>
      <button
        form-type="submit"
        :class="[
          'btn btn-lg btn-block form-btn w-full',
          {
            'btn-disabled': disabled,
          },
        ]"
      >
        确定
      </button>
    </form>
  </view>
</template>

<script>
import login from "@/lib/utils/login";
import { getUserInfo, setNickname } from "@/lib/api/user";
import { postBd } from "@/lib/api/other";

export default {
  name: "PageMyEdit",
  data() {
    return {
      userInfo: {},
      text: "",
      type: "",
    };
  },
  computed: {
    disabled() {
      return !this.text.trim();
    },
  },
  onLoad(data) {
    this.type = data.type || "";
    this.text = data.text || "";
  },
  async onShow() {
    this.userInfo = await login.getUserInfo();
    this.getUserInfo();
  },
  methods: {
    //获取个人信息
    getUserInfo() {
      getUserInfo()
        .then((data) => {
          this.userInfo = { ...this.userInfo, ...data.data };
          login.setUserInfo(this.userInfo);
        })
        .catch((e) => {
          console.error(e);
        });
    },
    async handleSubmit() {
      const res = await (this.type === "nickname"
        ? setNickname({ name: this.text })
        : postBd({ bd: this.text }));

      if (res.errno === 10000) {
        uni.showToast({
          icon: "none",
          title: "提交成功",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      } else {
        uni.showToast({
          icon: "none",
          title: res.errmsg,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.page {
  padding: 40rpx;
  box-sizing: border-box;
}

.btn {
  padding: 0 8rpx;
  position: relative;
  height: 64rpx;
  background-color: #ff6600;
  border-radius: 999px;
  overflow: hidden;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 400;
  padding: 0 40rpx;
  min-width: 152rpx;
  user-select: none;
  box-sizing: border-box;

  &::after {
    display: none;
  }

  @media (hover: hover) {
    &:not(.skeleton):hover {
      background-color: #ff7700;
    }
  }

  &:not(.skeleton):active {
    background-color: #ff5500;
  }

  &.btn-disabled,
  &:disabled {
    cursor: default;
    color: #999999;
    background: #f0f0f0;

    &:hover,
    &:active {
      background: #f0f0f0;
    }
  }

  &.btn-outlined {
    width: 168rpx;
    height: 64rpx;
    border: 2rpx solid #ff5005;
    background: transparent;
    font-size: 28rpx;
    color: #ff5c00;

    @media (hover: hover) {
      &:hover {
        background: rgba(255, 80, 5, 0.1);
      }
    }

    &:active {
      background: rgba(255, 80, 5, 0.2);
    }
  }

  &.btn-block {
    display: block;
  }

  &.btn-lg {
    height: 88rpx;
    font-size: 34rpx;
    padding: 0 56rpx;
  }
}

.form-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 16rpx 0;
  margin-top: 12rpx;
  display: flex;
  align-items: center;
  .form-input {
    flex: 1;
    width: 0;
    height: 64rpx;
    font-size: 32rpx;

    .input-placeholder {
      font-size: 32rpx;
      color: #ccc;
    }
  }
  .form-captcha {
    width: 146rpx;
    height: 64rpx;
  }
  .form-icon {
    min-width: 48rpx;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-icon-clear {
    width: 32rpx;
    height: 32rpx;
    display: block;
  }
}
.form-btn {
  margin-top: 90rpx;
}
.form-switch,
.form-text {
  font-size: 26rpx;
  margin-top: 40rpx;
  text {
    color: #ff6600;
    white-space: nowrap;
  }
}
.form-switch {
  text-align: right;
}
.form-text {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
  line-height: 2;
}
</style>
