<template>
  <view class="single_box children_box">
    <view class="children">
      <view class="left">
        <image
          :src="showChild?.child?.avatar || defaultAvatar"
          mode=""
          class="children_avatar"
        ></image>
        <view>
          <view class="name_vip">
            <text class="name">{{ showChild?.child?.name || '未绑定账号' }}</text>
            <image
              v-if="showChild?.child?.currentLevel"
              :src="`${OSS_URL}/iconfont/VIP/VIP_${showChild?.child?.currentLevel}.png`"
              class="vip"
            />
          </view>
          <view class="time">
            <template v-if="showChild?.child?.vipEndTime">
              有效期至：{{
                showChild?.child?.vipEndTime
                  ? dayjs(showChild?.child?.vipEndTime).format('YYYY.MM.DD')
                  : '-'
              }}
            </template>
            <template v-else>请先绑定孩子账号</template>
          </view>
        </view>
      </view>
      <view v-if="list.length > 1">
        <image
          :class="{ icon: true, rotate: showAllChildren }"
          :src="arrow"
          @click="showAllChildren = !showAllChildren"
        />
      </view>
    </view>
    <template v-if="showAllChildren">
      <view
        v-for="(i, idx) in otherChildrenList"
        :key="idx"
        class="children"
        @click="handleShowChild(i)"
      >
        <view class="left">
          <image :src="i.child?.avatar || defaultAvatar" mode="" class="children_avatar"></image>
          <view>
            <view class="name_vip">
              <text class="name">{{ i.child?.name || '未绑定账号' }}</text>
              <image
                v-if="i.child?.currentLevel"
                :src="`${OSS_URL}/iconfont/VIP/VIP_${i.child?.currentLevel}.png`"
                class="vip"
              />
            </view>
            <view class="time">
              有效期至：{{
                i.child?.vipEndTime ? dayjs(i.child?.vipEndTime).format('YYYY.MM.DD') : '-'
              }}
            </view>
          </view>
        </view>
        <image
          class="icon checked_icon"
          :src="
            checkedId === i.child?.id
              ? `${OSS_URL}/iconfont/checked.png`
              : `${OSS_URL}/iconfont/unchecked.png`
          "
        />
      </view>
    </template>
    <view class="children_info">
      <view class="item">
        乐贝：<text class="level">{{ showChild?.child?.currency || '-' }}</text>
      </view>
      <view class="item">
        钻石：<text class="level">{{ showChild?.child?.diamond || '-' }}</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import type { ChildrenType } from '@/pages/mine/interface'
import '../index.scss'
import dayjs from 'dayjs'

const props = withDefaults(
  defineProps<{
    list: ChildrenType[]
    showItem: ChildrenType
  }>(),
  {
    list: () => [],
    showItem: () => ({}) as ChildrenType,
  },
)
const emits = defineEmits(['updateShowItem'])
const otherChildrenList = computed(() =>
  props.list.filter(i => i.child?.id !== props.showItem.child?.id),
)

const showChild = computed({
  get() {
    return props.showItem
  },
  set(newVal) {
    emits('updateShowItem', newVal)
  },
})

const OSS_URL = import.meta.env.VITE_OSS_HOST
const arrow = `${OSS_URL}/iconfont/down_arrow.png`

const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`
const showAllChildren = ref(false)
const checkedId = ref<string>()
function handleShowChild(i: ChildrenType) {
  checkedId.value = i.child?.id
  setTimeout(() => {
    showChild.value = i
  }, 200)
}
</script>
