<template>
  <div class="me-index-page">
    <div class="header-wrapper">
      <div class="info">
        <van-row>
          <van-col>
            <van-image round width="50" height="50" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              style="padding-right: 1rem;" />
          </van-col>
          <van-col class="text-wrapper" span="18">
            <div>
              <div class="username">瑟日古娜</div>
              <div class="toggle-user" @click="toggleUser">切换儿童</div>
            </div>
            <div class="address">呼和浩特市新城区蒙古族幼儿园</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>25478</p>
          </van-col>
          <van-col span="1" class="divide">|</van-col>
          <van-col span="5" class="un-tap-color">
            <p>粉丝</p>
            <p>45</p>
          </van-col>
          <van-col span="1" class="divide">|</van-col>
          <van-col span="5" @click="getFollow">
            <p class="tap-color">关注</p>
            <p>26</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">28</van-tag></p>
          </van-col>
        </van-row>
      </div>
    </div>

    <div class="van-hairline--bottom sub-handle">
      <div>
        <my-button type="custom" :custom-style="styleObject1" @on-click="goTo('/me/verifyUser')">实名认证</my-button>
      </div>
      <div>
        <my-button type="custom" :custom-style="styleObject2" @on-click="goTo('/me/addUser')">新增儿童</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>
</template>

<script setup>
import MyButton from '@/components/MyButton/index.vue'

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

// 切换用户功能
const toggleUser = () => {
  console.warn('切换儿童');
}
// 跳转相关页面
const goTo = (path) => {
  $router.push({
    path: path
  })
}

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

const itemList = [
  {
    name: '我的捐赠',
    sum: '5',
    to: '/me/donateList'
  },
  {
    name: '我的作品',
    sum: '5',
    to: '/me/videoList'
  },
  {
    name: '我的订阅',
    sum: '5',
    to: '/me/subscribe'
  },
  {
    name: '我的收藏',
    sum: '5',
    to: '/me/collection'
  },
  {
    name: '我的点赞',
    sum: '5',
    to: '/me/like'
  },
  {
    name: '我的留言',
    sum: '2',
    tag: true,
    to: '/me/message'
  },
  {
    name: '@我的',
    sum: '2',
    tag: true,
    to: '/me/callMe'
  },
]

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

onMounted(() => {

})
</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;
      }
    }
    .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>