<template>
  <view>
    <wd-popup v-model="show" position="left" @close="closePopup">
      <view class="w-80 bg-[#f3f5fa] pos-relative h-full" v-if="systemInfo">
        <view
          :style="{ paddingTop: systemInfo.safeAreaInsets?.top + 'px' }"
          class="h-12 pt-1 flex flex-items-center flex-justify-between mx-4 custom-color-black"
        >
          <view class="text-4 font-bold">我的团队</view>
          <view class="rounded-50% bg-[#e2e5ea] flex-justify-center flex-items-center flex w-6 h-6">
            <wd-icon name="refresh" size="14px"></wd-icon>
          </view>
        </view>
        <scroll-view scroll-y="true" :style="{ height: systemInfo.safeArea?.height - 128 + 'px' }">
          <view class="pb-10">
            <view
              class="flex flex-items-center bg-white shadow-sm p-2 mx-2 rounded-2 mt-2"
              v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12, 13, 14, 15]"
              :key="index"
            >
              <image
                src="/static/images/icon_team_join.png"
                mode="aspectFill"
                class="w-5 h-5 mx-2"
              ></image>
              <view>
                <view class="text-3.5">06066322的互联</view>
                <image
                  src="/static/images/icon_team.webp"
                  mode="widthFix"
                  class="w-10 mt-1"
                ></image>
              </view>
              <image
                src="/static/images/icon_setting.webp"
                mode="aspectFill"
                class="w-4 h-4 ml-a"
              ></image>
            </view>
          </view>
        </scroll-view>
        <view class="pb-safe bottom-0 pos-absolute w-full color-[#515357] bg-[#f3f5fa]">
          <wd-divider color="#e6e7ec"></wd-divider>
          <view class="flex-items-center flex flex-justify-around px-5">
            <view>创建团队</view>
            <wd-divider color="#bdbfc4" vertical />
            <view>加入团队</view>
          </view>
          <wd-divider color="#e6e7ec"></wd-divider>
          <view class="text-center pb-4">快捷添加我的设备</view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
  import { useBasicStore } from '@/store'

  const $basic = useBasicStore()

  const systemInfo = ref(null)
  const show = ref<boolean>(false)

  onMounted(async () => {
    systemInfo.value = await $basic.getSystemInfo()
    showModal()
  })

  const closePopup = () => {
    uni.showTabBar()
  }

  const showModal = () => {
    uni.hideTabBar()
    show.value = true
  }

  const hideModal = () => {
    uni.showTabBar()
    show.value = false
  }

  defineExpose({
    showModal,
    hideModal
  })
</script>
