<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <u-navbar title="我的" titleStyle="{ color: #fff }" bgColor="#3c96f3" leftIconSize="0" :placeholder="true"></u-navbar>
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="flex padding justify-between" style="padding-top: 0;padding-bottom: 2px;">
        <view class="flex">
          <!--          <image src="/static/ava.png" class="cu-avatar xl round" mode="widthFix">-->
          <!--          </image>-->
          <view @click="handleToLogin" class="login-tip">
            <!--            {{ userInfo.nickname }}-->
            <view class="lj_count">
              辣椒：{{ statistics['ljNum'] }}棵
            </view>
            <view class="lj_count">
              级别：
              <text v-if="chuzhonggao === 0">地主</text>
              <text v-if="chuzhonggao === 1">初级</text>
              <text v-if="chuzhonggao === 2">中级</text>
              <text v-if="chuzhonggao === 3">高级</text>
            </view>
            <view class="lj_count">
              推广商：
              <text v-if="tuiguang === 0">无</text>
              <text v-if="tuiguang === 1">1钻</text>
              <text v-if="tuiguang === 2">2钻</text>
              <text v-if="tuiguang === 3">3钻</text>
              <text v-if="tuiguang === 4">4钻</text>
              <text v-if="tuiguang === 5">5钻</text>
            </view>

          </view>
        </view>
        <view class="right-box flex align-center">
          <view v-if="authenticationShow == 0" class="right-box-item" @click="handleToAuthentication">
            <text>去实名认证</text>
            <view class="iconfont icon-right"></view>
          </view>
          <view v-else-if="authenticationShow == 1" class="right-box-item">
            <text>已实名认证</text>
          </view>
          <view v-else class="right-box-item">
            <text>正在审核</text>
          </view>
          <view class="right-box-item" @click="handleToInfo">
            <text>个人信息</text>
            <view class="iconfont icon-right"></view>
          </view>


        </view>
      </view>
      <view class="lj_count2 "  >
        团队业绩：{{ teamInfo.count }}份 {{ teamInfo.plants }}棵
      </view>
      <view class="lj_count2 "  >
        奖励赠送：{{ awardInfo.count }}份 {{ awardInfo.plants }}棵
      </view>

      <view class="lj_count2 "  >
        平台赠送：{{ platformInfo.count }}份 {{ platformInfo.plants }}棵
      </view>

    </view>
    <view class="content-section">

      <view class="mine-actions grid col-2 text-center">
        <view class="action-item" @click="handleBuilding('/pages/chili/mine/account/account')">
          <image src="../../../static/ic_balance.png" mode=""></image>
          <text class="text">我的资产</text>
<!--          <text class="text">我的资产: {{ balance }}</text>-->
        </view>
        <view class="action-item" @click="handleBuilding('/pages/chili/mine/recharge/recharge')">
          <image src="../../../static/ic_recharge.png" mode=""></image>
          <text class="text">打款</text>
        </view>
      </view>

      <view class="mine-actions grid col-2 text-center">
        <view class="action-item" @click="handleBuilding('/pages/chili/mine/record/index')">
          <image src="../../../static/images/tz.png" mode=""></image>
          <text class="text">购买记录</text>
        </view>
        <view class="action-item" @click="handleBuilding('/pages/chili/mine/earn/index')">
          <image src="../../../static/images/sy.png" mode=""></image>
          <text class="text">收益记录</text>
        </view>
      </view>





      <!-- 隐藏 -->
      <view  class="mine-actions grid col-2 text-center"  >
        <view class="action-item" @click="handleBuilding('/pages/chili/mine/account/withDraw')">
          <image src="../../../static/lakal.png" style="color: #1296db" mode=""></image>
          <text class="text">分红收益</text>
        </view>
<!--        <view class="action-item" @click="handleBuilding('/pages/chili/mine/recharge/xf')">-->
        <view class="action-item" @click="handleBuilding('/pages/chili/mine/account/couponList')">
          <image src="../../../static/logo200.png" mode=""></image>
          <text class="text">资产明细</text>
        </view>
      </view>

      <view class="mine-actions grid col-2 text-center">
        <view class="action-item" v-show="false">
          <!-- <image src="../../../static/ic_recharge.png" mode=""></image> -->
          <text class="zyhs zyhs-tudi font60" style="color: rgb(254, 159, 43);"></text>
          <text class="text">土地业绩</text>
          <text class="text">奖励赠送：{{ awardInfo.count }}份 {{ awardInfo.plants }}棵</text>
          <text class="text">平台赠送：{{ platformInfo.count }}份 {{ platformInfo.plants }}棵</text>
        </view>
        <view class="action-item" @click="handleBuilding()" v-show="false">
          <!-- <image src="../../../static/ic_recharge.png" mode=""></image> -->
          <text class="zyhs zyhs-duihuanqingkuang font60" style="color: #1296db;"></text>
          <text class="text">土地兑付</text>
        </view>
      </view>
    </view>
    <u-tabbar value="/pages/chili/mine/index" @change="handlerChange" :fixed="true" :placeholder="false"
      :safeAreaInsetBottom="false" activeColor="#ed6146" inactiveColor="#000000">
      <u-tabbar-item text="首页" name="/pages/chili/index">
        <image class="u-page__item__slot-icon" slot="active-icon" src="@/static/icon/indexs.png"></image>
        <image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/icon/index.png"></image>
      </u-tabbar-item>
      <u-tabbar-item text="我的" name="/pages/chili/mine/index">
        <image class="u-page__item__slot-icon" slot="active-icon" src="@/static/icon/mys.png"></image>
        <image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/icon/my.png"></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
import storage from '@/utils/storage'
import { getUserBalance, getMyRecordsStatistics, getTeamInfo, getIdentity, getMyAuthentication, myGivePerformance } from '@/api/system/user.js'

export default {
  data () {
    return {
      authenticationShow: 0,
      balance: 0,
      chuzhonggao: 0,
      tuiguang: 0,
      statistics: {
        ljNum: 0
      },
      teamInfo: {},
      awardInfo: {
          count: 0,
          plants: 0
      },
      platformInfo: {
          count: 0,
          plants: 0
      },
      name: this.$store.state.user.name,
      // version: getApp().globalData.config.appInfo.version,
      userInfo: JSON.parse(uni.getStorageSync('App-UserInfo'))
    }
  },
  computed: {
    avatar () {
      return this.$store.state.user.avatar
    },
    windowHeight () {
      return uni.getSystemInfoSync().windowHeight - 50
    }
  },
  created () {

  },
  onShow () {
    this.getUserBalance();
    this.getTeamInfo();
    this.getAwardInfo();
    this.getPlatformInfo();
    this.getIdentity();
    this.getMyRecordsStatistics()
    this.getMyAuthentication()
  },
  methods: {
    handlerChange (e) {
      console.log(e)
      this.$navigateTo(e)
    },
    async getIdentity () {
      let res = await getIdentity();
      if (res.code == 200) {
        this.tuiguang = res.data.tuiguang;
        this.chuzhonggao = res.data.chuzhonggao;
      }
    },
    async getMyAuthentication () {
      let res = await getMyAuthentication()
      if (res.code == 200 && res.data && res.data.status == 1) {
        this.authenticationShow = 1
      } else if (res.code == 200 && res.data && res.data.status == 0) {
        this.authenticationShow = 2
      } else {
        this.authenticationShow = 0
      }
    },
    async getTeamInfo () {
      let res = await getTeamInfo({
		  type:1
	  })
      if (res.code == 200) this.teamInfo = res.data
    },
    async getAwardInfo () {
        let res = await myGivePerformance({type: 1})
        if (res.code == 200) this.awardInfo = res.data
    },
    async getPlatformInfo () {
        let res = await myGivePerformance({type: 2})
        if (res.code == 200) this.platformInfo = res.data
    },
    async getUserBalance () {
      let res = await getUserBalance()
      if (res.code == 200) this.balance = res.data.money
      console.log('res', res)
    },
    async getMyRecordsStatistics () {
      let res = await getMyRecordsStatistics()
      if (res.code == 200) {
        for (let key in res.data) {
          if (key == '辣椒') this.statistics.ljNum = res.data[key]
        }
      }
      console.log('res', this.statistics)
    },
    handleToInfo () {
      // console.log("1")
      this.$tab.navigateTo('/pages/chili/mine/info/index')
    },
    handleToEditInfo () {
      console.log("1")
      // this.$tab.navigateTo('/pages/chili/mine/info	/edit')
    },
    handleToSetting () {
      this.$tab.navigateTo('/pages/chili/mine/setting/index')
    },
    handleToLogin () {
      console.log("1")
      // this.$tab.reLaunch('/pages/chili/login')
    },
    handleToAuthentication () {
      this.$tab.navigateTo('/pages/chili/mine/authentication/index')
    },
    handleToAvatar () {
      this.$tab.navigateTo('/pages/chili/mine/avatar/index')
    },
    handleLogout () {
      this.$modal.confirm('确定注销并退出系统吗？').then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$tab.reLaunch('/pages/chili/index')
        })
      })
    },
    handleHelp () {
      this.$tab.navigateTo('/pages/chili/mine/help/index')
    },
    handleAbout () {
      this.$tab.navigateTo('/pages/chili/mine/about/index')
    },
    handleJiaoLiuQun () {
      this.$modal.showToast('QQ群：133713780')
    },
    handleBuilding (url) {
		if (!url) return this.$msg('暂未开放');
      this.$tab.navigateTo(url)
    }
  }
}
</script>

<style lang="scss">
@import "../common/style/base.scss";

.u-page__item__slot-icon {
  width: 50rpx;
  height: 50rpx;
}

/deep/.u-navbar__content__title {
  color: #fff;
}

page {
  background-color: #f5f6f7;
}

.team_count {
  font-size: 36rpx;
  margin-left: 178rpx;
}

.mine-container {
  width: 100%;
  height: 100%;
 overflow-y: scroll;
  .right-box {
    width: 30%;
    text-align: right;
    flex-wrap: wrap;

    .right-box-item {
      width: 100%;
    }
  }

  .header-section {
    padding: 0px 15px 60px 15px;
    background-color: #3c96f3;
    color: white;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;

    }

    .authentication {
      position: absolute;
      right: 0;
      // margin-left: 10px;
    }

    .cu-avatar {
      border: 2px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 15px;

      .u_title {
        font-size: 18px;
        line-height: 30px;
      }

    }
  }

  .lj_count {
    margin-top: 20rpx;
    text-align: left;

  }

  .lj_count2 {
    display: flex;
    margin-left: 50rpx;
    margin-top: 10rpx;
    text-align: center;
  }

  .content-section {
    position: relative;
    top: -50px;

    .mine-actions {
      margin: 15px 15px;
      padding: 20px 0px;
      border-radius: 8px;
      background-color: white;

      .action-item {
        .icon {
          font-size: 28px;
        }

        image {
          width: 40px;
          height: 40px;
        }

        .text {
          display: block;
          font-size: 13px;
          margin: 8px 0px;
        }
      }
    }
  }
}
</style>
