<template>
  <view class="container">
    <unitv-page id="minePage" ref="minePage" class="minePage" :show="true">
      <app-header />
      <view class="content">
        <view class="info">
          <view class="user_info">
            <view class="avatar">
              <image src="/static/avatar.png" />
            </view>
            <view class="username">呀哈哈</view>
          </view>
          <view class="statistics">
            <view class="item">
              <view class="title">累计开班数量</view>
              <view>
                <text class="value">123</text>
                <text class="label">个</text>
              </view>
            </view>
            <view class="item">
              <view class="title">累计学员数量</view>
              <view>
                <text class="value">456</text>
                <text class="label">个</text>
              </view>
            </view>
            <view class="item">
              <view class="title">累计培训课时</view>
              <view>
                <text class="value">789</text>
                <text class="label">个</text>
              </view>
            </view>
          </view>
        </view>
        <unitv-zone
          id="mine_first_zone"
          class="mine_first_zone"
          :values="[0, 1, 2, 3]"
          :column="4"
          auto-fous
          :item="0"
        >
          <unitv-item
            :item="0"
            class="item"
            @click="fnNavigate('/pages/mine/curriculum/index')"
          >
            <view class="text">我的课程</view>
          </unitv-item>
          <unitv-item :item="1" class="item">
            <view class="text">学员档案</view>
          </unitv-item>
          <unitv-item :item="2" class="item">
            <view class="text">效果评估报告</view>
          </unitv-item>
          <unitv-item :item="3" class="item">
            <view class="text">定制课申请</view>
          </unitv-item>
          <unitv-item :item="4" class="item">
            <view class="text">问题反馈</view>
          </unitv-item>
        </unitv-zone>
      </view>
    </unitv-page>
  </view>
</template>

<script>
export default {
  onShow() {
    if (this.$refs.minePage) {
      this.$refs.minePage.showPage();
    }
  },
  methods: {
    fnNavigate(url) {
      uni.navigateTo({ url });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  margin-top: 40rpx;

  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .user_info {
      display: flex;

      .avatar {
        border-radius: 50%;

        image {
          width: 71rpx;
          height: 71rpx;
          border-radius: 50%;
        }
      }

      .username {
        padding-top: 20rpx;
        padding-left: 17rpx;
        font-size: 20rpx;
        font-weight: bold;
      }
    }

    .statistics {
      display: flex;

      .item {
        background-image: url("/static/statistics_bg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 127rpx;
        height: 66rpx;
        padding: 13rpx 14rpx;
        margin-left: 9rpx;

        &:first-child {
          margin-left: 0;
        }

        .title {
          font-size: 11rpx;
          padding-bottom: 5rpx;
        }

        .value {
          font-size: 16rpx;
          font-weight: bold;
        }

        .label {
          padding-left: 5rpx;
          font-size: 9rpx;
        }
      }
    }
  }

  .mine_first_zone {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;

    .item {
      padding: 15rpx 11rpx;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 131rpx;
      height: 65rpx;
      border: 1rpx solid transparent;
      border-radius: 4rpx;

      @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
          background-image: url("/static/mine_zone#{$i}.png");
        }
      }

      .text {
        font-size: 14rpx;
      }

      &.hover {
        border: 1rpx solid rgba(0, 180, 255, 0.79);
      }
    }
  }
}
</style>
