<template>
  <!-- :class="`custom-title ${useModel?.scrollTop?.value > 10 ? 'custom_title_scroll_bg' : ''}`" -->
  <view
    class="custom-title"
    :style="`padding-top:${capsuleRect.top}px;height:${capsuleRect.height}px;line-height:${capsuleRect.height}px;${props?.objStyle};${useModel?.scrollTop?.value > 10 ? getPageBgFun() : ''}`"
  >
    <view @click="handlePopupSwitchHouse" class="user_houses_info">
      <image
        mode="aspectFill"
        v-if="userData?.config?.companyConfig?.config_value?.logo?.[0]?.url"
        :src="userData?.config?.companyConfig?.config_value?.logo?.[0]?.url || ''"
      />
      <text v-if="!userData?.user">请先登录</text>
      <text v-else-if="!userData?.selected_house">请绑定您的房屋</text>
      <view v-else class="full_name">{{
        truncateString(userData?.selected_house?.full_name || '')
      }}</view>
      <up-icon name="arrow-down-fill" size="12" color="#333"></up-icon>
    </view>
    <hs-popup-switch-house :show="show" @close="show = false" @change="handleSelectedHouse" />
  </view>
</template>
<script setup lang="ts">
import { getIsHouseExist } from '@/common/libraries/IsHouseExist'
import { onHide, onShow } from '@dcloudio/uni-app'
import { onMounted, ref, watch } from 'vue'
import { useWeAppAuthStore, useWorkStore } from '@/common'
const work = useWorkStore()
import useModel from '../model'
const show = ref(false)
const titleValue = ref<string>('标题')
const capsuleRect = ref<any>({})
const userData = ref<any>({})
const auth = useWeAppAuthStore()
const props = defineProps(['title', 'objStyle', 'data'])

const handlePopupSwitchHouse = () => {
  if (!getIsHouseExist()) return
  show.value = true
}
watch(
  () => work?.selectedHouse,
  () => {
    if (work?.selectedHouse) {
      show.value = true
    }
    console.log('work?.selectedHouse', work?.selectedHouse)
  }
)
const handleSelectedHouse = (e: any) => {
  show.value = false
}

const getPageBgFun = () => {
  let cssStrColor =
    useModel?.pageConfig?.value?.pageColorValue?.[0] || '#d3d7ff'
  let cssEndColor =
    useModel?.pageConfig?.value?.pageColorValue?.[1] || '#dffff3'
  // let bhg = `background: linear-gradient(180deg,rgba(208, 229, 255, 0.44) 0%,rgba(255, 255, 255, 0) 100%),linear-gradient(146deg,  ${cssStrColor} 0%, rgba(255, 255, 255, 0) 55%),linear-gradient(194deg, ${cssEndColor} 0%, #f8f8f8 65%);`
  let bhg = `background:linear-gradient(180deg,rgba(208, 229, 255, 0.44) 0%,#f7f7f7 100%,rgba(255, 255, 255, 0) 100%),linear-gradient(145deg, ${cssStrColor} 100%,rgba(255, 255, 255, 0) 100%),linear-gradient(222deg, ${cssEndColor} 100%,#F7F7F7 40%);`;
        
  return bhg
}

// 截断字符串，限制15个中文字，超过的从中间截取
const truncateString = (str: string): string => {
  if (!str) return '-'
  const maxLength = 15
  if (str.length <= maxLength) return str
  // 因为...占3个字符，所以前后各显示6个字符，总共6+3+6=15
  const start = 6
  const end = 6
  return str.slice(0, start) + '...' + str.slice(-end)
}

watch(
  () => auth?.data?.user,
  () => {
    if (auth?.data?.house_occupant && !auth?.data?.selected_house) {
      show.value = false
    }
  },
  {
    deep: true
  }
)

onShow(() => {
  userData.value = auth?.data
  console.log('2k2k', userData.value)
})

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

onHide(() => {
  show.value = false
})
</script>
<style lang="scss" scoped>
.custom-title {
  font-size: 30rpx;
  font-weight: bold;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  text {
    padding: 0 10rpx 0 15rpx;
  }
  .user_houses_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 100rpx;
    .full_name {
      max-width: 319rpx;
      padding: 0 15rpx;
      overflow: hidden;
      white-space: nowrap;
    }
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }
}
.custom_title_scroll_bg {
  background: linear-gradient(270deg, #def6f8 0%, #d8e2fe 100%);
  padding-bottom: 20rpx;
}
</style>
