<template>
  <view class="body-background">
    <image class="img" mode="widthFix" :src="staticImage.bodyBackground"/>
  </view>

  <view class="app-wallpaper">
    <u-row :custom-style="{padding:'26rpx'}">
      <u-col :span="12">
        <view class="user-container row">
          <view class="user-avatar">
            <button open-type="chooseAvatar" @chooseavatar="uploadAvatar" class="avatarBtn" style="background:transparent;">
              <u-avatar :src="userInfo.avatar" size="160" :custom-style="{border:'4rpx solid #020B18'}"></u-avatar>
            </button>
          </view>
          <view class="user-content col " :class="{name_center:(!(userInfo?.fxx?.number))}">
            <view class="user-nickname-group row">
              <view class="user-nickname" v-if="userInfo">
                {{userInfo.nickname}}
              </view>
              <view class="user-nickname" @click="navTo('/pages/Login/index')" v-else>
                  登录
              </view>
              <view class="user-edit" @click="navTo('/pages/User/edit',true)" v-if="userInfo">
                编辑资料
              </view>
            </view>
            <view class="user-icon-group row" v-if="userInfo?.fxx?.number">
              <u-image :src="staticImage.userFxx" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
              <view class="user-icon-title">
                丰行侠
              </view>
              <u-rate
                  readonly
                  :count="userInfo.fxx.rank"
                  v-model="userInfo.fxx.rank"
                  size="30"
                  activeColor="#FF9545"
              ></u-rate>
            </view>

            <view class="user-id row" v-if="userInfo?.fxx?.number">
              <view class="user-id-content">
                专属ID：{{ userInfo.fxx.number }}
              </view>
              <u-text prefix-icon="file-text"
                      text="复制"
                      @click="copyId(userInfo.fxx.number)"
                      size="28"
                      icon-style="font-size:28rpx"
                      color="#AA4900"></u-text>
            </view>
          </view>

        </view>
      </u-col>
    </u-row>
    <view class="user-card border-box" :style="{backgroundImage:'url('+staticImage.userCard+')'}">
      <view class="user-card-content-container border-box">
        <view class="card-container">
          <view class="card-title">我的暖新币</view>
          <view class="card-desc">暖新币余额</view>
          <view class="card-price"><u-text mode="price" size="72" color="#fff" :text="userInfo.coin_number"></u-text></view>
          <view class="card-ext row">累计
            <u-text mode="price" size="28" color="#fff" :text="userInfo.get_coin_number"></u-text>
            &nbsp;&nbsp;
            |&nbsp;&nbsp; 已兑换
            <u-text mode="price" size="28" color="#fff" :text="(userInfo.get_coin_number - userInfo.coin_number)"></u-text>
          </view>
          <view class="card-hr"></view>
          <view class="card-btn-group row">
            <view class="card-btn col" @click="navTo('/pages/Cron/detail',true)">暖新币明细</view>
            <view class="card-hhr"></view>
            <view class="card-btn col" @click="navTo('/pages/Cron/rule')">兑换制度</view>
          </view>
        </view>
      </view>
    </view>
    <u-cell-group :border="false" :custom-style="{marginBottom:'100rpx'}">
      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的兑换订单"
          @click="navTo('/pages/User/order',true)"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userOrder" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的活动报名"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userActivity" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的留言"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userMessage" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的线索"
          @click="navTo('/pages/Line/user',true)"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userLine" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="地址管理"
          @click="navTo('/pages/Address/index',true)"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userAddr" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的关注"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userFollow" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

    </u-cell-group>
    <u-cell-group :border="false">
      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="党员报到码"
          @click="navTo('/pages/Report/qrcode')"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userQrcode" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="意见箱/意见栏"
          @click="navTo('/pages/Feed/index')"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userFeed" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>
      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="街道联系方式"
          @click="navTo('/pages/Street/index')"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userPhone" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

    </u-cell-group>
    <view class="button" style="margin:30rpx 0;padding:26rpx;" v-if="userInfo">
      <u-button
          :plain="true"
          type="warning"
          size="large"
          text="退出登录"
          shape="circle"
          @click="logout()"></u-button>
    </view>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import HeaderNav from '@/components/HeaderNav/Index.vue';
import FooterNav from '@/components/FooterNav/Index.vue';
import RightNav from '@/components/RightNav/Index.vue';
import api from '@/utils/functions.js';
import {appletLogin, avatarUpload} from "@/api/user";

export default {
  components: {
    HeaderNav,
    FooterNav,
    RightNav
  },
  data() {
    return {
      title: 'Hello',
      loading: true,
      staticImage: {
        userOrder: imghost + '/user-order.png',
        userActivity: imghost + '/user-activity.png',
        userMessage: imghost + '/user-message.png',
        userLine: imghost + '/user-line.png',
        userAddr: imghost + '/user-addr.png',
        userFollow: imghost + '/user-follow.png',
        userQrcode: imghost + '/user-qrcode.png',
        userFeed: imghost + '/user-feed.png',
        userPhone: imghost + '/user-phone.png',
        bodyBackground: imghost + '/user-bg.png',
        userFxx: imghost + '/user-fxx.png',
        userCard: imghost + '/user-card.png',
      },
      starCount: 10,
      starValue: 10,
      user: {
        avatar: imghost + '/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685
      },
      isTop: false,
      pagePadding: 100,
      is_login:false,
      userInfo: {},
      userExtends: {},
    }
  },
  onLoad() {

  },
  onReady() {

  },
  mounted() {
    this.userInfo = uni.getStorageSync('user');
    if(this.userInfo){
      console.log('true')
      this.is_login = true;
    }else{
      console.log('false')
      this.is_login = false;
    }
  },
  methods: {
     uploadAvatar(e){
         api.uploadOssFile(e.detail.avatarUrl).then(res => {
           this.userInfo.avatar=res
           console.log(res)
           avatarUpload({
             url:res
           }).then(res => {
             if(res.code === 200){
               uni.$u.toast('修改成功')
             }else{
               uni.$u.toast(res.msg)
             }
           }).catch(err => {
             uni.$u.toast('服务器开小差了')
           })
           // console.log(details.userinfo.img);
        })
        // console.log(res,'--------');

    },
    copyId(idcard){
      uni.setClipboardData({
        data: idcard,
        success: function () {
          //调用方法成功
        }
      })
    },
    navTo(url,token = false) {
      if(token){
        if(uni.getStorageSync('token')){
          wx.navigateTo({
            url: url
          })
        }else{
          wx.navigateTo({
            url: '/pages/Login/index'
          })
        }
      }else{
        wx.navigateTo({
          url: url
        })
      }
    },
    userDetail() {
      wx.navigateTo({
        url: '/pages/UserDetail/index'
      })
    },
    orderPage() {
      this.$store.commit('footCheck', 'order');
      this.$store.commit('title', '订单');
    },
    userCouponsPage() {
      wx.navigateTo({
        url: '/pages/UserCoupons/index'
      })
    },
    updateUserInfo() {

    },
    logout(){
      uni.setStorageSync('user',undefined);
      uni.setStorageSync('token',undefined);
      this.navTo('/pages/Index/index')
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }

  },
  created() {},
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.userInfo = newVal;
      }
    },
    "$store.state.userExtends": {
      handler(newVal, oldVal) {
        this.userExtends = newVal;
      }
    }
  }
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>