<script setup lang="ts">
import { h, nextTick, onMounted, onUpdated, ref, watch } from 'vue';
import { NButton, NImage, NInput, NSpace, NTag, useMessage, useNotification } from 'naive-ui';
import { EditArrowBack20Filled } from '@vicons/fluent';
import { localStg } from '@/utils/storage';

import {
  api_getUserInfo,
  api_modifyUserInfo,
  api_modifyUserPass
} from '@/api/index';

const message = useMessage();

const userInfo = ref('');

const modifyForm = ref({
  id: 0,
  name: "",
  password: "",
  phone: "",
  userName: ""
});

const modifyPassword = async () => {
  let id = localStg.get('id');
  await api_modifyUserPass(id).then(res => {
    if (res.data.code === 200) {
      return message.success("修改成功!")
    }
  })
}


const modifyUserInfo = async () => {
  let id = localStg.get('id');
  // modifyForm.value.id = id;
  await api_modifyUserInfo(model.value).then(res => {
    if (res.data.code === 200) {
      getUserInfo();
      return message.success("修改成功!")
    }
    return message.error("修改失败!")
  });
};


const model = ref({
  age: '',
});

const getUserInfo = async () => {
  //  获取ID
  let id = localStg.get('id');

  //  调用接口
  await api_getUserInfo(id).then(res => {
    if (res.data.code === 200) {
      model.value = res.data.data;
    }
  });
};


const showModal = ref(false);


const onSubmit = () => {
  console.log("==================== submit", modifyForm.value)
  modifyUserInfo();
}


const modifyPhone = ref(false);
const modifyName = ref(false);

onMounted(() => {
  getUserInfo();
});
</script>

<template>
  <!-- ==================== 个人中心 | S -->
  <div id="UserCenter">

      <!-- ======================== 弹窗 | S -->
      <NModal v-model:show="showModal">
        <NCard title="修改密码" style="width: 600px;" closable @close="showModal = false">
          <!-- 个人中心 | S  -->
          <n-form label-align="right" ref="formRef" label-placement="left">
            <n-form-item label="登录密码" required>
              <NInput v-model:value="modifyForm.password"></NInput>
            </n-form-item>

          </n-form>
          <template #footer>
            <NSpace justify="end">
              <NButton @click="showModal = false">取消</NButton>
              <NButton @click="showModal = false" type="primary">确定</NButton>
            </NSpace>
          </template>
        </NCard>
      </NModal>
      <!-- ======================== 弹窗 | E -->

      <NRow>
        <NCol span="8">
          <NCard>
            <template #header>
              <div class="flex-between">
                <div>
                  <div class="title">个人中心</div>
                </div>
              </div>
            </template>

            <div>
              <!-- c:\Users\1\AppData\Roaming\DingTalk\2081392729_v2\resource_cache\6b\6bece2cf2b902611f3582e61e895d404.png -->
              <img width="200" style="width: 200px; height: 200px;" src="../../assets/yonghu_03.png" alt="" srcset="">
            </div>

            <NSpace justify="center">
              <div style="display: flex; justify-content: center; align-items: center; width: 400px;">
                <n-form label-align="right" ref="formRef" label-placement="left" style="width: 100%;">
                  <n-form-item label="用户名" style="width: 100%; ">
                    <div style="width: 100%; display: flex; justify-content: end;">
                      <div> {{ model?.userName }}</div>
                    </div>
                  </n-form-item>

                  <n-form-item label="用户姓名">
                    <div style="width: 100%; display: flex; justify-content: end;">
                      <span v-if="!modifyName">{{ model.name }} </span>
                      <NInput v-else size="small" style="width: 200px" v-model:value="model.name" clearable />
                      <NButton style="margin-left: 5px;" text @click.stop="modifyName = !modifyName">
                        <n-icon color="#646cff" size="17">
                          <EditArrowBack20Filled />
                        </n-icon>
                      </NButton>
                    </div>
                  </n-form-item>

                  <n-form-item label="手机号">
                    <div style="width: 100%; display: flex; justify-content: end;">
                      <span v-if="!modifyPhone">{{ model.phone }} </span>
                      <NInput v-else @click.stop="() => { }" size="small" style="width: 200px" v-model:value="model.phone"
                        clearable />
                      <NButton style="margin-left: 5px;" text @click.stop="modifyPhone = !modifyPhone">
                        <n-icon color="#646cff" size="17">
                          <EditArrowBack20Filled />
                        </n-icon>
                      </NButton>
                    </div>
                  </n-form-item>

                  <n-form-item label="安全设置">
                    <n-button quaternary type="info" @click="showModal = true">
                      修改密码
                    </n-button>
                  </n-form-item>
                </n-form>
              </div>
            </NSpace>
            <template #footer>
              <NSpace justify="center">
                <NButton @click="onSubmit" type="primary">保存设置</NButton>
              </NSpace>
            </template>
          </NCard>
        </NCol>
      </NRow>
  </div>
  <!-- ==================== 个人中心 | E -->
</template>

<style scoped>
#UserCenter {
  width: 100%;
  height: 100%;
}
</style>
