<template>
  <view class="phone">
    <view class="phone-warp">
      <view class="text-sm">人工客服</view>
      <view style="margin-top: 10rpx">
				<up-text mode="phone" call text="400-9915-666"></up-text>
			</view>
    </view>
  </view>
  <mescroll-body
    @init="mescrollInit"
    @down="downCallback"
    @up="upCallback"
    :up="{
      empty: {
        use: false,
      },
    }"
  >
    <view class="mine-page">
      <view class="p-base">
        <view class="userinfo-box">
          <view class="userinfo" @click="handleClickUserInfo">
            <up-avatar
              class="avatar"
              size="48"
              mode="aspectFit"
              :src="`${
                (user && user?.avatar) || '/static/images/example-avatar1.png'
              }`"
            ></up-avatar>
            <view v-if="user?.is_need_bind_phone === true"> 登陆/注册 </view>
            <div v-else>
              {{ user?.nick_name || '' }}
            </div>
          </view>
          <div @click="goToSetting" v-if="user">
            <image
              class="setting"
              mode="aspectFit"
              src="@/static/icons/setting.svg"
            />
          </div>
        </view>
        <view v-for="(block, index) in menus" :key="index">
          <view class="block-box bg-white rounded-4px">
            <view v-for="(item, index) in block" :key="index">
              <view
                class="flex text-primary items-center cell text-base"
                @click="goToMenuPage(item)"
                v-if="!item.openType"
              >
                <image class="icon mr-12px" :src="item.icon" />
                <view class="menu-item" :openType="item.openType">
                  <text class="text">{{ item.text }}</text>
                  <text class="extra" v-if="item.extra">{{ item.extra }}</text>
                </view>
                <image class="icon" src="@/static/icons/arrow.svg" />
              </view>

              <view
                class="flex text-primary items-center cell text-base"
                v-if="item.openType"
              >
                <image class="icon mr-12px" :src="item.icon" />
                <up-button class="menu-item-btn" :openType="item.openType">
                  <text class="text">{{ item.text }}</text>
                  <text class="extra" v-if="item.extra">{{ item.extra }}</text>
                </up-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </mescroll-body>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import useAuthUser from '@/utils/hooks/useAuthUser'

const vm = getCurrentInstance()
const user = ref(null)

const menus = ref([
  [
    {
      icon: '/static/icons/record.svg',
      text: '竞猜记录',
      extra: '竞猜记录列表',
      url: '/packages/pages/quizRecord/quizRecord?source=mine',
      isTabbarPage: false,
      isNeedAuth: true,
    },
    {
      icon: '/static/icons/gift.svg',
      text: '奖品记录',
      extra: '奖品记录列表',
      url: '/packages/pages/award/award',
      isTabbarPage: false,
      isNeedAuth: true,
    },
  ],
  [
    {
      icon: '/static/icons/customer-service.svg',
      text: '在线客服',
      extra: '客服在线时间 08:00~17:00',
      url: '',
      openType: 'contact',
      isTabbarPage: false,
      isNeedAuth: false,
    },
    {
      icon: '/static/icons/info.svg',
      text: '关于我们',
      url: '/packages/pages/about/about',
      isTabbarPage: false,
      isNeedAuth: false,
    },
  ],
])

function handleClickUserInfo() {
  if (user.value && !user.value.is_need_bind_phone) {
    return
  }

  vm.proxy.$goToPage('packages/pages/login/login?previous=my')
}

function goToMenuPage(item) {
  console.log(item)

  if (item?.isNeedAuth) {
    if (user.value && !user.value.is_need_bind_phone) {
      vm.proxy.$goToPage(item.url, item.isTabbarPage)
      return
    }
    vm.proxy.$goToPage(
      'packages/pages/login/login?previous=custom&url=' + item.url
    )
  } else {
    vm.proxy.$goToPage(item.url, item.isTabbarPage)
  }
}

function goToSetting() {
  if (user.value && !user.value.is_need_bind_phone) {
    vm.proxy.$goToPage('packages/pages/setting/setting')
    return
  }

  vm.proxy.$goToPage('packages/pages/login/login?previous=setting')
}

onShow(() => {
  console.log('onShow')

  const authUser = useAuthUser()
  user.value = authUser.user
})

function getData() {
  return new Promise((resolve, reject) => {
    resolve()
  })
}

import {
  onShow,
  onLoad,
  onPullDownRefresh,
  onPageScroll,
  onReachBottom,
  onShareAppMessage,
} from '@dcloudio/uni-app'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js'
const { mescrollInit, downCallback, getMescroll } = useMescroll(
  onPageScroll,
  onReachBottom
)

const list = ref([])
const upCallback = (mescroll) => {
  typeof getData === 'function' &&
    getData(mescroll.num, mescroll.size)
      .then((data) => {
        let curPageData = [] // 当前页数据
        if (Array.isArray(data)) {
          curPageData = data
        }
        if (mescroll.num == 1) list.value = [] // 第一页需手动制空列表
        list.value = list.value.concat(curPageData) //追加新数据
        //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
        //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
        //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

        //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
        //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

        //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
        mescroll.endSuccess(curPageData.length) // 请求成功, 结束加载
      })
      .catch(() => {
        mescroll.endErr() // 请求失败, 结束加载
      })
}
</script>

<style lang="scss">
.phone {
  position: fixed;
  // #ifdef MP-WEIXIN
  bottom: 50rpx;
  // #endif
  // #ifdef H5
  bottom: 180rpx;
  // #endif
	z-index: 9999;
  left: 0;
	width: 100%;
	&-warp{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}


.icon {
  width: 20px;
  height: 20px;
}

.cell {
  height: 48px;
  line-height: 48px;
}

.mine-page {
  .userinfo-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .userinfo {
      display: flex;
      align-items: center;
      gap: 12px;

      .avatar {
        border-radius: 50%;
      }
    }

    .setting {
      margin-right: 12px;
      width: 24px;
      height: 24px;
    }
  }

  .menu-item,
  .u-button {
    border: none !important;
    padding: 0 !important;
    font-size: 16px !important;
    flex: 1;
    justify-content: space-between !important;

    display: flex !important;
  }

  .extra {
    color: #999;
    font-size: 12px;
  }

  .u-button .extra {
    margin-right: 20px;
  }
}
</style>
