<template>
  <NavBar
    title="详细资料"
    style="background-color: #f7f7fa !important"
  ></NavBar>
  <div class="mx-5">
    <div class="flex items-center mt-5 mb-5">
      <img src="" alt="" class="w-10 h-10" />
      <div
        class="ml-5 w-full overflow-ellipsis overflow-hidden whitespace-nowrap"
        v-show="!state.editNameMode"
        @click="setEditNameMode"
      >
        {{ state.userData.name }}
      </div>
      <div class="ml-5 w-full" v-show="state.editNameMode">
        <input
          @blur="handleNameSetInputBlur"
          type="text"
          class="w-full"
          v-model="state.newName"
          ref="inputEleRef"
        />
      </div>
    </div>
    <div v-for="item in list" class="flex h-14 items-center" :key="item.value">
      <div class="whitespace-nowrap">{{ item.label }}</div>
      <div class="flex-grow w-2"></div>
      <div class="whitespace-nowrap overflow-hidden overflow-ellipsis">
        {{ item.value }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import NavBar from "@/components/NavBar/index.vue";
import { reactive, ref } from "@vue/reactivity";
import { nextTick } from "@vue/runtime-core";

const state = reactive({
  editNameMode: false,
  userData: {
    name: "姓名",
  },
  newName: "姓名",
});

const inputEleRef = ref<HTMLInputElement>();

const setEditNameMode = () => {
  state.editNameMode = true;
  nextTick(() => {
    inputEleRef.value?.focus();
  });
};

const handleNameSetInputBlur = () => {
  state.editNameMode = false;
  state.userData.name = state.newName;
};

const list = [
  { label: "手机号码", value: "12301928309123" },
  {
    label: "所属网点",
    value: "阿斯顿发卡机的说法阿斯顿发卡机的说法阿斯顿发卡机的说法",
  },
];
</script>
