<template>
  <div style="background: #CFF; padding: 1rem; text-align: center;">
    <van-image v-if="myKgInfo.logo" round width="4rem" height="4rem" :src="myKgInfo.logo" />
    <van-image v-else round width="4rem" height="4rem" :src="icon_avatar" />
    <p style="margin-top: 1rem; font-size: 1.05rem; font-weight: bold;">{{ myKgInfo.name }}</p>
  </div>
  <template v-for="(item, key) in itemList" :key="key">
    <div class="van-hairline--bottom item-list" @click="goTo(item.to)">
      <van-row>
        <van-col span="12">{{ item.name }}</van-col>
        <van-col span="12" style="text-align: right; color: #777777;">
          <span v-if="!item.tag">{{ item.sum }}&nbsp;&nbsp;</span>
          <span v-else><van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;</span>
        <van-icon name="arrow" /></van-col>
      </van-row>
    </div>
  </template>
  <div @click="exitLogin" class="exit-btn">退出登录</div>
  <shortcut-fixed type="B" :item="['home']"></shortcut-fixed>
</template>

<script setup>
import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
import icon_avatar from '@images/que-logo@2x.png'

import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

const myKgInfo = ref({});
let itemList = ref([])
axios.get('/srv/?a=my_kg')
.then(res => {
  if (res.data.code === 1) {
    myKgInfo.value = res.data.data;
    itemList.value = [
      {
        name: '幼儿园上传视频',
        sum: res.data.data.mission_num,
        to: '/business/myVideo'
      },
      {
        name: '家长上传视频',
        sum: res.data.data.prod_num,
        tag: true,
        to: '/business/auditVideo'
      },
    ]
  } else {
    console.warn(res);
    if (!res.data.show) return false;
    Toast({
      icon: 'close',
      message: res.data.msg
    });
  }
})
.catch(err => {
  console.error(err); 
})

const goTo = (path) => { // 跳转作品详情页
  $router.push({
    path
  });
}

// 退出登录
const exitLogin = () => {
  axios.post('/srv/?a=b_logout')
  .then(res => {
    if (res.data.code === 1) {
      $router.replace({
        path: '/business/login'
      });
    } else {
      console.warn(res);
      if (!res.data.show) return false;
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err); 
  })
}
</script>

<style lang="less" scoped>
.item-list {
  padding: 1rem 0; 
  margin: 0 1rem;
}

.exit-btn {
  position: absolute; 
  bottom: 0;
  width: calc(100% - 2rem);
  padding: 1rem;
  background-color: red;
  text-align: center;
  color: white;
}
</style>