<template>
  <div>
    <van-cell-group>
      <van-cell title="头像" is-link center to="/mobile/m-me/m-avatar">
        <template #default>
          <van-image width="60" height="60" :src="getters.avatar" />
        </template>
      </van-cell>
      <van-cell title="昵称" is-link @click="showUpdateUserProfileDialog" :value="$store.state.user.user.nickName" />
      <van-cell title="账号" is-link :value="$store.state.user.user.userName" />
      <van-cell title="性别" is-link @click="showUpdateUserProfileDialog" :value="$store.state.user.user.sex == 1 ? '女' : '男'" />
      <van-cell title="手机" is-link @click="showUpdateUserProfileDialog" :value="$store.state.user.user.phonenumber" />
      <van-cell title="邮箱" is-link @click="showUpdateUserProfileDialog" :value="$store.state.user.user.email" />
    </van-cell-group>

    <van-cell-group class="margin-top">
      <van-cell title="密码修改" is-link to="/mobile/m-me/m-password" />
      <van-cell title="账号注销" @click="handleCancle" />
    </van-cell-group>

    <van-dialog v-model:show="updateProfileDialogVisible" :title="title" show-cancel-button @confirm="updateUser">
      <van-cell-group class="margin-top">
        <van-field v-model="form.nickName" label="昵称" placeholder="请输入昵称" />
        <van-field label="性别">
          <template #input>
            <van-radio-group v-model="form.sex" direction="horizontal">
              <van-radio name="0">男</van-radio>
              <van-radio name="1">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-model="form.phonenumber" label="手机" type="tel" placeholder="请输入手机" error-message="" />
        <van-field v-model="form.email" label="邮箱" placeholder="请输入邮箱" />
      </van-cell-group>
    </van-dialog>

  </div>
</template>

<script setup>
import { delUser, updateUserProfile } from "@/api/system/user";
const { proxy } = getCurrentInstance();

const store = useStore();
const getters = computed(() => store.getters);

const updateProfileDialogVisible = ref(false);
const title = ref("");

const data = reactive({
  form: {},
});

const { form } = toRefs(data);

// 修改资料对话框
function showUpdateUserProfileDialog() {
  updateProfileDialogVisible.value = true;
  // console.log(updateProfileDialogVisible)
  form.value = JSON.parse(JSON.stringify(store.state.user.user));
  title.value = "修改资料";
}

// 修改资料
function updateUser() {
  updateUserProfile(form.value).then((response) => {
    proxy.$modal.msgSuccess("修改成功");
    store.state.user.user = JSON.parse(JSON.stringify(form.value));
  });
}

// 注销账号
function handleCancle() {
  proxy.$modal
    .confirm("是否注销账号？")
    .then(() => {
      delUser(store.state.user.user.userId).then(() => {
        store.dispatch("LogOut").then(() => {
          proxy.$router.push("/");
          // location.reload()
          // location.href = '/index';
          // proxy.$router.replace("/login");
          // proxy.$store.state.tagsView.visitedViews = [];
        });
      });
    })
    .catch(() => {
      // on cancel
    });
}
</script>

