<template>
  <div class="main">
    <div class="user g-p20">
      <div class="user__head g-fx">
        <el-image class="user__img" :src="usrInfo.profilePicture" fit="cover" />
        <div class="info">
          <div class="user__name">{{ usrInfo.trueName }}</div>
          <div>{{ usrInfo.phoneNumber }}</div>
        </div>
      </div>
      <div class="details">
        <div class="g-fx-j details__head">
          <div>个人资料</div>
          <el-button type="default" @click="" hidden>编辑资料</el-button>
        </div>
        <div class="details-box g-fx">
          <div class="details__item" :class="{ img: label == '头像', wx: label == '微信' }" v-for="{ label, value } in list"
            :key="label">
            <div v-if="!['头像', '微信'].includes(label)">
              <div class="item-label">{{ label }}</div>
              <div class="item-value">{{ usrInfo[value] }}</div>
            </div>
            <div v-if="label == '头像'" class="item-edit g-fx-j" hidden>
              <el-image class="user__img1" :src="usrInfo[value]" fit="cover" />
              <el-button type="primary" size="default" @click="">上传头像</el-button>
            </div>
            <div v-if="label == '微信'" class="item-edit g-fx-j" hidden>
              <div clasws="item-wx">
                <el-image class="user__img1" :src="img" fit="cover" />
                ID: {{ usrInfo.userName }}
              </div>
              <el-button type="success" size="default" @click="">解除绑定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { fetchCurrentUserInfo } from '@/api/profile'
import img from '@/assets/img/wx.png'

const list = [
  {
    label: '用户名',
    value: 'trueName'
  },
  {
    label: '公司',
    value: 'companyName'
  },
  {
    label: '联系电话',
    value: 'phoneNumber'
  },
  {
    label: '邮箱',
    value: 'emailAddress'
  }
]
onMounted(() => {
  getUserInfo()
})
const usrInfo: any = ref({})
const getUserInfo = async () => {
  const data: any = await fetchCurrentUserInfo()
  usrInfo.value = data
}
</script>

<style lang="less" scoped>
.main {
  min-height: calc(100vh - 90px);
  margin-bottom: 100px;
}

.user {
  width: calc(100% - 40px);
  background-image: url(../../assets/img/user-bg.png);
  background-size: 100% 100%;
  margin: 20px;
  height: 400px;
  z-index: 9;
  position: relative;
  box-sizing: border-box;
  border-radius: 8px;

  &__head {
    height: 400px;
    padding: 80px 150px;
    color: #fff;
  }

  .info {
    padding-top: 40px;
  }

  &__name {
    font-size: 30px;
    margin-bottom: 10px;
  }

  &__img {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    margin-right: 20px;
  }
}

.details {
  border-radius: 8px;
  height: 567px;
  background: #ffffff;
  border-radius: 10px;
  margin-top: -80px;

  &__head {
    padding: 80px;

    div {
      font-weight: bold;
      font-size: 16px;
    }

    .el-button {
      width: 90px;
      height: 40px;
      border: 1px solid #5f7cd6;
      border-radius: 10px;
      color: #5f7cd6;
    }
  }

  .details-box {
    margin: 0px 150px;
    flex-wrap: wrap;
    justify-content: center;

    .img {
      border: 2px solid #8fa3e2;
      border-radius: 10px;
    }

    .wx {
      border: 2px solid #95ce81;
      border-radius: 10px;
    }
  }

  &__item {
    height: 100px;
    width: 400px;
    margin: 20px 30px;
    background: #f4f6f9;
    border-radius: 10px;
    display: flex;
    padding: 0 20px;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
  }

  &__item:hover {
    // transform: scale(1.03);
  }

  .item-label {
    font-weight: bold;
    font-size: 16px;
  }

  .item-value {
    font-size: 14px;
    color: #a8afbd;
    margin-top: 10px;
  }

  .user__img1 {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    margin-right: 10px;
  }

  .item-edit {
    width: 100%;
    align-items: center;
  }

  .item-wx {
    display: flex;
    align-items: center;
    color: #a8afbd;
    font-size: 14px;
  }
}
</style>
