<template>
  <JHeaderTitle bgColor="#7737fe" color="#fff" pdB="70rpx" :back="false" />

  <view class="page-wrapper">
    <!-- 自定义导航栏 -->
    <!-- 钱包卡片 -->
    <view class="wallet-wrapper">
      <view class="wallet-top">
        <view class="wallet-money">钱包余额（元）</view>
        <view class="wallet-number">{{
          isOpenEyes ? walletInfo.amount || "0.00" : desensitization(walletInfo.amount || "0.00")
        }}</view>
        <view class="wallet-eyes bdR10">
          <image :src="imgEyes[isOpenEyes ? 1 : 0]" mode="scaleToFill" @tap="changeOpen" />
        </view>
      </view>
      <view class="wallet-bottom">
        <view>
          <view class="wallet-money">提现中金额（元）</view>
          <view class="wallet-b-number">{{
            isOpenEyes ? walletInfo.unAmount || "0.00" : desensitization(walletInfo.unAmount || "0.00")
          }}</view>
        </view>
        <view>
          <view class="wallet-money">在途利润（元）</view>
          <view class="wallet-b-number">{{
            isOpenEyes
            ? walletInfo.auditProfitAmount || "0.00"
            : desensitization(walletInfo.auditProfitAmount || "0.00")
          }}</view>
        </view>
        <view>
          <view class="wallet-money">冻结金额（元）
            <uni-icons type="help-filled" size="20" color="#c6c6c6" @tap="openTips()" />
          </view>
          <view class="wallet-b-number">{{
            isOpenEyes
            ? walletInfo.freezeAmount || "0.00"
            : desensitization(walletInfo.freezeAmount || "0.00")
          }}</view>
        </view>
      </view>
    </view>
   
    <JButton pd="0 50rpx 50rpx 50rpx" bgColor="#fff" color="#7737fe" pdTop="0"
      @HandleTouch="jumpPage('/pageAccount/takeMoney/takeMoney')">提现</JButton>
    <JCardContent>
      <!-- nav 导航部分 -->
      <view class="nav-list">
        <view class="nav-item bgF2 bdR16" v-for="(v, i) in list" :key="i" :class="[v.url === 'null' ? 'nav-station' : '']"
          @tap="jumpPage(v.url)">
          <image :src="v.imgUrl" mode="scaleToFill" v-if="v.imgUrl" />
          <text class="nav-text">{{ v.title }}</text>
        </view>
      </view>
      <!-- 广告展示部分 -->
    
      <blcok v-for="v in vdata.adList" :key="v.adverId">
        <JeepayBanner :list="v.appContent" :interval='v.changeTime' v-if="v.appPlaceType == 2" mg='40rpx 0' />
        <JeepayAdCard :list='v.appContent' v-if="v.appPlaceType == 1" mg='40rpx 0' mgs="40rpx 0"/>
      </blcok>
      <!-- 公告列表 -->
      <template v-if="noticeList.length > 0">
        <view class="notice-title fs30 fw700">最新公告</view>
        <view class="notice-wrapper bdR16" v-for="v in noticeList" :key="v.articleId"
          @tap="jumpPage(`/pageWork/setUp/postDetail?id=${v.articleId}`)">
          <view class="notice-content single-text-beyond fs30">{{ v.title }}</view>
          <view class="notice-time">{{ v.createdAt }}</view>
        </view>
        <JContent @HandleTouch="jumpPage('/pageWork/setUp/latestPost')" height="160rpx">查看全部</JContent>
      </template>
    </JCardContent>

  </view>

  <JTipsPopupContent ref="tips" title="冻结金额释义" buttonText="我知道了">
    <view class="tips-wrapper">
      <view class="tips-title">描述：<span class="tips-info">冻结金额为不可提现金额</span></view>
    </view>
    <view class="tips-wrapper">
      <view class="tips-title">当前可提现金额为：<span class="tips-info">{{ walletInfo.allowTakeAmount }}元</span></view>
    </view>
    <view class="tips-wrapper" v-if="walletInfo.freezeAmount > 0 && walletInfo.freezeDesc">
      <view class="tips-title">冻结原因：</view>
      <view class="tips-info">{{ walletInfo.freezeDesc }}。请尽快处理。</view>
    </view>
  </JTipsPopupContent>

    <!-- #ifdef APP-PLUS -->
   <view style="height: 120rpx;"></view>
	  <!-- #endif -->
</template>

<script setup>
import { ref, reactive, onBeforeUnmount } from "vue"
import { $statistics, $getNoticeList, $getMainUserInfo, $adList ,$getCompanyInfo,  $getUserInfo} from "@/http/apiManager.js"
import { onShow, onPullDownRefresh, onLoad,onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app"
import JHeaderTitle from "@/components//newComponents/JHeaderTitle/JHeaderTitle"
import JButton from "@/components//newComponents/JButton/JButton"
import JCardContent from "@/components//newComponents/JCardContent/JCardContent"
import JContent from "@/components//newComponents/JContent/JContent"
import storageManage from "@/util/storageManage.js"
import { horn } from "@/hooks/handleMoney"
import dayjs from "dayjs"
import list from "./navList/navList"
import JTipsPopupContent from './component/JTipsPopupContent.vue';
onLoad(() => {
  $getMainUserInfo().then(({ bizData }) => {
    toExamine(bizData.infoState)
  })
})
onShow(() => {
  userDate()
  getNoticeList()
  onPullDownRefresh(() => {
    userDate()
  })
})
const vdata = reactive({

})
// 控制眼睛开关
const imgEyes = reactive(["/static/iconImg/home-eye-close.svg", "/static/iconImg/icon-openEyes.svg"])
const isOpenEyes = ref(false)

const changeOpen = () => {
  isOpenEyes.value = !isOpenEyes.value
}
// 钱包信息
const walletInfo = ref({
    agentShareImgUrl:''
})
const userDate = () => {
  $statistics().then((res) => {
    const { bizData } = res
    walletInfo.value.amount = horn(bizData.availableBalanceAmount) //钱包余额
    walletInfo.value.auditProfitAmount = horn(bizData.auditProfitAmount) //在途金额
    walletInfo.value.freezeAmount = horn(bizData.freezeAmount) //钱包冻结金额
    walletInfo.value.unAmount = horn(bizData.unAmount) //提现中金额
    walletInfo.value.allowTakeAmount = horn(bizData.allowTakeAmount) //最大可提现金额
    walletInfo.value.freezeDesc = bizData.freezeDesc // 钱包金额冻结描述
  })
  uni.stopPullDownRefresh()
}
// 信息转换为*号
const desensitization = (val) => {
  if (!val) return //如果为undefined 直接return 出去

  return "******"
}

// 提示框
const tips = ref()

// 打开提示弹窗
const openTips = () => {
  tips.value.open()
}

// 公告列表
const noticeList = ref([])
const getNoticeList = () => {
  $getNoticeList({ pageSize: 3, pageNumber: 1, articleType: 1 }).then((res) => {
    const { bizData } = res
    noticeList.value = bizData.records.slice(0, 3)
    noticeList.value.forEach((v) => {
      v.createdAt = formatTime(dayjs(v.createdAt).format("YYYY-MM-DD HH:mm"))
    })
    uni.stopPullDownRefresh()
  })
}
// 把 - 替换成 /
const formatTime = (val) => {
  const time = val.split(" ")
  time[0] = time[0].split("-").join("/")
  return time.join(" ")
}
// 跳转路由
const jumpPage = (url) => {
  if (url === "null") return

  // 发起提现时判断是否有可提现金额
  if(url == '/pageAccount/takeMoney/takeMoney'){
    if(walletInfo.value.allowTakeAmount <= 0) {
      uni.showToast({
        title: "无可提现金额",
        icon: "error",
      })
      return
    }
  }
  
  uni.navigateTo({
    url,
  })
}
const toExamine = (val) => {
  let url = null
  switch (val) {
    case 2:
      url = "/pageWork/information/information"
      break
    case 3:
      url = "/pageWork/information/information"
      break
    case 4:
      url = "/pageWork/information/information"
      break
  }
  if (!url) return false
  uni.reLaunch({ url })
}
$getCompanyInfo().then(({ bizData }) => {
   vdata.agentShareImgUrl = bizData.agentShareImgUrl
})
// 微信分享
onShareAppMessage((res) => {
    if(res.from == 'menu') return {
    title: uni.$appName,
    path: '/pages/workbench/workbench',
    imageUrl: vdata.agentShareImgUrl
  }
})
// 分享到朋友圈
onShareTimeline(() => {
    return {
    title: uni.$appName,
    imageUrl: vdata.agentShareImgUrl
  }
})
// 请求首页广告
$adList({ appPlace: 2 }).then(({ bizData }) => {
  bizData.forEach(v => {
    v.appContent = JSON.parse(v.appContent)
  })
  vdata.adList = bizData
  console.log(bizData)
})
$getUserInfo().then(({ bizData }) => {
    storageManage.userInfo(bizData)
})
onBeforeUnmount(() => {
  uni.removeInterceptor("switchTab")
})

</script>
<style lang="scss" scoped>
.page-wrapper {
  background-color: $primaryColor;

  .wallet-wrapper {
    padding: 20rpx 50rpx 50rpx 50rpx;
    color: #fff;
  }

  .wallet-money {
    font-size: 25rpx;
    color: rgba($color: #fff, $alpha: 0.7);
  }

  .wallet-top {
    position: relative;

    .wallet-number {
      margin: 10rpx 0;
      font-size: 63rpx;
    }

    .wallet-eyes {
      display: flex;
      position: absolute;
      top: 0;
      right: 0;
      padding: 14rpx;
      background-color: rgba($color: #000000, $alpha: 0.2);

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

  .wallet-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 60rpx;
    padding-right: 20rpx;

    .wallet-b-number {
      margin-top: 10rpx;
    }
  }
}

// 导航栏 和 公告时间部分 共用一个样式
.nav-text,
.notice-time {
  margin-top: 21rpx;
  font-size: 28rpx;
}

// 导航
.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30rpx;
  .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 200rpx;
    height: 200rpx;
    margin-top: 25rpx;

    image {
      width: 60rpx;
      height: 60rpx;
    }
  }

  .nav-station {
    background-color: #fff;
  }
}

.notice-wrapper {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #f7f7f7;

  .notice-content {
    white-space: nowrap;
  }

  .notice-time {
    color: #8c8c8c;
  }
}

.tips-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 50rpx;
  .tips-title {
    margin-bottom: 30rpx;
    font-size: 30rpx;
  }
  .tips-info {
    font-size: 26rpx;
    color: #808080;
  }
}



</style>
