<script setup lang="ts">
import { deviceDetection, hideTextAtIndex } from "@pureadmin/utils";
import { useUserInfo } from "../utils/hooks";
defineOptions({
  name: "AccountSafe"
});

const { handleReset, handlePhone, handleEmail, userInfo } = useUserInfo();
</script>

<template>
  <div
    :class="[
      'min-w-[180px]',
      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
    ]"
  >
    <h3 class="my-8">账户安全</h3>
    <div class="flex items-center">
      <div class="flex-1">
        <p>账号密码</p>
        <el-text class="mx-1" type="info" />
      </div>
      <el-button type="primary" text @click="handleReset(userInfo)"
        >修改</el-button
      >
    </div>
    <el-divider />
    <div class="flex items-center">
      <div class="flex-1">
        <p>绑定号码</p>
        <el-text class="mx-1" type="info">
          已经绑定手机：{{
            hideTextAtIndex(userInfo.phone, { start: 3, end: 6 })
          }}
        </el-text>
      </div>
      <el-button type="primary" text @click="handlePhone(userInfo)"
        >修改</el-button
      >
    </div>
    <el-divider />
    <div class="flex items-center">
      <div class="flex-1">
        <p>绑定邮箱</p>
        <el-text class="mx-1" type="info"
          >已绑定邮箱：{{
            hideTextAtIndex(userInfo.email, {
              start: 3,
              end: userInfo.email.indexOf("@") - 1
            })
          }}
        </el-text>
      </div>
      <el-button type="primary" text @click="handleEmail(userInfo)"
        >修改</el-button
      >
    </div>
    <el-divider />
  </div>
</template>

<style lang="scss" scoped>
.el-divider--horizontal {
  border-top: 0.1px var(--el-border-color) var(--el-border-style);
}
</style>
