<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-index content home">
    <!-- 头部信息 -->
    <view
      v-if="isLoad"
      class="shop-info mb-30"
    >
      <view class="info-item shop">
        <view class="shop-name">
          <text>
            {{ shopInfo.shopName }}
            <text
              v-if="shopInfo.shopStatus === -1"
              class="status"
            >
              {{ $t('yiShanChu') }}
            </text>
            <text
              v-else
              class="status"
            >
              ({{
                [
                  $t('tingYeZhong'),
                  $t('yingYeZhong'),
                  $t('weiGuiXiaXian'),
                  $t('shangXianDaiShenHe'),
                  $t('kaiDianShenQingZhong'),
                  $t('kaiDianShenQingDaiShenHe')
                ][shopInfo.shopStatus]
              }})
            </text>
          </text>
        </view>
        <view class="share">
          <view
            class="scan-code"
            @tap="scanCode"
          >
            <image
              style="width: 100%; height: 100%"
              src="/static/images/scan-code.png"
              mode="aspectFit"
            />
          </view>
          <view
            class="share-store"
            @tap="openSharePop"
          >
            <image
              style="width: 100%; height: 100%"
              src="/static/images/share-store.png"
              mode="aspectFit"
            />
          </view>
        </view>
      </view>
      <view class="info-item income">
        <view class="income-title">
          {{ $t('jinRiZhiFuJineYuan') }}
        </view>
        <view class="income-amount">
          {{ todayPayedInfo.payActualTotal }}
        </view>
      </view>
      <view class="info-item order">
        <text>{{ $t('jinRiDingDan') }}: {{ todayPayedInfo.payOrderCount }},</text>
        <text>{{ $t('daiFaHuo') }}: {{ orderCountInfo.payed }}</text>
      </view>
    </view>
    <!-- 余额信息 -->
    <view
      v-if="isLoad"
      class="shop-balance"
    >
      <view class="balance-item">
        <view class="balance-title">
          {{ $t('dianPuKeYongYueYuan') }}
        </view>
        <view class="balance-amount">
          {{ shopWalletInfo.settledAmount }}
        </view>
      </view>
      <view class="balance-item">
        <view class="balance-title">
          {{ $t('daiJieSuanJineYuan') }}
        </view>
        <view class="balance-amount">
          {{ shopWalletInfo.unsettledAmount }}
        </view>
      </view>
    </view>
    <!-- 快捷入口 -->
    <view
      v-if="showShortcut"
      class="shortcut-entrance mb-30"
    >
      <view class="title mb-30">
        {{ $t('dianPuXiaoZhuShou') }}
      </view>
      <template
        v-for="(item, index) in shortcutList"
        :key="index"
      >
        <view
          v-if="item.Authorities === true || isAuthorities(item.Authorities)"

          class="shortcut-item"
          @tap="shortcutTap(item.url)"
        >
          <image
            class="item-icon"
            :src="item.icon"
          />
          <view class="item-info">
            <view class="item-title">
              {{ item.title }}
            </view>
            <view class="item-desc">
              {{ item.desc }}
            </view>
          </view>
          <uni-icons
            class="ml-auto"
            type="arrowright"
            color="#2B4499"
          />
        </view>
      </template>
    </view>
    <!-- 分享店铺弹窗 -->
    <share-shop-popup
      v-if="isShareShopPopupShow"
      ref="sharePopupRef"
      :shop-info="shopInfo"
      :is-wechat="isWechat"
      @open-guide-share="openGuideShare"
      @close-share-pop="closeSharePop"
    />
    <!-- 引导分享蒙版 -->
    <view
      v-if="guideShare"
      class="guide-share-mask"
    >
      <view class="mask" />
      <view class="guide-content">
        <view
          class="close"
          @tap="guideShare = false"
        >
          <image src="../../static/images/close.png" />
        </view>
        <view class="share-img">
          <image src="../../static/images/shareIcon.png" />
        </view>
        <view class="share-word">
          <view class="big-word">
            {{ $t('liJiFenXiang') }} {{ shareType===0 ? $t('geiHaoYou'):$t('daoPengYouQuan') }}
          </view>
          <view class="small-word">
            {{ $t('dianJiPingMuYouShangJiaoJiangBenDianPuFenXiang') }} {{ shareType===0 ? $t('geiHaoYou'):$t('daoPengYouQuan') }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import util from '../../utils/util'

const { isAuthorities } = util
const isLoad = ref(false)
const shortcutList = [
  {
    icon: '../../static/images/order-management.png',
    title: $t('dingDanGuanLi'),
    desc: $t('dingDanFaHuoDingDanTuiKuan'),
    url: '/package-order/pages/order/order',
    Authorities: 'manageOrders:view'
  },
  {
    icon: '../../static/images/product-release.png',
    title: $t('shangPinGuanLi'),
    desc: $t('bianJiFaBuXinShangPin'),
    url: '/package-prod/pages/prod-management/prod-management',
    Authorities: 'prod:prod:manage:view'
  },
  {
    icon: '../../static/images/store-billing.png',
    title: $t('dianPuJieSuan'),
    desc: $t('dianPuZiChanYuetiXian'),
    url: '/pages/shop-settlement/shop-settlement',
    Authorities: 'shop:shopWalletLog:view'
  },
  {
    icon: '../../static/images/product-ranking.png',
    title: $t('shangPinPaiHang'),
    desc: $t('zhiFuFangWenTuiKuanPaiHang'),
    url: '/pages/product-ranking/product-ranking',
    Authorities: true
  }
]
const shopInfo = ref({})
const todayPayedInfo = ref({
  payActualTotal: 0,
  payOrderCount: 0
})
const orderCountInfo = ref({
  payed: 0
})
const shopWalletInfo = ref({
  settledAmount: 0,
  unsettledAmount: 0
})
const isShareShopPopupShow = ref(false)
const guideShare = ref(false)
const isWechat = ref(false)
onLoad(() => {
  // 判断是否为微信环境
  // #ifdef H5
  isWechat.value = wechat.isWechat()
  // #endif
  // #ifdef APP-PLUS
  isWechat.value = false
  // #endif
  // #ifdef MP-WEIXIN
  isWechat.value = true
  // #endif
})
const showShortcut = ref(false)
onShow(async () => {
  clearData()
  // 获取今日支付信息数量
  getTodayPayedInfo()
  // 获取订单数量
  getOrderCount()
  // 获取店铺余额信息
  getShopWalletInfo()
  // 获取店铺信息
  getShopInfo()
  uni.setNavigationBarTitle({
    title: $t('dianPuShouYe')
  })
  util.transTabbar()
  // 获取菜单权限
  if (!uni.getStorageSync('bbcAuthorities')) {
    await util.shopMenuList()
    showShortcut.value = true
  } else {
    showShortcut.value = true
  }
})

const closeSharePop = () => {
  isShareShopPopupShow.value = false
}
const clearData = () => {
  shopWalletInfo.value = {
    settledAmount: 0,
    unsettledAmount: 0
  }
  orderCountInfo.value = {
    payed: 0
  }
  todayPayedInfo.value = {
    payActualTotal: 0,
    payOrderCount: 0
  }
}
/**
 * 获取店铺信息
 */
const getShopInfo = () => {
  const params = {
    url: '/shop/shopDetail/info',
    method: 'GET'
  }
  http.request(params).then(({ data: res }) => {
    isLoad.value = true
    shopInfo.value = res
  })
}

/**
 * 获取今日支付信息数量
 */
const getTodayPayedInfo = () => {
  const params = {
    url: '/shop/statisticsOrder/orderPayByShopId',
    method: 'GET'
  }
  http.request(params).then(({ data: res }) => {
    todayPayedInfo.value = res
  })
}

/**
 * 获取订单数量
 */
const getOrderCount = () => {
  const params = {
    url: '/shop/statisticsOrder/orderCount',
    method: 'GET'
  }
  http.request(params).then(({ data: res }) => {
    orderCountInfo.value = res
  })
}

/**
 * 获取店铺余额信息
 */
const getShopWalletInfo = () => {
  const params = {
    url: '/shop/shopWallet/info',
    method: 'GET',
    callBack: (res) => {
      if (!res) return
      shopWalletInfo.value = res
    }
  }
  http.request(params).then(({ data: res }) => {
    if (!res) return
    shopWalletInfo.value = res
  })
}

/**
 * 快捷入口跳转
 */
const shortcutTap = (url) => {
  if (!url) {
    return
  }
  uni.navigateTo({
    url
  })
}

// 扫码核销
const scanCode = () => {
  // #ifdef H5
  // 判断是否为微信内嵌浏览器
  if (!wechat.isWechat()) {
    uni.showToast({
      title: $t('qingZaiWeiXinLiuLanQiDaKai'),
      icon: 'none'
    })
    return
  }
  wechat.scanQRCode(
    (codeStr) => {
      const code = codeStr.indexOf(',') > -1 ? codeStr.split(',')[1] : codeStr
      uni.navigateTo({
        url: '/pages/scan-pick/scan-pick?pickCode=' + code
      })
    },
    (err) => {
      alert(JSON.stringify(err))
      uni.showToast({
        title: $t('huanQiSaoMaShiBaiQingShaoHouZhongShi'),
        icon: 'none'
      })
    }
  )
  // #endif
  // #ifdef APP-PLUS || MP-WEIXIN
  uni.scanCode({
    success (res) {
      // 判断扫码结果是否为纯数字
      if (!/^\d+$/.test(res.result)) {
        uni.showModal({
          title: $t('tiShi'),
          content: $t('qingSaoMiaoZhengQueDeHeXiaoMa'),
          confirmText: $t('queDing'),
          showCancel: false
        })
        return
      }
      uni.navigateTo({
        url: '/pages/scan-pick/scan-pick?pickCode=' + res.result
      })
    },
    fail: () => {
    }
  })
  // #endif
}
const sharePopupRef = ref(null)
// 打开分享弹窗
const openSharePop = () => {
  isShareShopPopupShow.value = true
  nextTick(() => {
    sharePopupRef.value?.openSharePop()
  })
}
// 打开分享引导蒙版
const shareType = ref(0)
const openGuideShare = (type) => {
  shareType.value = type
  guideShare.value = true
}

</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
