<template>
  <view class="viewport">
    <z-paging ref="paging" refresher-only @onRefresh="onRefresh" safe-area-inset-bottom>
      <template #top>
        <view class="header">
          <view class="title">个人中心</view>
        </view>
        <!-- 已登录 -->
        <template v-if="memberStore.profile">
          <view class="profile">
            <view class="overview">
              <navigator :url="`${pageUrl['profile']}`" hover-class="none">
                <shop-user-avatar :width="120" :url="otersImgs.default_avatar" />
              </navigator>
              <view class="meta">
                <view class="nickname">
                  {{ memberStore.profile.nickname || memberStore.profile.username }}
                </view>
                <navigator class="extra" :url="`${pageUrl['profile']}`" hover-class="none">
                  <text class="update">暂无公司</text>
                  <image class="edit-icon" src="/static/images/userCenter/edit.png" />
                </navigator>
              </view>
            </view>
            <image class="qr-icon" :src="otersImgs.saoyisao" />
          </view>
        </template>
        <!-- 未登录 -->
        <template v-else>
          <view class="profile">
            <view class="overview">
              <navigator :url="`${pageUrl['login']}`" hover-class="none">
                <shop-user-avatar :width="120" url="otersImgs.default_avatar" />
              </navigator>
              <view class="meta">
                <navigator :url="`${pageUrl['login']}`" hover-class="none" class="nickname">
                  未登录
                </navigator>
                <view class="extra">
                  <text class="tips">点击登录账号</text>
                </view>
              </view>
            </view>
          </view>
        </template>
        <!-- 权益栏 -->
        <view class="rights">
          <image :src="otersImgs.card_background" class="rights-img"></image>
          <view class="rights-nav">
            <text class="rights-nav-text">{{userInfo?.project?.project_name||'暂无'}}</text>
            <wd-progress :percentage="userInfo?.project?.project_progress||20" color="#A3ACFE" />
            <image :src="otersImgs.qiehuan" class="rights-nav-img" />
          </view>
          <view class="rights-info">
            <view class="rights-info-item" v-for="(item,index) in userInfo?.project.project_data" :key="index">
              <navigator :url="item.url" hover-class="none">
                <view class="rights-info-item-num"> {{item.value}} </view>
                <view class="rights-info-item-text"> {{item.name}} </view>
              </navigator>
            </view>
          </view>
        </view>
        <!-- 海保助手&数据中心 -->
        <view class="data-center">
          <navigator hover-class="none" class="data-center-item">
            <text class="data-center-item-text">海保助手</text>
            <image :src="otersImgs.haibao_background" class="data-center-img" />
          </navigator>
          <navigator hover-class="none" class="data-center-item">
            <text class="data-center-item-text data-center-item-data">数据中心</text>
            <image :src="otersImgs.data_background" class="data-center-img" />
          </navigator>
        </view>
      </template>
      <!-- 菜单栏 -->
      <view class="menus">
        <view v-for='(item,index) in menusList' :key="index" class="menus-item">
          <view class="menus-item-title">{{item.title}}</view>
          <blockIcon :data="item.menus" :perRow="5"></blockIcon>
        </view>
      </view>
    </z-paging>
  </view>
</template>
<script setup lang="ts">
  import { pageUrl } from '@/utils/constants'
  import { getDashboardApi } from '@/api/member'
  import { useAddressStore, useMemberStore } from '@/stores'
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { onShowRefreshData } from '@/utils/common'
  import { reactive } from 'vue'
  import blockIcon from '@/pages/my/components/blockIcon.vue'
  import { postCenterConfigApi, postUserInfoApi } from '@/api/userCenter'
  const memberStore = useMemberStore()
  const pararms = {
    page: 1,
    page_size: 10,
  }
  const dashboard = reactive({
    rights: {
      balance: '0',
      coupon_num: '0',
      favorite_num: '0',
    },
    order_bar: {
      to_pay: '',
      to_ship: '',
      to_receive: '',
      to_evaluate: '',
      refund: '',
    },
    coupon: {
      eligibility: true,
    },
  })
  // 菜单
  const menusList = ref([])
  // 其他图片配置
  const otersImgs = ref({})
  // 个人信息配置
  const userInfo = ref()
  onLoad(() => {
    getShopCenterConfig()
  })

  // 获取按钮素材配置
  const getShopCenterConfig = () => {
    postCenterConfigApi(pararms).then((res) => {
      if (res.code == 200) {
        menusList.value = res.result.menus
        otersImgs.value = res.result.other
      }
    })
  }
  // 获取用户中心数据
  const getUserInfo = () => {
    postUserInfoApi(pararms).then((res) => {
      if (res.code == 200) {
        userInfo.value = res.result.userInfo
      }
    })
  }
  const getData = () => {
    return new Promise(() => {
      if (memberStore.profile?.token) {
        getDashboardApi().then((res) => {
          Object.assign(dashboard, res.result)
        })
      }
    })
  }

  onShowRefreshData(() => {
    getData()
    getUserInfo()
  }, true)

  const paging = ref<ZPagingInstance>()
  const onRefresh = () => {
    getData()
    setTimeout(() => {
      paging.value?.complete()
    }, 1000)
  }
</script>
<style lang="scss">
  page {
    height: 100%;
    overflow: hidden;
    background-color: #f7f7f8;
  }

  .header {
    display: flex;
    align-items: center;
    padding: 30rpx;
    margin-top: 20rpx;

    .title {
      width: 100%;
      text-align: center;
    }
  }

  .viewport {
    height: 100%;
    color: #333333;
  }

  /* 用户信息 */
  .profile {
    position: relative;

    /* #ifdef MP-WEIXIN */
    padding-top: 25px;
    /* #endif */

    .overview {
      display: flex;
      height: 120rpx;
      padding: 0 36rpx;
    }

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: #eee;
    }

    .gray {
      filter: grayscale(100%);
    }

    .meta {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      line-height: 30rpx;
      padding: 16rpx 0;
      margin-left: 20rpx;
    }

    .nickname {
      max-width: 350rpx;
      padding-bottom: 20rpx;
      font-size: 30rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .extra {
      display: flex;
      font-size: 20rpx;
      align-items: center;
    }

    .tips {
      font-size: 22rpx;
    }

    .update {
      padding: 3rpx 10rpx 1rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.8);
      margin-right: 10rpx;
      border-radius: 30rpx;
    }

    .edit-icon {
      width: 20rpx;
      height: 20rpx;
    }

    .settings {
      position: absolute;
      bottom: -20rpx;
      right: 40rpx;
      font-size: 45rpx;
      color: #fff;
    }

    .qr-icon {
      position: absolute;
      right: 40rpx;
      top: 5%;
      width: 24rpx;
      height: 24rpx;
    }
  }

  .rights {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 20rpx 20rpx 120rpx;
    margin: 25rpx 20rpx 0;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
    position: relative;

    &-img {
      position: absolute;
      z-index: -1;
      left: 0;
      top: 0;
      width: 100%;
      height: 280rpx;
    }


    &-nav {
      width: 100%;
      color: #fff;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 50rpx;

      &-img {
        width: 22rpx;
        height: 16rpx;
      }

      &-text {
        width: 200rpx;
        white-space: nowrap;
        /* 强制文字不换行 */
        overflow: hidden;
        /* 超出容器部分隐藏 */
        text-overflow: ellipsis;
        /* 溢出部分显示省略号 */
      }

      .wd-progress {
        width: 70%;

        .wd-progress__bar {
          height: 100%;
          border-radius: 10rpx;
        }

        .wd-progress__outer {
          background-color: #6572F8;
          height: 10rpx;
        }

        ::v-deep .wd-progress__label {
          color: #fff !important;
          font-size: 24rpx;
        }
      }
    }

    &-info {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 50rpx;
      margin-top: 20rpx;
      color: #fff;

      &-item {
        width: 30%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &-num {
          font-size: 28rpx;

        }

        &-text {
          font-size: 24rpx;
        }
      }
    }
  }

  .title {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    color: #1e1e1e;
    padding: 10rpx 15rpx 50rpx;
    font-weight: bold;

    .navigator {
      font-size: 24rpx;
      color: #939393;
      float: right;
    }
  }

  .section-item {
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20rpx;
  }

  .section-item-text {
    padding-top: 10rpx;
    font-size: 28rpx;
  }

  /* #ifdef MP-WEIXIN */
  .contact-btn {
    display: flex;
    width: 60rpx;
    height: 68rpx;
    padding: 0;
    background-color: transparent;

    &::after {
      border: none;
    }
  }

  /* #endif */
  .data-center {
    padding: 0 30rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10rpx;

    &-item {
      position: relative;

      &-text {
        position: absolute;
        top: 30rpx;
        left: 30rpx;
        font-size: 28rpx;
        color: #9A8DEB;
      }

      &-data {
        color: #62C082;
      }
    }

    &-img {
      width: 300rpx;
      height: 110rpx;
    }
  }

  .menus {
    width: 100%;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 30rpx;


    &-item {
      width: 100%;
      margin-bottom: 20rpx;
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

      &-title {
        color: #333333;
        font-size: 32rpx;
        padding: 20rpx 30rpx;
      }
    }
  }
</style>
