<template>
  <view>
    <!-- 头部 -->
    <view class="cu-card flex bg-white" v-if="user && user.wxInfo">
      <view class="flex flex-sub align-center padding-xl">
        <view class="round xl cu-avatar portrait bg-white">
          <image class="xl cu-avatar" :src="user.wxInfo.headImgUrl"></image>
        </view>
        <view class="flex-sub padding-left">
          <view class="text-xxl">{{ user.wxInfo.nickname }}</view>
          <!-- <view class="text-df padding-top-xs">{{ user.wxInfo.classes }}</view> -->
        </view>

        <image class="healthy-code" :src="healthCode" @tap="getPreviewImg(healthCode)"></image>
      </view>
    </view>
    <view class="cu-card flex bg-white" v-else>
      <view class="flex flex-sub align-center padding-xl">
        <view class="round xl cu-avatar portrait">
          <image class="xl cu-avatar" :src="userInfo.avatarUrl"></image>
        </view>
        <view class="flex-sub padding-left">
          <view class="text-xxl">{{ userInfo.nickName }}</view>
          <!-- <view class="text-df padding-top-sm">{{ userInfo.classes }}</view> -->
        </view>
      </view>
    </view>
    <!-- 列表 -->
    <view class="bg-white margin-top">
      <view class="cu-list menu margin-lr">
        <view
          class="cu-item"
          hover-class="cc-active"
          @tap="openPage('/pages/basic-info/basic-info')"
        >
          <text class="text-xl">个人信息</text>
          <view class="iconfont icon-right more"></view>
        </view>
        <view class="cu-item" hover-class="cc-active" @tap="openPage('/pages/my-code/my-code')">
          <text class="text-xl">我的健康打卡</text>
          <view class="iconfont icon-right more"></view>
        </view>
        <view class="cu-item" hover-class="cc-active" @tap="openPage('/pages/my-trips/my-trips')">
          <text class="text-xl">我的行程</text>
          <view class="iconfont icon-right more"></view>
        </view>
        <view class="cu-item" hover-class="cc-active" @tap="openPage('/pages/my-signs/my-signs')">
          <text class="text-xl">我的校园打卡</text>
          <view class="iconfont icon-right more"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'Mine',
  data() {
    return {
      userInfo: {
        avatarUrl: '/static/head-portrait.png',
        nickName: '健康码',
        // classes: '计算机19级软工二班',
      },
    };
  },

  computed: mapState('user', ['healthCode', 'user']),

  methods: {
    //预览图片
    getPreviewImg(image) {
      var imgArr = [];
      imgArr.push(image);
      uni.previewImage({
        urls: imgArr,
        current: imgArr[0],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.portrait {
  overflow: hidden;
}

.healthy-code {
  width: 70rpx;
  height: 70rpx;
}

.more {
  font-size: 18px;
  color: $grey;
}
</style>
