<template>
  <div class="my">
    <div class="my-header">
      <div class="tools">
        <ul class="tools-list">
          <li class="tools-item" @click="$router.push({ name: 'settings' })">
            <img src="~@/assets/img/my_settings.png" width="20" />
          </li>
          <li class="tools-item" @click="$router.push({ name: 'message' })">
            <img src="~@/assets/img/my_message.png" width="20" />
          </li>
        </ul>
      </div>
      <div class="user">
        <div class="user-avatar">
          <img :src="user.avatar | avatar" />
        </div>
        <div class="user-content">
          <div class="user-content__name">{{ user.personal_name }}</div>
          <div class="user-content__info">{{ user.class_name }}</div>
          <div class="user-content__info">紫荆花：{{ user.coin_num }} <span @click="show = true">提现</span></div>
        </div>
        <!-- <van-icon name="arrow" class="arrow-right"/> -->
      </div>
      <div class="user-aside">
        <dl @click="$router.push({ name: 'myGroup' })">
          <dt>{{ detail.org_stu_total }}</dt>
          <dd>我的组织</dd>
        </dl>
        <dl @click="$router.push({ name: 'myActivity' })">
          <dt>{{ detail.act_stu_total }}</dt>
          <dd>我的活动</dd>
        </dl>
        <!-- <dl @click="$router.push({ name: 'myApprove' })">
        <dt>
          {{ detail.act_check_total }}
          <span class="badge" v-if="hasBadge"></span>
        </dt>
        <dd>审批</dd>
      </dl> -->
      </div>
    </div>
    <ul class="my-cell-list">
      <li @click="handleTips">
        <img src="@/assets/img/my_icon_01.png" /><span>我要缴费</span><van-icon name="arrow" />
      </li>
      <li @click="handleTips">
        <img src="@/assets/img/my_icon_02.png" /><span>我要捐赠</span><van-icon name="arrow" />
      </li>
      <li @click="$router.push('/recommend')">
        <img src="@/assets/img/my_icon_03.png" /><span>推荐学生</span><van-icon name="arrow" />
      </li>
      <li @click="handleTips">
        <img src="@/assets/img/my_icon_04.png" /><span>我的建议</span><van-icon name="arrow" />
      </li>
    </ul>
    <!-- <van-tabs v-model="tabActive" class="my-tab" :ellipsis="false">
      <van-tab name="0">
        <template #title>
          <div class="name">我的组织</div>
          <div class="num">{{ detail.org_stu_total }}</div>
        </template>
        <my-group-list></my-group-list>
      </van-tab>
      <van-tab name="1">
        <template #title>
          <div class="name">我的活动</div>
          <div class="num">{{ detail.act_stu_total }}</div>
        </template>
        <my-activity-list></my-activity-list>
      </van-tab>
      <van-tab title="我的审批" name="2">
        <template #title
          >我的审批
          <span class="badge" style="top:-10px;" v-if="hasBadge"></span>
        </template>
        <my-approve-list></my-approve-list>
      </van-tab>
    </van-tabs> -->
    <tab-bar></tab-bar>
    <van-dialog v-model="show" :showConfirmButton="false" class="dialog">
      <div class="dialog-hd">
        <h4 class="dialog-hd__title">提示</h4>
        <van-icon name="cross" @click="show = false" />
      </div>
      <div class="dialog-bd">
        <!-- <p>温馨提示：</p> -->
        <!-- <p>账户余额达到<span>1000</span>朵紫荆花可以申请提现</p> -->
        <p>请联系校友办<a href="tel:01062793389">010-62793389</a></p>
      </div>
      <div class="dialog-ft">
        <van-button type="primary" @click="show = false">确定</van-button>
        <van-button type="default" @click="show = false">取消</van-button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
// components
import TabBar from '@/components/TabBar'
// import MyGroupList from '@/components/MyGroupList'
// import MyActivityList from '@/components/MyActivityList'
import * as api from '@/api'

export default {
  name: 'MyIndex',
  // components: { TabBar, MyGroupList, MyActivityList },
  components: { TabBar },
  data() {
    return {
      tabActive: '0',
      detail: {},
      show: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      depp: true,
      handler(route) {
        this.tabActive = route.query.tab || '0'
      }
    }
  },
  computed: {
    user() {
      return this.detail.user || {}
    },
    hasBadge() {
      return !!parseInt(this.detail.act_uncheck_total)
    }
  },
  methods: {
    onTabClick(name) {
      this.$router.push({ query: { tab: name } })
    },
    // 获取我的详情
    getDetail() {
      api.getMy().then(response => {
        this.detail = response
      })
    },
    handleTips() {
      this.$toast('暂未开放，敬请期待')
    }
  },
  beforeMount() {
    this.getDetail()
  }
}
</script>

<style lang="scss">
.my-header {
  padding: 0 20px;
  height: 190px;
  background: url('~@/assets/img/my_bg.png') no-repeat center top;
  background-size: cover;
}
.tools-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0;
}
.tools-item {
  margin-left: 20px;
}
.user {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.user-avatar {
  width: 60px;
  height: 60px;
  background-color: #ccc;
  border-radius: 50%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.user-content {
  display: flex;
  height: 60px;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  color: #fff;
  line-height: 1;
}
.user-content__name {
  font-size: 15px;
}
.user-content__info {
  margin-top: 6px;
  font-size: 12px;
  span {
    margin-left: 30px;
    font-weight: bold;
  }
}
.user-aside {
  display: flex;
  dl {
    flex: 1;
    text-align: center;
    margin-left: 10px;
  }
  dt {
    font-size: 17px;
    color: #fff;
  }
  dd {
    color: #fff;
  }
  .badge {
    top: -15px;
  }
}
.my-tab {
  margin-top: -50px;
  .van-tabs__nav {
    background-color: transparent;
  }
  &.van-tabs--line .van-tabs__wrap {
    height: 50px;
  }
  .van-tabs__wrap--scrollable .van-tabs__nav--complete {
    padding: 0;
  }
  .van-tabs__line {
    display: none;
  }
  .van-tab {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #eaeef0;
  }
  .van-tab--active {
    background-color: #fff;
  }
  .name {
    font-size: 12px;
    color: #707070;
    text-align: center;
  }
  .num {
    font-size: 24px;
    color: #313131;
    text-align: center;
  }
}
.my .list {
  padding: 40px 0;
}
.badge {
  position: relative;
  display: inline-block;
  width: 4px;
  height: 4px;
  background: rgba(255, 103, 103, 1);
  border-radius: 50%;
}
.arrow-right {
  font-size: 0.24rem;
  color: #fff;
}
.my-cell-list {
  padding: 20px 0;
  li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 15px 16px 25px;
    color: #555;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 50px;
      border-bottom: 1px solid #ededed;
      transform: scaleY(0.5);
    }
  }
  img {
    width: 15px;
    margin-right: 10px;
  }
  span {
    flex: 1;
  }
}
.dialog {
  border-radius: 6px;
}
.dialog-hd {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  color: #fff;
  background-color: #ad0440;
}
.dialog-hd__title {
  flex: 1;
  font-size: 16px;
  font-weight: normal;
}
.dialog-bd {
  padding: 20px 40px;
  p {
    margin: 5px 0;
    color: #5c5c5c;
    line-height: 1.5;
  }
  span {
    color: #ad0440;
  }
}
.dialog-ft {
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #dedede;
  .van-button {
    height: 30px;
    margin: 0 10px;
    border-radius: 6px;
  }
  .van-button--primary {
    background-color: #ad0440;
    border-color: #ad0440;
  }
}
</style>
