<template>
  <div class="me-index-page">
    <div class="header-wrapper">
      <div class="info">
        <van-row>
          <van-col>
            <van-image v-if="userInfo.avatar" @click="handleUser('EDIT')" round width="50" height="50"
              :src="userInfo.avatar" style="padding-right: 1rem;" />
            <van-image v-else @click="handleUser('EDIT')" round width="50" height="50" :src="icon_avatar"
              style="padding-right: 1rem;" />
          </van-col>
          <van-col class="text-wrapper" span="18">
            <div>
              <div class="username">{{ userInfo.name }}</div>
              <div v-if="actions.length" class="toggle-user" @click="show = true">切换儿童</div>
            </div>
            <div class="address">{{ userInfo.kg_name }}</div>
          </van-col>
        </van-row>
      </div>

      <div class="sub-data">
        <van-row>
          <van-col span="5" offset="1" class="un-tap-color">
            <p>获赞</p>
            <p>{{ userInfo.perf_like_num }}</p>
          </van-col>
          <van-col span="1" class="divide">|</van-col>
          <van-col span="5" class="un-tap-color">
            <p>粉丝</p>
            <p>{{ userInfo.fans_num }}</p>
          </van-col>
          <van-col span="1" class="divide">|</van-col>
          <van-col span="5" @click="getFollow">
            <p class="tap-color">关注</p>
            <p>{{ userInfo.follow_num }}</p>
          </van-col>
          <van-col span="1" class="divide">|</van-col>
          <van-col span="5" @click="getUnwatch">
            <p class="tap-color">未看</p>
            <p>
              <van-tag round color="red">{{ userInfo.unplay_num }}</van-tag>
            </p>
          </van-col>
        </van-row>
      </div>
    </div>

    <div class="van-hairline--bottom sub-handle">
      <div>
        <my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject1"
          @on-click="goTo('/me/verifyUser')">实名认证</my-button>
        <my-button v-else type="custom" :custom-style="styleObject3">已认证</my-button>
      </div>
      <div>
        <my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject2"
          @on-click="handleUser('ADD')">新增儿童</my-button>
        <my-button v-else type="custom" :custom-style="styleObject4" @on-click="showNotice = true">新增儿童</my-button>
      </div>
    </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>

  <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />

  <!-- 如果没有实名认证，新增儿童提示弹框 -->
  <notice-overlay :show="showNotice" text="前往认证" @on-submit="onSubmit" @on-close="onClose">
    <div style="color: #333333;">
      <p>您还没有实名认证</p>
      <p>请前往个人中心进行实名认证</p>
    </div>
  </notice-overlay>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { _, mainStore } from '@/utils/generatePackage.js'
import { MyButton, NoticeOverlay } from '@/utils/generateModules.js'
import { icon_avatar } from '@/utils/generateIcons.js'
import { changePerformerAPI, myInfoAPI, myPerformerAPI } from '@/api/C/me.js'
import meRoute from '@/router/routes/modules/me'

const $router = useRouter();

// 删除 keep-alive 缓存
const store = mainStore();
store.changeKeepPages('clear');

// onBeforeRouteLeave(() => {
// 重置位置缓存
// store.changeScrollTopCollection(0);
// store.changeScrollTopLike(0);
// })

const userInfo = ref({});
// 构建我的列表数据结构
const itemList = [];
meRoute.forEach(item => {
  item.meta.key && itemList.push({
    name: item.name,
    key: `${item.meta.key}_num`,
    sum: 0,
    tag: ['comment', 'reply'].includes(item.meta.key),
    to: item.path
  })
});

// 异步获取我的列表数量信息
async function getMySum() {
  const { data } = await myInfoAPI();
  userInfo.value = data;
  _.each(itemList, item => {
    item.sum = userInfo.value[item.key]
  });
}

onMounted(async () => {
  const { data } = await myPerformerAPI();
  actions.value = data;
  getMySum();
});

/********** 切换用户功能 START *************/
const show = ref(false);
let actions = ref([]); // 角色列表容器

const onSelect = async (item) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show.value = false;
  // 切换当前角色
  if (await changePerformerAPI({ perf_id: item.id })) {
    getMySum()
  }
};
/********** 切换用户功能 END *************/

// 跳转相关页面
const goTo = (path) => {
  $router.push({
    path: path,
    query: {
      kg_id: userInfo.value.kg_id,
      kg_name: userInfo.value.kg_name
    }
  })
}

// 未实名认证提示
const showNotice = ref(false)
const onClose = () => { // 关闭提示框回调
  showNotice.value = false;
}
// 跳转个人中心
const onSubmit = () => {
  $router.push({
    path: '/me/verifyUser'
  });
}

// 新增/编辑儿童信息
const handleUser = (type) => {
  if (type === 'ADD') {
    $router.push({
      path: '/me/handleUser',
      query: {
        perf_id: userInfo.value.perf_id,
        kg_id: '',
        kg_name: '',
        type
      }
    })
  } else {
    $router.push({
      path: '/me/handleUser',
      query: {
        avatar: userInfo.value.avatar,
        name: userInfo.value.name,
        perf_id: userInfo.value.perf_id,
        kg_id: userInfo.value.kg_id,
        kg_name: userInfo.value.kg_name,
        type
      }
    })
  }
}

// 自定义按钮颜色样式
const styleObject1 = reactive({
  backgroundColor: '#FFFFFF',
  color: '#713610',
  borderColor: '#713610'
})
const styleObject2 = reactive({
  backgroundColor: '#FFFFFF',
  color: '#0B3A72',
  borderColor: '#0B3A72'
})
const styleObject3 = reactive({
  backgroundColor: '#FFFFFF',
  color: '#FDD347',
  borderColor: '#FDD347'
})
const styleObject4 = reactive({
  backgroundColor: '#FFFFFF',
  color: '#777777',
  borderColor: '#777777'
})

const getFollow = () => {
  $router.push({
    path: '/me/followList'
  })
}
const getUnwatch = () => {
  $router.push({
    path: '/me/unwatchList'
  })
}
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.me-index-page {
  .header-wrapper {
    background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);

    .info {
      padding: 2rem;
      padding-right: 0;

      .text-wrapper {
        line-height: 1.5;

        .username {
          display: inline-block;
          overflow: auto;
          font-size: 1.15rem;
          color: #222222;
        }

        .toggle-user {
          float: right;
          font-size: 0.8rem;
          background-color: white;
          border-radius: 15px;
          padding: 5px 10px;
          color: #713610;
        }
      }

      .address {
        font-size: 0.85rem;
        color: #999999;
        opacity: 0.8;
      }
    }

    .sub-data {
      text-align: center;
      overflow: auto;
      padding-bottom: 1rem;

      .un-tap-color {
        color: #666666;
      }

      .tap-color {
        color: #713610;
      }

      .divide {
        line-height: 2.5;
        color: #999999;
        font-size: 1rem;
      }
    }
  }

  .sub-handle {
    padding: 1rem 0;
    margin: 0 1rem;
    overflow: auto;

    div:first-child {
      width: 48%;
      float: left;
      margin-right: 2%;
    }

    div:last-child {
      width: 48%;
      float: left;
      margin-left: 2%;
    }
  }

  .item-list {
    padding: 1rem 0;
    margin: 0 1rem;
  }
}
</style>