<template>
  <view style="display: flex;flex-direction: column; width: 100vw;height: 100vh;">
    <tabber :select="2"/>
    <!-- 顶部 -->
    <view style="width: 100%;height: 30%;">
      <image src="/static/image/center/1.png" style="width: 100%;height: 100%;"></image>
    </view>

    <!--中部 用户信息-->
    <view
        style="border-radius: 20rpx;position: absolute;top: 20%;left: 10%;   width:80%;height: 12%;z-index: 1;background: white;">
      <!--头像-->
      <view
          style="position: absolute;z-index:2;width:30%;height:90%;border-radius: 50%;overflow: hidden;top: -32%;left: 2%;">
        <image :src="userInfo.headImage || '微信用户'" style="width: 100%;height: 100%;"></image>
      </view>
      <!--福利中心-->
      <view style="position: absolute;z-index:2;width:33%;height:30%;top: 13%;right: 2%;">
        <image src="/static/image/center/flzx.png" style="width: 100%;height: 100%;"></image>
      </view>
      <!--  未认证-->
      <view style="position: absolute;z-index:2;width:15%;height:20%;top: 45%;left: 28%;">
        <image src="/static/image/center/wrz.png" style="width: 100%;height: 100%;"></image>
      </view>
      <!--  去认证  -->
      <view style="position: absolute;z-index:2;width:55%;height:20%;top: 43%;left: 46%;">
				<span style="font-size: 26rpx;" class="textColor"
              @click="$utils.navigateTo('/mine/authOption')">去认证</span>
      </view>
      <!--  用户信息  -->
      <view style="position: absolute;z-index:2;width:55%;height:20%;top: 60%;left: 7%;">
        <view>
          <span style="font-size: 35rpx;margin-right: 5rpx">{{ userInfo.nickName || '微信用户' }}</span>
          <span style="font-size: 18rpx">{{ userInfo.phone }}</span>
        </view>
      </view>
      <!--  点赞量  -->
      <view
          style="display: flex;flex-direction: column;gap:2rpx ;position: absolute;z-index:2;width:15%;height:40%;top: 55%;right: 3%;">
        <view style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
          <image src="/static/image/center/dianZan.svg" style="width: 40%;height: 84%;"></image>
        </view>
        <view style="display: flex;justify-content: center ;font-size: 20rpx;color:#777777">点赞量</view>
      </view>
    </view>

    <!-- 下部 -->
    <view style="width: 100%;height: 70%;padding-top:150rpx">
      <view>
        <!--上GridView-->
        <view>
          <uv-grid :col="4">
            <uv-grid-item v-for="(item,index) in baseList" :key="index" @click="goToPage(item)">
              <img :src="item.imageUrl" :alt="item.title"
                   :style="{ width: '80rpx', height: '80rpx',marginBottom: '10rpx'}"/>
              <text style="font-size: 30rpx;color: #333333;">{{ item.title }}
              </text>
            </uv-grid-item>
          </uv-grid>
        </view>


        <!--其他-->
        <view style="margin:50rpx 0  0 50rpx;font-size: 40rpx;color: #333333;">其他</view>

        <!--下GridView-->
        <view style="margin-top: 50rpx;">
          <uv-grid :col="4">
            <uv-grid-item v-for="(item,index) in otherList" :key="index" @click="goToPage(item)">
              <img :src="item.imageUrl" :alt="item.title"
                   :style="{ width: '80rpx', height: '80rpx',marginBottom: '10rpx'}"/>
              <text style="font-size: 30rpx;color: #333333;">{{ item.title }}
              </text>
            </uv-grid-item>
          </uv-grid>
        </view>
      </view>
    </view>


    <!--  退出弹框-->
    <confirmationPopup
        ref="confirmationPopup"
        title="提示"
        :cancel="true"
        @confirm="handleConfirm"

        @cancel="handleCancel"
        confirmText="确认">
      <view class="confirmationPopup">
        <!-- <image src="/static/image/publish/upload.png"
        style="width: 150rpx;height: 150rpx;"
        mode=""></image> -->
        <view style="text-align:center">
          确认退出登录吗？
        </view>
      </view>
    </confirmationPopup>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import tabber from '@/components/base/tabbar.vue'
import confirmationPopup from "@/components/toast/confirmationPopup.vue";

export default {
  components: {
    confirmationPopup,
    tabber,
  },
  computed: {
    ...mapState(['userInfo']),
  },
  data() {
    return {
      // 基础列表
      baseList: [{
        name: 'photo',
        imageUrl: '/static/image/center/1.png',
        title: '我的发布',
        gotoPageUrl: '/mine/releaseRecord'
      },
        {
          name: 'lock',
          imageUrl: '/static/image/center/1.png',
          title: '我的推广',
          gotoPageUrl: '/mine/promotionRecord'
        },
        {
          name: 'star',
          imageUrl: '/static/image/center/1.png',
          title: '我的银行卡',
          gotoPageUrl: '/mine/addBankCard'
        },
        {
          name: 'star',
          imageUrl: '/static/image/center/1.png',
          title: '我的钱包',
          gotoPageUrl: '/mine/purse'
        },
      ],
      // 其他列表
      otherList: [
        {
          name: 'photo',
          imageUrl: '/static/image/center/1.png',
          title: '实名信息',
          gotoPageUrl: '/mine/promotionRecord'
        },
        {
          name: 'lock',
          imageUrl: '/static/image/center/1.png',
          title: '帮助反馈'
        },
        {
          name: 'outLogin',
          imageUrl: '/static/image/center/1.png',
          title: '退出登录',
          gotoPageUrl: '/mine/promotionRecord'
        },
      ],
    }
  },
  onShow() {
    // 获取用户个人信息
    this.$store.commit('getUserInfo')
  },
  methods: {

    // 点击列表跳转页面
    goToPage(item) {
      if (item.name == 'outLogin') {
        //
        this.$refs.confirmationPopup.open()
        return
      }
      this.$utils.navigateTo(item.gotoPageUrl)

    },
    handleConfirm() {
      // 退出登录
      console.log("退出登录")
      this.$refs.confirmationPopup.close()
    },
    handleCancel() {
      // 取消退出登录
      console.log("取消退出登录")
      this.$refs.confirmationPopup.close()
    }

  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.textColor {
  background: $uni-linear-gradient-color;
  -webkit-background-clip: text;
  /*将设置的背景颜色限制在文字中*/
  -webkit-text-fill-color: transparent;
  /*给文字设置成透明*/
}

.confirmationPopup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200rpx;

  image {
    margin-top: 40rpx;
  }

  .info {
    margin-top: 40rpx;
    font-size: 26rpx;
  }
}
</style>