<template>
  <div class="top-content">
    <van-image round width="4rem" height="4rem" :src="myKgInfo.logo ? myKgInfo.logo : icon_logo" />
    <div v-if="myKgInfo.multi_name">
      <p class="title">{{ myKgInfo.multi_name[0] }}<br />{{ myKgInfo.multi_name[1] }}</p>
    </div>
    <p v-else class="title">{{ 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 class="exit-btn" @click="exitLogin">退出登录</div>
  <shortcut-fixed :type="USER_ROLE.BUSINESS" :item="['home']" />
</template>

<script setup>
import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
import { icon_logo } from '@/utils/generateIcons';
import { USER_ROLE } from '@/constant'
import { onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import { myKgAPI } from '@/api/B/kg'
import { bLogoutAPI } from '@/api/B/login'

const $router = useRouter();

const myKgInfo = ref({});
let itemList = ref([]);

onMounted(async () => {
  const { data } = await myKgAPI();
  myKgInfo.value = data;
  // 有空格分割name
  if (myKgInfo.value.name.indexOf(' ') > -1) {
    myKgInfo.value.multi_name = myKgInfo.value.name.split(' ');
  }
  itemList.value = [
    {
      name: '幼儿园上传视频',
      sum: data.mission_num,
      to: '/business/myVideo'
    },
    {
      name: '家长上传视频',
      sum: data.prod_num,
      tag: true,
      to: '/business/auditVideo'
    },
  ]
})

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

// 退出登录
const exitLogin = async () => {
  const { code } = await bLogoutAPI()
  if (code === 1) {
    $router.replace({
      path: '/business/login'
    });
  }
}
</script>

<style lang="less" scoped>
.top-content {
  // background-image: url('@images/bg@2x.png');
  background-image: url('http://gyzs.onwall.cn/bg%402x.png');
  background-size: cover;
  padding: 1rem;
  text-align: center;
  .title {
    margin-top: 1rem;
    font-size: 1.05rem;
    font-weight: bold;
  }
}
.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>