<script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'

const props = defineProps({
  zIndex: {
    type: Number,
    default: 99,
  },
  bottom: {
    type: Number,
    default: (systemInfo.safeAreaInsets.bottom + 60),
  },
  offset: {
    type: Number,
    default: 50,
  },
})
const isShow = ref(true)
const rectInfo = ref<any>({
  bottom: 0,
  height: 0,

})
// 计算卡片的偏移量
const cardOffset = computed(() => {
  return isShow.value ? 0 : (rectInfo.value.height - 5)
})

function getContainerSize() {
  uni.createSelectorQuery()
    .in(getCurrentInstance())
    .select('.container')
    .boundingClientRect((rect) => {
      if (rect) {
        rectInfo.value = rect
      }
    })
    .exec()
}
onMounted(() => {
  getContainerSize()
  uni.onWindowResize(getContainerSize)
})
</script>

<template>
  <view
    class="container"
    :style="{
      zIndex: props.zIndex,
      bottom: `${props.bottom}px`,
      transform: `translateY(${cardOffset}px)`,
    }"
  >
    <view class="shrink_button" @click="isShow = !isShow">
      <uv-icon :name="isShow ? 'arrow-down' : 'arrow-up'" size="20" />
    </view>
    <view class="content">
      <slot />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  position: fixed;
  left: 20rpx;
  width: calc(100% - 80rpx);
  padding: 20rpx;
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;

  .shrink_button {
    position: absolute;
    top: 0;
    left: 50%;
    // 水平居中
    transform: translate(-50%, -100%);
    width: 200rpx;
    height: 30rpx;
    background-color: white;
    border-radius: 20rpx 20rpx 0 0;
    // 让按钮文字居中
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eee;
    box-shadow: 0 -5rpx 10rpx rgba(0, 0, 0, 0.2);
  }
}
</style>
