<script lang="ts" setup>
import { computed, ref } from "vue";
import Taro from "@tarojs/taro";
import headImg from "../static/def_avatar.png";
import logoImg from "../static/logo.jpg";
import { BASE_URL } from "@/utils/request";
import { getPhone, login } from "@/api/user";

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["closeEdit", "update:isShow"]);

const userInfo = ref({
  nickname: "",
  avatar: "",
  phone: "",
});

const show = computed({
  get: (): boolean => props.isShow,
  set: (val) => {
    emits("update:isShow", val);
  },
});

const mp_is_new = ref(true);

const canvasStatus = ref(false);

const closeAttr = () => {
  emits("closeEdit");
};

const onChooseAvatar = (e) => {
  const { avatarUrl } = e.detail;
  Taro.uploadFile({
    url: `${BASE_URL}/upload`,
    filePath: avatarUrl,
    name: "file",
    success: function (res) {
      const data = JSON.parse(res.data);
      userInfo.value.avatar = data.data.data;
    },
  });
};

const uploadPic = () => {
  canvasStatus.value = true;
};

const getPhoneNumber = async (e: any) => {
  Taro.showLoading({
    title: "授权手机号中",
    mask: true,
  });
  const { code } = e.detail;
  const res = await getPhone({
    code: code,
  });
  userInfo.value.phone = res.data.phone;
  Taro.hideLoading();
};

const formSubmit = async (e: any) => {
  if (!userInfo.value.avatar)
    return Taro.showToast({
      title: "请上传头像",
      icon: "none",
    });
  userInfo.value.nickname = e.detail.value.nickname;
  if (!userInfo.value.nickname)
    return Taro.showToast({
      title: "请输入昵称",
      icon: "none",
    });
  if (!userInfo.value.phone)
    return Taro.showToast({
      title: "请授权手机号码",
      icon: "none",
    });
  const res = await login({
    Code: Taro.getStorageSync("wx_code"),
    NickName: userInfo.value.nickname,
    AvatarUrl: userInfo.value.avatar,
    Phone: userInfo.value.phone,
    Referee: Taro.getStorageSync("bind_id") || "",
  });
  emits("closeEdit");
  Taro.showToast({
    title: res.msg,
    icon: "success",
    duration: 2000,
  });
  Taro.setStorageSync("token", res.data.token);
  setTimeout(() => {
    Taro.removeStorageSync("wx_code");
    Taro.removeStorageSync("bind_id");
    Taro.switchTab({
      url: "/pages/user/index",
    });
  }, 2000);
};
</script>

<template>
  <view>
    <nut-popup
      position="bottom"
      safe-area-inset-bottom
      closeable
      :style="{ padding: '20px 10px' }"
      v-model:visible="show"
      @close="closeAttr"
      :close-on-click-overlay="false"
    >
      <view class="mp-data">
        <image class="image" :src="logoImg"></image>
        <text class="mp-name">捷兑通 申请</text>
      </view>
      <!-- <view class="trip-msg">
        <view class="title"> 获取您的昵称、头像 </view>
        <view class="trip"> 提供具有辨识度的用户中心界面 </view>
      </view> -->
      <form @submit="formSubmit">
        <view class="edit">
          <view class="avatar edit-box">
            <view class="left">
              <view class="head">头像</view>
              <view
                class="avatar-box"
                v-if="!mp_is_new"
                @click.stop="uploadPic"
              >
                <image
                  :src="userInfo.avatar || headImg"
                  mode="aspectFill"
                ></image>
              </view>
              <button
                v-else
                class="avatar-box"
                open-type="chooseAvatar"
                @chooseavatar="onChooseAvatar"
              >
                <image
                  :src="userInfo.avatar || headImg"
                  mode="aspectFill"
                ></image>
              </button>
            </view>
          </view>
          <view class="nickname edit-box">
            <view class="left">
              <view class="head">昵称</view>
              <view class="input">
                <input
                  type="nickname"
                  placeholder-class="pl-sty"
                  placeholder="请输入昵称"
                  name="nickname"
                  :maxlength="16"
                  :value="userInfo.nickname"
                />
              </view>
            </view>
          </view>
          <view class="nickname edit-box">
            <view class="left">
              <view class="head">号码</view>
              <view class="input">
                <button
                  open-type="getPhoneNumber"
                  @getphonenumber="getPhoneNumber"
                >
                  {{ !userInfo.phone ? "请授权手机号" : "授权成功" }}
                </button>
              </view>
            </view>
          </view>
        </view>

        <view class="bottom">
          <nut-button formType="submit" block type="success" color="#07C160">
            保存
          </nut-button>
        </view>
      </form>
    </nut-popup>
  </view>
</template>

<style lang="scss">
.mp-data {
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  .mp-name {
    font-size: 28px;
    font-weight: bold;
    color: #000000;
  }

  .image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 16px;
  }
}

.trip-msg {
  padding-bottom: 32px;
  border-bottom: 1px solid #f5f5f5;

  .title {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    margin-bottom: 6px;
  }

  .trip {
    font-size: 26px;
    color: #777777;
  }
}

.edit {
  // border-bottom: 1px solid #f5f5f5;

  .avatar {
    border-bottom: 1px solid #f5f5f5;
  }

  .nickname {
    .input {
      width: 100%;
    }
    border-bottom: 1px solid #f5f5f5;
  }

  input {
    height: 80px;
  }
  button {
    flex: 1;
    display: flex;
    align-items: center;
    background: none;
    padding: 0;
    height: 50px;
    font-size: 28px;
    color: #838383;

    &::after {
      border: none;
    }
  }
}

.edit-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  padding: 22px 0;

  .left {
    display: flex;
    align-items: center;
    flex: 1;

    .head {
      color: rgba(0, 0, 0, 0.9);
      white-space: nowrap;
      margin-right: 60px;
    }

    .avatar-box {
      image {
        width: 100px;
        height: 100%;
        border-radius: 6px;
      }
    }

    button {
      flex: 1;
      display: flex;
      align-items: center;
      background: none;
      height: 100px;

      &::after {
        border: none;
      }
    }
  }
}

.icon-xiangyou {
  color: #cfcfcf;
}

.bottom {
  margin-top: 20px;
  padding: 0 150px;

  .nut-button {
    border-radius: 10px;
  }
}
</style>
