<script>
import StaticConstant from "@/common/StaticConstant";
import ImagesConstant from "@/common/ImagesConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from "@/common/request";

let request = new Request()
export default {
  name: "home",
  components: {},
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      scoreInfo: {
        province: '河南',//省份
        cognitioPolyclinic: '',//科类
        professionalCategory: '',//报考方向
        culturalScore: '',//文化分
        professionalScore: '',//统考分
      },
      zyNum: null,//专业数量
      defaultIcon: ImagesConstant.defaultIcon,//默认图片
      tjlb: {
        kcj: null,//冲刺推荐
        jwt: null,//较稳妥
        kbd: null//可保底
      },
      options: StaticConstant.HomeOptions,
    }
  },
  onShow() {
    let score = uni.getStorageSync('scoreInfo')
    let fillVolunteer = uni.getStorageSync('fillVolunteer')
    if (score !== undefined && score !== null) {
      this.scoreInfo = score
      if (!fillVolunteer || !fillVolunteer.all) {
        this.getRecommendMajorCount()
        fillVolunteer = uni.getStorageSync('fillVolunteer')
      }
    }

    if (fillVolunteer) {
      this.zyNum = fillVolunteer.all
      this.tjlb.kcj = fillVolunteer.kcj
      this.tjlb.jwt = fillVolunteer.jwt
      this.tjlb.kbd = fillVolunteer.kbd
    }
  },
  methods: {
    goto(url) {
      uni.navigateTo({
        url: url
      })
    },
    /*点击 操作菜单*/
    optionItemChange(e) {
      if (this.options && this.options[e.detail.index].url) {
        this.goto(this.options[e.detail.index].url)
      }
    },
    getRecommendMajorCount() {
      request.get(ApiConstant.Major.recommendMajorCount, {}).then(res => {
        if (res.success) {
          let result = res.result
          //将数据存入 缓存
          let fillVolunteer = {
            all: result.allNumber,
            kcj: result.kcj,
            jwt: result.jwt,
            nlq: result.nan,
            kbd: result.kbd
          }
          uni.setStorageSync('fillVolunteer', fillVolunteer)
        }
      }).catch(err => {
      }).finally(() => {
      });
    },

  }
}
</script>

<template>
  <!--  头部-->
  <view class="header" style="background: linear-gradient(to left, rgba(52,145,212,0.83), #3658d0);height: 600rpx">
    <!--顶部地区及年份-->
    <view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
      <view class="white  margin30">{{ scoreInfo.province }}</view>
      <view class="white  margin30">{{ StaticConstant.year }}年填报</view>
    </view>
    <!--推荐专业数量-->
    <div class="tuijian">
      <view class="uni-flex uni-row">
        <view class="dxshn" v-if="zyNum">
          <p class="tnumber">{{ zyNum }}个</p>
          <p class="ttitle">专业适合你</p>
        </view>
        <view class="dxshn" v-else>
          <p class="tnumber">{{ StaticConstant.systemName }}</p>
        </view>
      </view>
      <view class="uni-padding-wrap uni-common-mt topNumberDiv">
        <!--冲刺推荐，稳妥推进，保底推荐-->
        <view class="uni-flex uni-row">
          <view class="flex-item t_item">
            <p class="tnumber" v-if="tjlb.kcj!==undefined">{{ tjlb.kcj}}</p>
            <p class="tnumber" v-else>??</p>
            <p class="ttitle">可冲击</p>
          </view>
          <view class="flex-item t_item">
            <p class="tnumber" v-if="tjlb.jwt!==undefined">{{ tjlb.jwt}}</p>
            <p class="tnumber" v-else>??</p>
            <p class="ttitle">较稳妥</p>
          </view>
          <view class="flex-item t_item">
            <p class="tnumber" v-if="tjlb.kbd!==undefined">{{ tjlb.kbd}}</p>
            <p class="tnumber" v-else>??</p>
            <p class="ttitle">可保底</p>
          </view>
        </view>

        <!--我的成绩-->
        <view class="uni-flex uni-row marginTopBot30 wdcj">
          <view class="flex-item-10 fontsize25" style="text-align: center" v-if="scoreInfo && scoreInfo.province">
            <text class="marginright10">我的成绩：文化:{{ scoreInfo.culturalScore }}分</text>
            <text class="marginright10">专业:{{ scoreInfo.professionalScore }}分</text>
            <text class="marginright10">{{ scoreInfo.cognitioPolyclinic }}</text>
            <text class="marginright10">{{ scoreInfo.professionalCategory }}</text>
          </view>
          <view class="flex-item-10 fontsize25" style="text-align: center" v-else>
            <text class="marginright10">完善信息查看完整推荐</text>
          </view>
        </view>
        <view class="flex mntb blue" style="background-color: white;font-size: 36rpx;border-radius: 50rpx;">
          <view class="flex-item-5" @click="goto('/pages/zyb/fillVolunteer/aiAuto')"
                style="padding:0 28rpx 0 36rpx;line-height: 2.5;text-align: left">
            <text>一键智能填报</text>
          </view>
          <view class="flex-item-5">
            <view style="padding: 0 28rpx;line-height: 2.5;
              z-index: 10;text-align: center;border-radius: 50rpx;background: linear-gradient(rgba(52,145,212,0.83), #3658d0);">
              <text @click="goto('/pages/zyb/fillVolunteer/index')"
                    style="color:white;">模拟填报
              </text>
            </view>
          </view>
        </view>
      </view>
    </div>
  </view>
  <!--内容部分-->
  <view class="body">
    <!--操作菜单-->
    <view class="options">
      <uni-grid :column="4" :highlight="true" :show-border="false" @change="optionItemChange">
        <uni-grid-item v-for="(item, index) in options" :index="index" :key="index">
          <view class="grid-item-box">
            <view style="border-radius: 50%;box-shadow: 0 0 10rpx 5rpx #aaa;width: 100rpx;height: 100rpx;">
              <image :src="item.icon?item.icon:defaultIcon"
                     :style="item.width?'left: 8rpx;top:10rpx;width:'+item.width+';height:'+item.width:'height: 60rpx;width: 60rpx;left: 20rpx;top:20rpx'"
                     style="position: relative;"/>
            </view>
            <text class="text">{{ item.title }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<style scoped lang="scss">
.uni-common-mt {
  margin: 0;
}

/*顶部的推荐院校数量模块*/
.topNumberDiv {
  .tnumber {
    color: white;
    margin: 10px auto;
    width: 30px;
    height: 10px;
    font-weight: 400;
  }

  .ttitle {
    color: #fbd781;
    font-size: 11px;
    font-weight: 500;
  }
}


.flex {
  margin: 30rpx 0;
}

.flex-item {
  width: 33.3%;
  height: 110rpx;
  text-align: center;
}


.tuijian {
  padding: 30rpx 70rpx;
}

/* 大学适合你 */
.dxshn {
  height: 100rpx;
  text-align: center;
  margin: 5px auto;

  .tnumber {
    color: white;
    margin: 10px auto;
    height: 10px;
    font-size: 22px;
    font-weight: 500;
  }

  .ttitle {
    margin: 15px auto;
    color: white;
    font-size: 12px;
    font-weight: 500;
  }
}

/*我的成绩*/
.wdcj {

}

/*模拟填报按钮*/
.mntb {

}

.body {
  padding: 30rpx;
  //操作菜单
  .options {
    border-radius: 10rpx;
    padding: 8rpx;
    background-color: white;
    position: relative;
    bottom: 60rpx;
    min-height: 380rpx;
    margin: 0 auto;
  }
}


/*右边距10rpx*/
.marginright10 {
  margin-right: 10rpx;
}

/*字体大小25rpx*/
.fontsize25 {
  font-size: 25rpx;
  color: white;
}


/*宫格 start*/
.image {
  width: 25px;
  height: 25px;
}

.text {
  font-size: 14px;
}

.example-body {
  /* #ifndef APP-NVUE */
  // display: block;
  /* #endif */
}

.grid-dynamic-box {
  margin-bottom: 15px;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-item-box-row {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-dot {
  position: absolute;
  top: 5px;
  right: 15px;
}

.swiper {
  height: 420px;
}

/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
  .swiper {
    height: 630px;
  }
}

@media screen and (min-width: 1425px) {
  .swiper {
    height: 830px;
  }
}

/* #endif */
/*宫格 end*/
</style>
