<template lang="">
  <div class="container">
    <div class="top">
      <div class="back" @click="$router.go(-1)">
        <el-icon><Back /></el-icon>
        <div class="text">返回</div>
      </div>

      <div class="divider"></div>
      <div class="setting">个人设置</div>
    </div>
    <div class="main">
      <div class="company">
        <div class="company_info_left">
          当前所在企业：{{ userInfo.companyName }}
        </div>
        <div class="company_info_right">
          <el-button @click="companyHandle">切换企业</el-button>
        </div>
      </div>
      <div class="user">
        <div class="user_info_left">
          <div class="account_info_div">
            <span class="shuxian"></span>
            <span class="account_info">账号信息</span>
          </div>

          <div class="avatar">
            <el-avatar :size="100" :src="userInfo.headImg" />
            <div class="username_div">{{ userInfo.name }}</div>
            <div class="avatar_div">
              <span class="id">ID</span>
              <span class="idNo">{{ userInfo.userNo }}</span>
            </div>
          </div>
        </div>
        <div class="user_info_right">
          <div class="account_info_div">
            <span class="shuxian"></span>
            <span class="account_info">账号安全</span>
          </div>

          <div class="account_safe">
            <div class="account_item">
              <div class="icon_name">
                <div class="icon">
                  <img src="@/assets/images/tel_active.png" class="img" />
                </div>
                <div class="icon_tip">
                  <div class="icon_tip_one">登录密码</div>
                  <div class="icon_tip_two">
                    为了您的账号安全，建议定期修改密码
                  </div>
                </div>
              </div>
              <div class="button" @click="handleCode">修改</div>
            </div>
            <div class="account_item">
              <div class="icon_name">
                <div class="icon">
                  <img src="@/assets/images/tel_active.png" class="img" />
                </div>
                <div class="icon_tip">
                  <div class="icon_tip_one">登录密码</div>
                  <div class="icon_tip_two">
                    为了您的账号安全，建议定期修改密码
                  </div>
                </div>
              </div>
              <div class="button">解绑</div>
            </div>
            <div class="account_item">
              <div class="icon_name">
                <div class="icon">
                  <img src="@/assets/images/tel_active.png" class="img" />
                </div>
                <div class="icon_tip">
                  <div class="icon_tip_one">绑定邮箱</div>
                  <div class="icon_tip_two">绑定后，可通过邮箱账号进行登录</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 
    <ChangeCompany  ref="companyRef" ></ChangeCompany>
    <LoginCode  ref="codeRef" ></LoginCode>

  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { getInfo } from '@/api/login'
import ChangeCompany from '@/components/changeCompany.vue'
import LoginCode from '@/components/loginCode.vue'
const userStore = useUserStore()
const userInfo = ref({})
onMounted(() => {
  getInfo()
})
getInfo()
  .then(res => {
    if (res.data.code == 200) {
      console.log(res.data.data.userInfo)
      userInfo.value = res.data.data.userInfo
      userStore.userInfo = res.data.data.userInfo
      console.log(userStore.userInfo)
    }
  })
  .catch(() => {
    console.error('Info接口调用失败')
  })
  //切换企业
  const companyRef = ref(null);
 
 const companyHandle = () => {
   if (companyRef.value) {
     console.log('调用子组件的方法,companyRef.value')
     companyRef.value.changeCompany(); // 调用子组件的方法
   }
 };
 //修改密码
 const codeRef = ref(null);
 const handleCode = () => {
   if (codeRef.value) {
     console.log('调用子组件的方法,codeRef')
     codeRef.value.changeCode(); // 调用子组件的方法
   }
 };
</script>
<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: #f2f3f5;
  display: flex;
  flex-direction: column;
}
.top {
  height: 60px;
  line-height: 60px;
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 24px;
  font-weight: 400;
  font-size: 16px;
  color: #1f2329;
  .back {
    display: flex;
    align-items: center;
  }
  .text {
    margin-left: 12px;
  }
  .divider {
    width: 1px;
    height: 24px;
    background: #d1d3d6;
    margin: 0 24px;
  }
  .setting {
    font-size: 16px;
    color: #1f2329;
    font-weight: bold;
  }
}
.main {
  padding: 16px 120px;
  overflow: hidden;
  flex: 1;
}
.company {
  margin-bottom: 14px;
  height: 58px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 41px 0 24px;
  .company_info_right {
  }
  .company_info_left {
    color: #1d2129;
    font-size: 18px;
    font-weight: bold;
  }
}
.user {
  display: flex;
}
.user_info_left {
  width: 394px;
  height: 418px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  margin-right: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.user_info_right {
  padding: 28px 24px;
  flex: 1;
  height: 418px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
}
.account_info_div {
  display: flex;
  align-items: center;
}
.shuxian {
  width: 2px;
  height: 16px;
  background: #5287ff;
  border-radius: 0px 0px 0px 0px;
  display: inline-block;
}
.account_info {
  font-weight: 500;
  font-size: 16px;
  color: #1f2329;
  margin-left: 12px;
  display: inline-block;
}
.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  .username_div {
    font-weight: bold;
    margin-top: 24px;
    font-size: 20px;
    color: #000000;
  }
  .avatar_div {
    display: flex;
    align-items: center;
    margin-top: 24px;
    .id {
      display: inline-block;

      font-size: 14px;
      color: #656b73;
      width: 22px;
      height: 22px;
      background: #e1e2e4;
      border-radius: 2px 2px 2px 2px;
      margin-right: 8px;
      line-height: 22px;
      text-align: center;
    }
    .idNo {
      font-size: 14px;
      color: #1f2329;
      font-weight: normal;

      font-size: 14px;
      color: #333333;
    }
  }
}

.account_safe {
  flex: 1;
  padding: 24px;
}
.account_item {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.icon_name {
  display: flex;
  align-items: center;
}
.icon {
  width: 48px;
  height: 48px;
  .img {
    width: 100%;
    height: 100%;
  }
}
.icon_tip {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 50px;
  .icon_tip_one {
    font-size: 16px;
    color: #000000;
    display: block;
  }
  .icon_tip_two {
    display: block;
    font-size: 14px;
    color: #656b73;
  }
}
.button {
  font-size: 14px;
  color: #2f66ff;
  width: 60px;
  height: 30px;
  background: #f0f4fe;
  border-radius: 2px 2px 2px 2px;
  text-align: center;
  line-height: 30px;
}
.label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 14px;
color: #1F2329;
  .red{
    color: #FF3535;
  }
}
</style>
