<script lang="ts" setup>
import Taro from '@tarojs/taro';
import { ref } from 'vue';
import { editPersonalInfo } from '@/api/user';
import { BASE_URL } from '@/utils/request';

// const toPage = (e: string) => {};

const userInfo = ref<any>({});

Taro.useLoad(() => {
  const { data: data } = Taro.getStorageSync('userInfo');
  userInfo.value = data;
});

const chooseavatar = (e: any) => {
  Taro.uploadFile({
    url: `${BASE_URL}/upload`,
    filePath: e.detail.avatarUrl,
    name: 'file',
    header: {
      token: Taro.getStorageSync('token'),
    },
    success: function (res) {
      const data = JSON.parse(res.data);
      userInfo.value.avatarUrl = data.data.data;
    },
  });
};

const subUser = async () => {
  try {
    const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
    if (!reg.test(userInfo.value.phone))
      return Taro.showToast({
        title: '请输入正确的手机号码',
        icon: 'none',
      });
    const res = await editPersonalInfo(userInfo.value);
    Taro.showToast({
      title: res.msg,
      icon: 'none',
    });
    Taro.switchTab({
      url: '/pages/user/index',
    });
  } catch (error) {
    Taro.showToast({
      title: error.msg,
      icon: 'none',
    });
  }
};
</script>

<template>
  <view class="app">
    <nut-cell-group>
      <nut-cell title="头像">
        <template v-slot:link>
          <nut-button
            style="border: none; height: auto; padding: 0"
            open-type="chooseAvatar"
            @chooseavatar="chooseavatar">
            <nut-avatar size="large">
              <img style="border-radius: 50%" :src="userInfo.avatarUrl" />
            </nut-avatar>
          </nut-button> </template
      ></nut-cell>
      <nut-cell title="昵称">
        <template v-slot:link>
          <nut-input
            type="nickname"
            v-model="userInfo.nickName"
            :border="false"
            input-align="right"
            placeholder="请输入昵称" /> </template
      ></nut-cell>
      <nut-cell title="手机号码">
        <template v-slot:link>
          <nut-input
            v-model="userInfo.phone"
            :border="false"
            input-align="right"
            disabled />
        </template>
      </nut-cell>
      <!-- <nut-cell title="登录密码">
        <template v-slot:link>
          <nut-input
            v-model="userInfo.password"
            :border="false"
            input-align="right"
            placeholder="修改登录密码" />
        </template>
      </nut-cell> -->
      <!-- <nut-cell title="交易密码" desc="创建/修改交易密码" is-link> </nut-cell> -->
      <!-- <nut-cell title="注销账号" desc="账号注销后不能恢复" is-link> </nut-cell> -->
    </nut-cell-group>
    <view class="btn">
      <nut-button
        shape="square"
        style="border-radius: 10px"
        type="primary"
        block
        @click="subUser"
        >保存信息</nut-button
      >
    </view>
  </view>
</template>

<style lang="scss">
.user-card {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  margin: auto;
  position: relative;
  top: 10px;
  padding: 30px;

  .avatar-card {
    background-color: rgba(255, 0, 0, 0.1);
    margin: 20px auto;
    border-radius: 20px;
    border: 1px solid #ff0000;
    display: flex;
    align-items: center;
    padding: 30px;
    position: relative;

    .left {
      margin-left: 10px;
      display: flex;
      align-items: center;
      position: relative;
      justify-content: space-between;

      .name {
        margin-left: 10px;
      }
      .nut-button {
        margin: 0 auto;
        width: 125px;
        height: 125px;
        border-radius: 50%;
      }
    }
  }
}

.btn {
  padding: 0 40px;
  margin-bottom: 20px;
}

.nut-input {
  width: 400px !important;
  padding: 0 !important;
}

.nut-cell {
  display: flex;
  align-items: center;
}

.phoneBtn {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  border: none !important;
}
</style>
