<script setup lang="ts">

import {useConfigStore} from "@/store";


const {proxy} = getCurrentInstance() as any
const {t} = useI18n()
const configStore = useConfigStore()

const isExpandAll = ref(false)
const isShowExpandBtn = ref(false)

onMounted(() => {
  setTimeout(() => {
    const selectorQuery = uni.createSelectorQuery().in(proxy)
    selectorQuery.select('.expand-content').boundingClientRect((res) => {
      console.log('rect', res)
      console.log('res.height && res.height > uni.upx2px(10 * 42)', res.height && res.height > uni.upx2px(10 * 42))
      if (res.height && res.height > uni.upx2px(20 * 42)) {
        isShowExpandBtn.value = true
      }
    }).exec()
  }, 200)
})


</script>

<template>
  <view class="">
    <view class="expand-content relative transition-all duration-150"
          :style="[!isExpandAll? {
          maxHeight: 20 * 42 + 'rpx',
    overflow: 'hidden',
        }:{}]"
    >
      <slot></slot>
    </view>
    <view class="center mt-28rpx" v-if="isShowExpandBtn" @click="isExpandAll=!isExpandAll">
      <text class="text-24-bold" v-if="!isExpandAll">{{ t('common.see-all') }}</text>
      <text class="text-24-bold" v-else>{{ t('common.hide-all') }}</text>
      <image class="w-20rpx h-20rpx ml-10rpx shrink-0 transition-all" src="@img/2108@2x.png"
             :class="[isExpandAll?'rotate-180':'']"
      ></image>
    </view>
  </view>
</template>

<style scoped lang="scss">

</style>
