<script>
import Request from '@/common/request'
import ApiConstant from "@/common/ApiConstant";
import StaticConstant from "@/common/StaticConstant";
import ImagesConstant from "@/common/ImagesConstant";
import vip from "@/pages/zyb/vip/index.vue";

let request = new Request()
export default {
  name: "user-index",
  computed: {
    ImagesConstant() {
      return ImagesConstant
    },
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      avatar:'http://files.yitisheng.vip/yitisheng.png',
      volunteerName:'加载中',
      userInfo:{
        vipFlag: false
      },
      scoreInfo:{
        id:'',
        province: '',//省份
        cognitioPolyclinic: '',//科类
        professionalCategory: '',//报考方向
        culturalScore: '',//文化分
        professionalScore: '',//统考分
        chineseScore:'',
        englishScore:''
      },
      itemList: [
        {
          title: '更新快报',
          icon: '/static/icons/linear/calendar.png',
          url: '/pages/zyb/other/updateLogs'
        },
        {
          title: '我的收藏',
          icon: '/static/icons/linear/love.png',
          url: '/pages/zyb/user/myCollect'
        },
        {
          title: '使用说明',
          icon: '/static/icons/linear/illustrate.png',
          url: '/pages/zyb/other/useHelp'
        },
        {
          title: '常见问题',
          icon: '/static/icons/linear/quest.png',
          url: '/pages/zyb/other/commonProblem'
        },
        {
          title: '设置',
          icon: '/static/icons/linear/settings.png',
          url: '/pages/zyb/settings'
        },


      ]
    }
  },
  onShow(){
    this.userInfo = uni.getStorageSync('userInfo')
    if (this.userInfo === null || this.userInfo.phone === null || this.userInfo.phone === undefined || this.userInfo.phone === '') {
      wx.reLaunch({
        url: '/pages/zyb/login',
      })
    }
    this.getScore()
  },
  onLoad() {

  },
  methods: {
    //成绩信息
    getScore(){
      request.get(ApiConstant.Volunteer.volunteerInfo,{}).then(r => {
        console.log(r)
        if (r.success) {
          this.scoreInfo = r.result.userScoreInfo
          this.volunteerName = r.result.volunteerName
          try {
            uni.setStorageSync('scoreInfo',this.scoreInfo)
          } catch (e) {
            // error
            console.log('setScoreInfoError ',e)
          }
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    gotoEditScore() {
      console.log('前往修改成绩页面')
      this.goto('/pages/zyb/score/edit')
    },
    switchFillVolunteer(){
      uni.switchTab({
        url:'/pages/zyb/fillVolunteer/my'
      })
    },
    /*前往开通vip*/
    gotoOpenVip(){
      this.goto('/pages/zyb/vip/index')
    },
    goto(e) {
      uni.navigateTo({
        url: e
      })
    },
  }
}
</script>

<template>
  <!--头部-->
  <view class="header" style="z-index: 1">
    <view class="uni-flex flex" style="padding: 30rpx 30rpx 0 30rpx" @click="goto('/pages/zyb/user/detail')">
      <!--头像-->
      <view class="flex-item2 t1">
        <image class="avatar" :src="avatar"/>
      </view>
      <!--手机号-->
      <view class="flex-item-7 t2">
        <view class="flex">
          <text style="line-height: 50rpx">{{userInfo.realname}}</text>
        </view>
        <view class="flex">
          <text style="line-height: 50rpx">{{scoreInfo.province}}</text>
          <text style="line-height: 50rpx;font-size: 24rpx">/2023</text>
        </view>
      </view>
      <!--按钮-->
      <view class="flex-item2" style="padding-top: 60rpx;">
        <image class="arrow-right" :src="ImagesConstant.keyboard.arrowRightWhite"/>
      </view>
    </view>
    <!--开通vip提示-->
    <view class="uni-flex flex" style="margin-top: 30rpx">
      <view class="flex-item-10 vipBackground" style="height: 50rpx;padding: 30rpx" v-if="userInfo.vipFlag">
        <text style="color:white">VIP到期时间：2024-08-31</text>
      </view>
      <view class="flex-item-10 vipBackground" style="height: 50rpx;line-height: 50rpx;padding: 30rpx;color:white" v-else>
        <text>升级为VIP, 准确查大学录取率</text>
        <text class="float-right radius60" style="border: 1rpx solid white;padding: 0 20rpx" @click="gotoOpenVip">开通VIP</text>
      </view>
    </view>
  </view>
  <view class="body" style="z-index: 2">
    <!--我的成绩-->
    <view class="uni-flex flex trow1">
      <view class="flex-item-1">
        <text style="font-size: 24rpx">我的成绩</text>
      </view>
      <view class="flex-item-7">
        <view class="trow1-center"
              style="line-height: 60rpx;">
          <text style="margin:0 30rpx">文化分:{{this.scoreInfo.culturalScore}}分</text>
          <text style="margin-right: 30rpx">专业分:{{this.scoreInfo.professionalScore}}分</text>
        </view>
      </view>

      <view class="flex-item-2">
        <view class="" style="margin-top: 20rpx">
          <view @click="gotoEditScore()"
                style="border:3rpx solid #4975fd;border-radius: 20rpx; width: 100rpx;text-align: center;cursor: pointer">
            <text style="color:#4975fd;">修改</text>
          </view>
        </view>
      </view>

    </view>
    <!--我的志愿-->
    <view class="uni-flex flex trow1">
      <view class="flex-item-1">
        <text style="font-size: 24rpx">我的志愿</text>
      </view>
      <view class="flex-item-7">
        <view class="trow1-center" style="">
          <view class="flex">
            <text style="margin:0 30rpx">{{volunteerName}}</text>
          </view>
          <view class="flex" style="margin-left:30rpx;color:#c1c4cc">
            <text>{{scoreInfo.professionalScore}}分&nbsp;&nbsp;/</text>
            <text>&nbsp;{{ scoreInfo.province }}&nbsp;/</text>
            <text>&nbsp;{{scoreInfo.professionalCategory}}</text>
          </view>
        </view>
      </view>
      <view class="flex-item-2">
        <view style="width: 65rpx;height: 65rpx;text-align: center; margin-left: 10rpx;
        background: linear-gradient(131deg, rgb(18, 117, 236) 0%, rgb(122, 182, 249) 100%);
        border-radius: 10rpx;padding: 5rpx 10rpx 12rpx 10rpx">
          <text @click="switchFillVolunteer" style="font-size: 24rpx;letter-spacing:2rpx;line-height: 1rpx;color: white">查看全部</text>
        </view>
      </view>
    </view>
    <!--剩余选项-->
    <view class="trow1">
      <view class="uni-flex flex" v-for="(item,index) in itemList" :key="index">
        <view class="flex-item-10" @click="goto(item.url)">
          <view class="" :class="index===itemList.length-1?'uni-flex flex trow1-child-last':'uni-flex flex trow1-child'">
            <view class="flex-item-1">
              <image :src="item.icon" style="width: 40rpx;height: 40rpx"/>
            </view>
            <view class="flex-item-8">
              <text>{{ item.title }}</text>
            </view>
            <view class="flex-item-1">
              <image :src="ImagesConstant.keyboard.arrowRight" style="width: 40rpx;height: 40rpx"/>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!---->
    <view class="uni-flex flex">
      <view class="flex-item-10" style="text-align: center;">
        <text>{{StaticConstant.systemName}}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.header {
  background: linear-gradient(131deg, rgb(18, 117, 236) 0%, rgb(122, 182, 249) 100%);
  height: 340rpx;
  /*头像*/
  .avatar {
    border-radius: 50%;
    width: 150rpx;
    height: 148rpx;
  }

  .arrow-right {
    width: 70rpx;
    height: 70rpx;
    position: absolute;
    right: 8rpx;
  }

  .t1 {
    padding: 20rpx 0 0 0;
  }

  .t2 {
    padding: 40rpx 20rpx 0 20rpx;
    font-weight: 500;
    color: white;
  }

  /*开通vip框*/
  .vipBackground {
    background-color: #e5620f;
    border-radius: 40rpx 40rpx 0 0;
  }
}

.body {
  background-color: #f4f5f7;
  min-height: 880rpx;
  padding: 30rpx;
  /*单行*/
  .trow1 {
    background-color: #ffffff;
    border-radius: 15rpx;
    padding: 20rpx 30rpx;
    margin-bottom: 30rpx;

    .trow1-center {
      font-size: 24rpx;
      margin: 10rpx 0 0 20rpx;
      border-left: 5rpx solid #f1b481;
    }

    .trow1-child {
      margin-top: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #f8f8f8;
    }

    .trow1-child-last {
      margin-top: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: none;
    }
  }
}
</style>
