<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-22 12:19:33
 * @FilePath: /meihuaApp/src/pages/myInfo/index.vue
 * @Description: 我的信息页面
-->
<template>
  <view class="my-info-page">
    <view class="avatar" @tap="uploadImg">
        <nut-avatar size="100">
          <img :src="avatarUrl ? avatarUrl : avatar" style="border-radius: 50%;"/>
        </nut-avatar>
        <view class="edit">编辑</view>
    </view>
    <view class="info-name">
      <nut-row type="flex" justify="center" align="center">
        <nut-col span="4">姓名</nut-col>
        <nut-col span="18">
          <view class="wrapper">
            <nut-input v-model="username" placeholder="请输入姓名" :border="false" />
          </view>
        </nut-col>
        <nut-col span="2">
        </nut-col>
      </nut-row>
    </view>
    <view class="info-tel">
      <nut-row type="flex" justify="center" align="center">
        <nut-col span="4">电话</nut-col>
        <nut-col span="18">
          <view class="wrapper">
            <nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" max-length="11" disabled />
          </view>
        </nut-col>
        <nut-col span="2">
          <IconFont name="edit" @tap="goToEdit"></IconFont>
        </nut-col>
      </nut-row>
    </view>
    <view class="save-btn">
      <nut-button @tap="save" block color="#6A4925" size="large">
        <text>保&nbsp;存</text>
      </nut-button>
    </view>
  </view>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { ref, onMounted } from "vue";
import avatar from '@/assets/images/avatar.png'
import { showMyInfoAPI, saveCustomerInfoAPI } from '@/api/index'
import BASE_URL from '@/utils/config';

const username = ref('');
const tel = ref('');
const avatarUrl = ref('');

onMounted(async () => {
  const { code, data } = await showMyInfoAPI();
  if (code) {
    username.value = data.wxapp_user_name ? data.wxapp_user_name : '默认用户';
    tel.value = data.wxapp_user_phone;
    avatarUrl.value = data.wxapp_user_avatar;
  }
})

const goToEdit = () => {
  Taro.navigateTo({
    url: '/pages/bind/index'
  })
};


const uploadImg = () => {
  Taro.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePaths = res.tempFilePaths[0];
      Taro.uploadFile({
      url: BASE_URL + '/admin/?m=srv&a=upload',
      filePath: tempFilePaths,
      name: 'file',
      header: {
        'content-type': 'multipart/form-data',
      },
      success: function (res) {
        let upload_data = JSON.parse(res.data);
        Taro.hideLoading({
          success: () => {
            if (res.statusCode === 200) {
              avatarUrl.value = upload_data.data.src;
            } else {
              Taro.showToast({
                icon: 'error',
                title: '服务器错误,稍后重试！',
                mask: true
              })
            }
          },
        });
      }
    });
    }
  })
}

// const isValidTel = (tel) => {
//   return /^1\d{10}$/.test(tel);
// }

const save = async () => {
  if (!username.value) {
    Taro.showToast({
      title: '请检查用户名输入',
      icon: 'error',
      duration: 2000
    });
    return;
  } else {
    const { code, data } = await saveCustomerInfoAPI({ name: username.value, avatar: avatarUrl.value });
    if (code) {
      Taro.showToast({
        title: '保存成功',
        icon: 'success',
        duration: 1000,
        success: () => {
          setTimeout(() => {
            Taro.reLaunch({
              url: '/pages/my/index'
            })
          }, 1000);
        }
      });
    }
  }
}
</script>

<script>
import "./index.less";
import mixin from '@/utils/mixin';

export default {
  name: "myInfoPage",
  mixins: [mixin.init],
};
</script>