<template>
  <div class="list">
    <div class="row flex items-center">
      <div class="label">头像</div>
      <n-avatar round :src="userinfo.avaUrl" fallback-src="https://www.hxyouzi.com/gin/assets/ava/默认.png" />
      <div class="edit" @click="showModal = true">更换</div>
    </div>
    <div class="row flex items-center mt-4">
      <div class="label">手机号</div>
      <div>{{ userinfo.tel }} <span v-if="!userinfo.tel" class="text-gray-500 text-[12px] underline italic">尚未绑定手机号</span>
      </div>
      <div class="edit" @click="showTelModal = true">更换</div>
    </div>
  </div>

  <n-modal :closable="false" :show="showModal" title="更改头像" @mask-click="showModal = false" @esc="showModal = false"
    @negative-click="showModal = false" preset="dialog" negative-text="取消">
    <div style="margin: 10px 0; width: 100%; display: flex; justify-content: center">
      <n-avatar round :size="80" :src="userinfo.avaUrl" fallback-src="https://www.hxyouzi.com/gin/assets/ava/默认.png" />
    </div>
    <n-upload action="https://www.hxyouzi.com/api/info/update/avater" :headers="{ Authorization: token }"
      :show-file-list="false" :on-finish="fileFinish" accept=".jpg,.jpeg,.png,.gif,.jfif"
      style="width: 100%; display: flex; justify-content: center">
      <n-button type="primary">上传头像</n-button>
    </n-upload>
  </n-modal>

  <n-modal :closable="false" :show="showTelModal" title="更改手机号" @mask-click="showTelModal = false"
    @esc="showTelModal = false" @negative-click="showTelModal = false" preset="dialog" negative-text="取消"
    positive-text="确认" @positive-click="submitCallback">
    <n-input v-model:value="tel" type="text" :placeholder="userinfo.tel || '请输入手机号'" clearable></n-input>
  </n-modal>
</template>

<script setup>
import cookie from "vue-cookies";


let userinfo = ref(cookie.get("userinfo"));
let token = ref(cookie.get("token"));
const showModal = ref(false);
const showTelModal = ref(false);
const tel = ref('')


function fileFinish(file) {
  const res = JSON.parse(file.event.currentTarget.response);
  // console.log(res);
  if (res.code == 1) {
    $msg.success(res.msg);
    autologin();
  } else {
    $msg.error(res.msg);
  }
}
async function autologin() {
  const res = await $http.user.alogin();
  if (res.code == 1) {
    cookie.set("token", res.token, "1d");
    cookie.set("userinfo", res.data, "1d");
    userinfo.value = cookie.get("userinfo");
    location.reload();
  }
} 
async function submitCallback() {
  if (!tel.value) return
  if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(tel.value)) {
    $msg.error('请输入正确的手机号!')
    return
  }
  const res = await $http.user.updatetel({ tel: tel.value })
  if (res.code == 1) {
    $msg.success(res.msg)
    showTelModal.value = false
  }
  else $msg.error(res.msg)
}

</script>

<style scoped lang="less">
.label {
  padding: 0 10px;
  margin-right: 20px;
}

.edit {
  // padding: 0 10px;
  margin-left: 20px;
  font-size: 12px;
  text-decoration: underline;
  color: @blue;
  cursor: url("@/cursor/link_26x26.png"), pointer !important;
}

.edit:hover {
  color: @purple;
}</style>
