<template>
  <view
    class="custom_title_header"
    :style="`padding-top:${capsuleRect.top + 10}px;${props?.objStyle}`"
  >
    <view
      class="company_name"
      :style="`height:${capsuleRect.height}px;line-height:${capsuleRect.height}px;`"
    >
      {{ user?.company?.name || '-' }}
    </view>
    <view class="user_info">
      <view class="user_name_roles">
        <view class="user_name" @click="handleToPage">
          <template v-if="auth?.data?.user">您好，{{ user?.name || '-' }}</template>
          <template v-else>请您登录</template>
          <uni-icons type="right" size="19" color="#666"> </uni-icons>
        </view>
        <view class="user_roles">
          <view class="item">
            <image src="/static/svg/roles.svg" mode="heightFix" />
            {{ useModel.userData.value?.position?.name || '-' }}
          </view>
          <view class="item">
            <image src="/static/svg/home.svg" mode="heightFix" />
            {{
              useModel.userData.value?.house_num
                ? `${useModel.userData.value?.house_num || '-'}户房屋`
                : '-'
            }}
          </view>
        </view>
      </view>
      <!-- <view class="company_logo"> </view> -->
    </view>
  </view>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from 'vue'
import useModel from '../model'
const titleValue = ref<string>('标题')
const capsuleRect = ref<any>({})
const props = defineProps(['title', 'objStyle'])
import { useWeAppAuthStore } from '@/common'
const auth = useWeAppAuthStore()
const user = ref<any>({})
import getUser from '@/common/libraries/userUserLogin'
import { onShow } from '@dcloudio/uni-app'
const handleToPage = () => {
  uni.navigateTo({
    url: getUser?.getLoginStatus() ? '/ME/update/index' : '/pages/login'
  })
}

onMounted(() => {
  titleValue.value = props.title
  capsuleRect.value = uni.getMenuButtonBoundingClientRect()
  console.log(capsuleRect.value, 'capsuleRect')
})

onShow(async () => {
  await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
  user.value = auth?.data?.user
  console.log('onShow', user.value)
})
</script>
<style lang="scss" scoped>
.custom_title_header {
  padding: 0 30rpx;
  .company_name {
    color: #666;
    font-size: 28rpx;
  }
  .user_info {
    display: flex;
    align-items: center;
    .user_name_roles {
      flex: 1;
      .user_name {
        display: flex;
        align-items: center;
        font-size: 40rpx;
        font-weight: 500;
        color: #333;
        padding: 10rpx 0;
      }
      .user_roles {
        font-size: 28rpx;
        color: #666;
        display: flex;
        align-items: center;
        padding-top: 10rpx;
        .item {
          display: flex;
          align-items: center;
          height: 30rpx;
          &:last-child {
            padding-left: 20rpx;
            margin-left: 20rpx;
            border-left: 1rpx solid #d8d8d8;
          }
          image {
            height: 30rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
    .company_logo {
      width: 120rpx;
      height: 120rpx;
      background-color: #fff;
      border-radius: 100rpx;
    }
  }
}
</style>
