<script>
import Request from '@/common/request';
import ImagesConstant from "@/common/ImagesConstant";
import commonTool from "@/common/js/commonTool";

let request = new Request()
export default {
  name: "user-index",
  components: {},
  computed: {
    commonTool() {
      return commonTool
    },
    ImagesConstant() {
      return ImagesConstant
    },
  },
  data() {
    return {
		imId:'Shilo_',
      systemName:'',
      avatar: ImagesConstant.systemIcon,
      userInfo: {},
      vipInfo: {},
      scoreInfo: {},//成绩信息
      volunteerInfo: {},//当前志愿单信息
      itemList: [
        {
          title: '会员卡激活',
          icon:'/static/icons/gif/icons8-cards.gif',
          url: '/pages/zyb/vip/cardamom'
        },
        // #ifdef MP-TOUTIAO
        {
          title: '我的订单',
          icon:'/static/icons/gif/icons8-order.gif',
          url: '/pages/zyb/order/list'
        },
        {
          title: '联系客服',
          type:'im',
          icon:'/static/icons/gif/icons8-customer-service.gif',
        },
        // #endif
        // #ifdef MP-WEIXIN
        {
          title: '联系客服',
          type:'contact',
          icon:'/static/icons/gif/icons8-customer-service.gif',
        },
        {
          title: '专家一对一',
          //icon: '/static/icons/linear/calendar.png',
          icon: '/static/icons/gif/icons8-man.gif',
          url: '/pages/zyb/other/updateLogs'
        },
        {
          title: '商务合作',
          //icon: '/static/icons/linear/quest.png',
          icon: '/static/icons/gif/icons8-cooperate.gif',
          method:'cooperate',
          url: '/pages/zyb/other/commonProblem'
        },
        // #endif


        /*{
          title: '更新快报',
          //icon: '/static/icons/linear/calendar.png',
          icon: '/static/icons/gif/icons8-calendar.gif',
          url: '/pages/zyb/other/updateLogs'
        },*/
        {
          title: '我的收藏',
          //icon: '/static/icons/linear/love.png',
          icon: '/static/icons/gif/icons8-loading-heart.gif',
          url: '/pages/zyb/user/myCollect'
        },
        {
          title: '使用说明',
          //icon: '/static/icons/linear/illustrate.png',
          icon: '/static/icons/gif/detail.gif',
          url: '/pages/zyb/other/useHelp'
        },

       /* {
          title: '问题反馈',
          //icon: '/static/icons/linear/quest.png',
          icon: '/static/icons/gif/icons8-doubt.gif',
          url: '/pages/zyb/other/commonProblem'
        },*/
        {
          title: '常见问题',
          //icon: '/static/icons/linear/quest.png',
          icon: '/static/icons/gif/icons8-doubt.gif',
          url: '/pages/zyb/other/commonProblem'
        },
        {
          title: '设置',
          //icon: '/static/icons/linear/settings.png',
          icon: '/static/icons/gif/icons8-wotuishi-settings.gif',
          url: '/pages/zyb/settings'
        },


      ]
    }
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    if (this.userInfo === null || this.userInfo.id=== undefined) {
      wx.reLaunch({
        url: '/pages/zyb/login',
      })
    }
    this.vipInfo = uni.getStorageSync('vipInfo')
    this.getScore()
  },
  onLoad() {
    this.systemName = commonTool.getSystemName()
    if(this.systemName === '体育志愿宝'){
      this.playerType = '体育考生'
    }
  },
  methods: {
    //获取成绩信息
    getScore() {
      this.scoreInfo = uni.getStorageSync('scoreInfo')
      if (this.scoreInfo) {
        this.volunteerInfo = uni.getStorageSync('volunteer')
      }
    },
    gotoEditScore() {
      console.log('前往修改成绩页面')
      this.goto('/pages/zyb/score/edit')
    },
    switchFillVolunteer() {
      this.goto('/pages/zyb/fillVolunteer/my')
    },
    /*前往开通vip*/
    gotoOpenVip() {
      this.goto('/pages/zyb/vip/index')
    },
    /*商务合作弹框事件*/
    cooperate(){
      console.log('商务合作')
      this.$refs.popup2.open("center")
    },
    cooperateClose(){
      this.$refs.popup2.close()
    },
    goto(e) {
      uni.navigateTo({
        url: e,
        nimationType: 'pop-in',
        animationDuration: 2000
      })
    },
    previewImage(e){
      console.log('e', e);
      uni.previewImage({
        // 需要预览的图片链接列表
        urls: [],
        // 为当前显示图片的链接/索引值
        current: ImagesConstant.customerServiceQrCode,
        // 图片指示器样式
        indicator:'default',
        // 是否可循环预览
        loop:false,
        // 长按图片显示操作菜单，如不填默认为保存相册
        // longPressActions:{
        // 	itemList:[this.l('发送给朋友'),this.l]
        // },
        success: res => {
          console.log('res', res);
        },
        fail: err => {
          console.log('err', err);
        }
      });
    },
	imCallback(e) {
	    console.log("跳转IM客服成功", e.detail);
	},
	onimError(e) {
	    console.log("拉起IM客服失败", e.detail);
	},
  }
}	
</script>

<template>
  <uni-popup ref="popup2" background-color="#fff" class="radius15">
    <view class="popup-content radius15" style="padding: 30rpx 30rpx">
      <view class="font-size-mini4 font-weight-b" style="text-align: center">添加老师微信</view>
      <image @click="previewImage" :show-menu-by-longpress="true" :src="ImagesConstant.customerServiceQrCode" style="width: 600rpx;height: 800rpx"/>
      <view class="flexWrap marginTopBot20 margin-top-20"><text class="text">联系人：周老师</text></view>
      <view class="flexWrap marginTopBot20"><text class="text">电话：15090658223(微信同号)</text></view>
      <view class="font-size-mini4 font-weight-b margin-top-20 margin-top-20" @click="cooperateClose" style="text-align: center">知道了</view>
    </view>
  </uni-popup>
  <!-- 普通弹窗 -->
  <uni-popup ref="popup" background-color="#fff" class="radius15">
    <view class="popup-content radius15" style="padding: 30rpx 50rpx">
      <view class="font-size-mini4 font-weight-b" style="text-align: center">商务合作</view>
      <view class="flexWrap marginTopBot20 margin-top-20"><text class="text">联系人：周老师</text></view>
      <view class="flexWrap marginTopBot20"><text class="text">电话：15090658223(微信同号)</text></view>
      <view class="font-size-mini4 font-weight-b margin-top-20 margin-top-20" @click="cooperateClose" style="text-align: center">知道了</view>
    </view>
  </uni-popup>
  <!--头部-->
  <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 font-weight-600">
          <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">/2024</text>
        </view>
      </view>
      <!--按钮-->
      <view class="flex-item2" style="padding-top: 60rpx;">
        <image class="arrow-right" :src="ImagesConstant.keyboard.arrowRight"/>
      </view>
    </view>
    <!--开通vip提示-->
    <view class="uni-flex flex white" style="margin-top: 30rpx">
      <view class="flex-item-10 vipBackground" style="height: 50rpx;padding: 30rpx"
            v-if="vipInfo && vipInfo.vipLevel>0">
        <text>
          {{ vipInfo.skuName || 'VIP' }}到期时间：{{ commonTool.dateFormatYYYYMMDD(vipInfo.validTime) }}
        </text>
        <text class="float-right radius60" style="border: 1rpx solid white;padding: 0 20rpx" @click="gotoOpenVip">
          查看更多
        </text>
      </view>
      <view class="flex-item-10 vipBackground" style="height: 50rpx;line-height: 50rpx;padding: 30rpx;"
            v-if="(!vipInfo) || !vipInfo.vipLevel || vipInfo.vipLevel===0">
        <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 trow1-center">
        <view class="flexWrap margin-left-30">
          <view class="flex-item-10">
            <text class="margin-right-10">文化:{{ this.scoreInfo.culturalScore }}分</text>
            <text class="margin-right-10" v-if="scoreInfo && scoreInfo.professionalCategory!=='表演类'">{{scoreInfo.professionalCategory==='音乐类'?'主项':'统考'}}:{{ this.scoreInfo.professionalScore }}分</text>
            <br v-if="scoreInfo && scoreInfo.professionalCategory!=='表演类'"/>
            <text v-if="scoreInfo && scoreInfo.yybysy">音表声乐:</text>
            <text class="margin-right-10" v-if="scoreInfo && scoreInfo.yybysy">{{ scoreInfo && scoreInfo.yybysy }}分</text>
            <text v-if="scoreInfo && scoreInfo.yybyqy">音表器乐:</text>
            <text class="margin-right-10" v-if="scoreInfo && scoreInfo.yybyqy">{{ scoreInfo && scoreInfo.yybyqy }}分</text>
            <text v-if="scoreInfo && scoreInfo.yyjy">音乐教育:</text>
            <text class="margin-right-10" v-if="scoreInfo && scoreInfo.yyjy">{{ scoreInfo && scoreInfo.yyjy }}分</text>
            <!--表演类-->
            <text v-if="scoreInfo && scoreInfo.fzby">服装表演:</text>
            <text class="margin-right-10" v-if="scoreInfo && scoreInfo.fzby">{{ scoreInfo && scoreInfo.fzby }}分</text>
            <text v-if="scoreInfo && scoreInfo.xjysdy">影视导演:</text>
            <text class="margin-right-10" v-if="scoreInfo && scoreInfo.xjysdy">{{ scoreInfo && scoreInfo.xjysdy }}分</text>
            <text v-if="scoreInfo && scoreInfo.xjysby">影视表演:</text>
            <text v-if="scoreInfo && scoreInfo.xjysby">{{ scoreInfo && scoreInfo.xjysby }}分</text>
          </view>
        </view>
        </view>
        <view class="flexWrap margin-left-30"></view>

      <view class="flex-item-2" @click="gotoEditScore()">
        <view class="" style="margin-top: 20rpx">
          <view style="width: 100rpx;text-align: center;position: relative;left: 20rpx">
            <image :src="ImagesConstant.edit2" class="icon40"/>
          </view>
        </view>
      </view>

    </view>
    <!--我的志愿-->
	<button
	  open-type="im"
	  data-im-id="Shilo_"
	  bindim="imCallback"
	  binderror="onimError"
	>
	  跳转 IM
	</button>
	<!-- <button class='contact-btn' open-type="im" bindim="imCallback" binderror="onimError" data-im-id="Shilo_">联系客服</button> -->
	
    <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" v-if="scoreInfo && volunteerInfo">
            <text style="margin:0 30rpx">{{ volunteerInfo.volunteerName || '' }}</text>
          </view>
          <view class="flex" style="margin-left:30rpx;color:#c1c4cc">
            <!--            <text>{{ scoreInfo && scoreInfo.professionalScore || '&#45;&#45;' }}分&nbsp;&nbsp;/</text>-->
            <text>{{ scoreInfo && scoreInfo.province || '--' }}&nbsp;/</text>
            <text>&nbsp;{{ scoreInfo && scoreInfo.cognitioPolyclinic ==='文科'?'历史组':'物理组' || '--' }}&nbsp;/</text>
            <text>&nbsp;{{ scoreInfo && scoreInfo.professionalCategory || '--' }}</text>
          </view>
        </view>
      </view>
      <view class="flex-item-2" @click="switchFillVolunteer">
        <view style="padding: 15rpx 0 15rpx 65rpx">
          <image src="/static/icons/icons8-menu.png" class="icon32"/>
        </view>
      </view>
    </view>
    <!--剩余选项-->
    <view class="trow1">
      <view class="uni-flex flex" v-for="(item,index) in itemList" :key="index">
        <!--联系客服-->
        <view class="flex-item-10" v-if="item.type==='contact' || item.type ==='im'">
			{{item.type}}
          <view class="uni-flex flex trow1-child">
            <button class='contact-btn' :open-type="item.type" data-im-id="Shilo_">aa</button>
            <view class="flex-item-1">
              <image :src="item.icon" class="icon40"/>
            </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 class="flex-item-10" v-else @click="item.method==='cooperate'?cooperate() : 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>{{ systemName }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.header {
  background: repeating-linear-gradient(#dcdaf7, #f7f7f7, #e6e4e4);
  background: -ms-repeating-linear-gradient(#dcdaf7, #f7f7f7, #e6e4e4);
  background: -webkit-repeating-linear-gradient(#dcdaf7, #f7f7f7, #e6e4e4);
  background: -moz-repeating-linear-gradient(#dcdaf7, #f7f7f7, #e6e4e4);
  /*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: black;
  }

  /*开通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: 20rpx;

    .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;
    }
  }
}


//覆盖联系客服按钮原生样式
:deep(.contact-btn) {
  display: inline-block;
  position: absolute;
  width: 80%;
  background: salmon;
  // opacity: 0;
  // border-radius: 0;
}

</style>
