<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 { ref} from 'vue'
import { useRouter } from 'vue-router'
import axios from '@/utils/axios';
import { Toast } from 'vant';
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;
    // 有空格分割name
    if (myKgInfo.value.name.indexOf(' ') > -1) {
      myKgInfo.value.multi_name = myKgInfo.value.name.split(' ');
    }
    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>
.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>