<template>
  <div class="security">
    <div class="flex items-center h-[100px]">
      <div>
        <Icon
          style="font-size: 40px"
          icon-name="icongerenzhongxin-zhanghuanquan-shoujihao"
        ></Icon>
      </div>
      <div class="flex-grow ml-4">
        <div class="label">手机号</div>
        <div class="content mt-2">
          {{
            infos.phone === "" ? "未绑定" : "已绑定，绑定手机号" + infos.phone
          }}
        </div>
      </div>
      <div class="blue-button" @click="changePhoneDialogVisible = true">
        {{ infos.phone === "" ? "去绑定" : "更换" }}
      </div>
    </div>
    <div class="flex items-center h-[100px]">
      <div>
        <Icon
          style="font-size: 40px"
          icon-name="icongerenzhongxin-zhanghuanquan-youxiang"
        ></Icon>
      </div>
      <div class="flex-grow ml-4">
        <div class="label">邮箱</div>
        <div class="content mt-2">
          {{ infos.email === "" ? "未绑定" : "已绑定，绑定邮箱" + infos.email }}
        </div>
      </div>
      <div class="blue-button" @click="changeEmailDialogVisible = true">
        {{ infos.email === "" ? "去绑定" : "更换" }}
      </div>
    </div>
    <div class="flex items-center h-[100px]">
      <div>
        <Icon
          style="font-size: 40px"
          icon-name="icongerenzhongxin-zhanghuanquan-xiugaimima"
        ></Icon>
      </div>
      <div class="flex-grow ml-4">
        <div class="label">登录密码</div>

        <div class="content mt-2">
          {{
            passwordStatus.status === true
              ? "已设置，可通过账户密码登录"
              : "未设置"
          }}
        </div>
      </div>
      <div class="blue-button" @click="changePwdDialogVisible = true">
        {{
          passwordStatus.status === true
            ? "更换"
            : "去设置"
        }}
      </div>
    </div>
    <ChangePhoneDialog
      v-model:visible="changePhoneDialogVisible"
      @update="$emit('ToUpdate')"
    ></ChangePhoneDialog>
    <ChangePwdDialog
      v-model:visible="changePwdDialogVisible"
      @update="$emit('ToUpdate')"
    ></ChangePwdDialog>
    <ChangeEmailDialog
      @update="$emit('ToUpdate')"
      v-model:visible="changeEmailDialogVisible"
    ></ChangeEmailDialog>
  </div>
</template>

<script setup lang="ts">
import Icon from "@/components/Icon/index.vue";
import { inject, ref } from "vue";
import ChangePhoneDialog from "./ChangePhoneDialog/index.vue";
import ChangePwdDialog from "./ChangePwdDialog/index.vue";
import ChangeEmailDialog from "./ChangeEmailDialog/index.vue";
defineProps<{
  infos: any;
}>();

const passwordStatus = inject<any>("passwordStatus");
const changePhoneDialogVisible = ref(false);
const changeEmailDialogVisible = ref(false);
const changePwdDialogVisible = ref(false);
const emit = defineEmits(["ToUpdate"]);
</script>

<style lang="scss" scoped>
.security {
  .label {
    font-size: 16px;
    font-weight: 600;
    color: var(--sy-black);
  }
  .content {
    font-size: 14px;
    font-weight: 400;
    color: var(--sy-black);
  }
}
</style>
