<template>
  <view class="single_box children_box">
    <view class="children">
      <view class="left">
        <image
          :src="showChildren?.childAvatar ? showChildren?.childAvatar : defaultAvatar"
          mode=""
          class="children_avatar"
        ></image>
        <view>
          <view class="name_vip">
            <text class="name">{{
              showChildren?.childName ? showChildren?.childName : '未绑定账号'
            }}</text>
            <image
              v-if="showChildren?.currentLevel"
              :src="`${OSS_URL}/iconfont/VIP/VIP_${showChildren?.currentLevel}.png`"
              class="vip"
            />
          </view>
          <view class="time">
            <template v-if="showChildren?.vipEndTime">
              有效期至：{{
                showChildren?.vipEndTime
                  ? dayjs(showChildren?.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="handleShowChildren(i)"
      >
        <view class="left">
          <image
            :src="i.childAvatar ? i.childAvatar : defaultAvatar"
            mode=""
            class="children_avatar"
          ></image>
          <view>
            <view class="name_vip">
              <text class="name">{{ i.childName }}</text>
              <image
                v-if="i.currentLevel"
                :src="`${OSS_URL}/iconfont/VIP/VIP_${i.currentLevel}.png`"
                class="vip"
              />
            </view>
            <view class="time">
              有效期至：{{ i.vipEndTime ? dayjs(i.vipEndTime).format('YYYY.MM.DD') : '-' }}
            </view>
          </view>
        </view>
        <image
          class="icon checked_icon"
          :src="
            checkedId === i.childId
              ? `${OSS_URL}/iconfont/checked.png`
              : `${OSS_URL}/iconfont/unchecked.png`
          "
        />
      </view>
    </template>
    <view class="children_info">
      <view class="item">
        年级：<text class="level">{{ showChildren?.gradeName || '-' }}</text>
      </view>
      <view class="item">
        等级：<text class="level">{{ showChildren?.expLevel || '-' }}</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, computed } 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.childId !== props.showItem.childId),
);

const showChildren = 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 handleShowChildren(i: ChildrenType) {
  checkedId.value = i.childId;
  setTimeout(() => {
    showChildren.value = i;
  }, 200);
}
</script>
