<template>
  <view class="page-wrapper">
    <uni-nav-bar statusBar :border="false" leftWidth="50%" backgroundColor="transparent">
      <template #left>
        <view class="user-info">
          <image :src="vdata.userInfo.avatarUrl" mode="scaleToFill" />
          <view class="user-nickname">{{ vdata.userInfo.realname }}</view>
        </view>
      </template>
    </uni-nav-bar>

    <!-- 卡片部分 -->
    <view class="index-card">
      <view class="index-content">
        <view class="index-main">
          <view class="index-num">￥{{ vdata.indexData.payAmount }}</view>
          <view class="index-title">今日总收益(元)</view>
        </view>
        <view class="index-main">
          <view class="index-num">￥{{ vdata.indexData.refundAmount }}</view>
          <view class="index-title">退款金额(元)</view>
        </view>
      </view>
      <view class="index-card-footer">
        <view>收益详情</view>
        <view @tap="more">查看更多 ></view>
      </view>
    </view>
    <!-- 发起收款 -->
    <view class="pay-card" @tap="jumpPage('/pages/payment/payment')">
      <image src="/static/indexImg/pay.png" mode="scaleToFill" />
      <view class="pay-text">发起收款</view>
    </view>
    <!-- nav 导航部分 -->
    <view class="index-nav">
      <view class="nav-content">
        <block v-for="(v, i) in navList" :key="i">
          <view class="nav-main" @tap="jumpPage(v.url)">
            <image :src="v.img" mode="scaleToFill" />
            <view class="nav-title">{{ v.navTitle }}</view>
          </view>
        </block>
      </view>
      <view class="but-content">
        <view>
          <JButton @tap="switchOpen" bgColor="rgba(0, 200, 0,0.15)" color="#00C800" bdColor="#00C800" :size="24">切换收款模式
          </JButton>
        </view>
        <view>
          <JButton @tap="open"
            :bgColor="vdata.userInfo.workState == 2 ? 'rgba(0, 128, 255,0.15)' : 'rgba(255, 0, 43,0.15)'"
            :color="vdata.userInfo.workState == 2 ? '#0080FF' : '#FF002B'"
            :bdColor="vdata.userInfo.workState == 2 ? '#0080FF' : '#FF002B'" :size="24">{{
              vdata.userInfo.workState == 1 ? '下班' : vdata.userInfo.workState == 2 ? '上班' : '上班' }}打卡</JButton>
        </view>
        <view>
          <JButton bgColor="rgba(255, 170, 0,0.15)" color="#FFAA00" bdColor="#FFAA00" :size="24" @tap='getFrontAd'>刷新前屏广告
          </JButton>
        </view>
      </view>
      <view style="height: 20rpx"></view>
      <JButton @tap="loginOut" bgColor="transparent" bdColor="rgba(0,0,0,0.1)" color="#FF002B">退出登录</JButton>
    </view>
  </view>
  <uni-popup ref="refWorker" type="center">
    <view class="worker-content">
      <view class="title">{{ vdata.userInfo.workState == 1 ? '下班' : vdata.userInfo.workState == 2 ? '上班' : '上班' }}打卡
      </view>
      <view class="worker-time">请确认打卡时间：{{ dayjs().format('YYYY-MM-DD hh:mm') }}</view>
      <view class="footer-but">
        <view @tap="close">取消</view>
        <view class="confirm"
          @tap="confirmWorker(vdata.userInfo.workState == 1 ? '2' : vdata.userInfo.workState == 2 ? '1' : '1')">确认 </view>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="refSwitch" type="center">
    <view class="switch-model">
      <view class="title">切换模式</view>
      <view class="sub-title">独立收银模式：<view class="model-tag">当前正在使用</view>
      </view>
      <view class="tips">接入电源后即可使用，后屏输入收款金额，前屏支持刷脸支付和扫码支付。</view>
      <view class="sub-title">POS模式：</view>
      <view class="tips">需要连接收银机或PC使用，即插即用，收款将会进入您的现有收银软件账户。</view>
      <view class="pay-model" hover-class="hover-model" hover-stay-time="50" @tap="toPos">
        <image src="/static/iconImg/switch-model.svg" mode="scaleToFill" />
        切换至POS模式
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { $indexPayment, $workRecords, $userInfo, $adBannerList } from '@/http/apiManager'
import { onLoad, onReady, onUnload, onShow } from '@dcloudio/uni-app'
import storageManage from '@/commons/utils/storageManage.js'
import cal from '@/commons/utils/cal.js'
import dayjs from 'dayjs'

onLoad(() => {
  getFrontAd()
  if (storageManage.faceModel() && storageManage.faceModel() == 'pos') return uni.reLaunch({ url: '/pages/payModel/payModel' })
})
onShow(() => {
  getIndexDate()
})
const refWorker = ref(null)
const refSwitch = ref(null)

// 导航栏列表
const navList = [
  {
    img: '/static/indexImg/order.png',
    url: '/pages/order/order',
    navTitle: '订单',
  },
  {
    img: '/static/indexImg/handover.png',
    url: '/pages/handover/handover',
    navTitle: '交班',
  },
  {
    img: '/static/indexImg/statics.png',
    url: '/pages/stat/stat',
    navTitle: '统计',
  },
]
const vdata = reactive({
  userInfo: storageManage.userInfo(), //取出用户信息
  indexData: {},
})
// 查询 当天 收益情况
const getIndexDate = () => {
  $indexPayment().then(({ bizData }) => {
    const { dayCount } = bizData
    vdata.indexData = cal.yuan(dayCount, ['payAmount', 'refundAmount']) //分转元
  })
}

const open = () => refWorker.value.open()
const close = () => refWorker.value.close()
const switchOpen = () => refSwitch.value.open()
// 确认打卡
const confirmWorker = (state) => {
  $workRecords(state).then((res) => {
    uni.showToast({
      title: '打卡成功',
      icon: 'success|none',
      mask: true,
    })
    // 请求用户信息
    return $userInfo().then(({ bizData }) => {
      // 更新用户数据
      storageManage.userInfo(bizData)
      // 更新用户数据
      vdata.userInfo = bizData
      //跳转首页
      close()
    })
  })
}
const loginOut = () => {
  uni.showModal({
    title: '确认推出登录吗',
    content: '',
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if (confirm) {
        storageManage.cleanByLogout()
        uni.reLaunch({
          url: '/pages/login/login',
        })
      }
    },
  })
}
const toFront = () => uni.navigateTo({ url: '/pages/front/front' })
const jumpPage = (url) => uni.navigateTo({ url })
uni.addInterceptor('navigateTo', {
  invoke(args) {
    if (vdata.userInfo.workState != 1 && args.url == '/pages/handover/handover') {
      uni.showModal({
        title: '提示',
        content: '当前状态为，未上班状态，不能进入交班页面，点击确认按钮打卡上班。 ',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            refWorker.value.open()
          }
        },
      })
      return false
    }
  },
})
const toPos = () => {
  uni.showModal({
    title: '提示',
    content: '是否切换为 POS模式？',
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if (confirm) {
        storageManage.faceModel('pos')
        uni.reLaunch({ url: '/pages/payModel/payModel' })
      }
    },
  })
}

const more = () => {
  uni.navigateTo({ url: '/pages/stat/stat' })
}
const getFrontAd = () => {
  const content = { type: 'adBanner', token: storageManage.token(), env: storageManage.env() }
  wxfaceapp.postMsg({
    targetAppid: 'wx4710a1619fbb3714',
    content: JSON.stringify(content),
    success(res) {
      uni.$J.showToast('通知前屏获取广告成功')
      console.log('通信成功', res)
    },
    fail(res) {
      console.log('通信失败  ', res)
    },
  })
}
onUnload(() => {
  uni.removeInterceptor('navigateTo')
})
</script>

<style lang="scss" scoped>
.page-wrapper {
  position: relative;
  min-height: 100vh;
  background: url('/static/indexImg/index-bg.png') no-repeat center center;
  background-size: 100% 100%;
}

.user-info {
  display: flex;
  align-items: center;

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

  .user-nickname {
    margin-left: 20rpx;
    font-weight: 700;
    font-size: 22rpx;
  }
}

// 收益卡片
.index-card {
  margin: 30rpx;
  background: url('/static/indexImg/databg.png') no-repeat center center;
  background-size: 100% 100%;
  border-radius: 22rpx;

  .index-content {
    display: flex;
    justify-content: space-around;

    .index-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 50rpx;
      color: #fff;

      .index-num {
        margin-bottom: 15rpx;
        font-size: 45rpx;
        font-weight: 700;
      }

      .index-title {
        font-size: 24rpx;
        color: rgba($color: #fff, $alpha: 0.6);
      }
    }
  }

  .index-card-footer {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;

    view {
      font-size: 24rpx;
      color: rgba($color: #fff, $alpha: 0.6);
    }
  }
}

// 发起收款
.pay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30rpx 30rpx;
  margin-top: 60rpx;
  height: 145rpx;
  background: url('/static/indexImg/paybg.png') no-repeat center center;
  background-size: 100% 100%;
  color: #fff;
  border-radius: 22rpx;

  image {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 20rpx;
  }

  .pay-text {
    font-weight: 900;
    font-size: 22rpx;
  }
}

// nav 导航
.index-nav {
  position: absolute;
  bottom: 30rpx;
  left: 0;
  right: 0;
  //   background-color: tomato;
  background-color: transparent;

  .nav-content {
    display: flex;
    padding: 0 30rpx;
    justify-content: space-between;
    margin-bottom: 50rpx;

    .nav-main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 25%;
      height: 180rpx;
      background-size: 100% 100%;
      border-radius: 15rpx;
      color: #fff;

      &:nth-child(1) {
        background: url('/static/indexImg/orderbg.png') no-repeat center center;
      }

      &:nth-child(2) {
        background: url('/static/indexImg/handoverbg.png') no-repeat center center;
      }

      &:nth-child(3) {
        background: url('/static/indexImg/staticsbg.png') no-repeat center center;
      }

      image {
        width: 65rpx;
        height: 65rpx;
        margin-bottom: 15rpx;
      }

      .nav-title {
        font-weight: 600;
        font-size: 22rpx;
      }
    }
  }
}

.worker-content {
  padding: 0.1rpx;
  width: 420rpx;
  background-color: #fff;
  border-radius: 14rpx;

  .title {
    margin: 20rpx 0;
    text-align: center;
    font-size: 22rpx;
  }

  .worker-time {
    transform: translateY(25rpx);
    margin-left: 20rpx;
    font-size: 18rpx;
  }

  .footer-but {
    display: flex;
    justify-content: space-around;
    padding: 0 30rpx;
    margin: 40rpx 0;
    margin-top: 65rpx;

    view {
      flex: 0 0 35%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      letter-spacing: 2rpx;
      height: 55rpx;
      background-color: rgba($color: #35d757, $alpha: 0.6);
      border-radius: 14rpx;
    }

    .confirm {
      background-color: #35d757;
    }
  }
}

.but-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  view {
    flex: 1;
  }
}

.switch-model {
  padding: 0.1rpx 20rpx;
  padding-bottom: 30rpx;
  width: 470rpx;
  min-height: 300rpx;
  border-radius: 14rpx;
  background-color: #fff;

  .title {
    margin: 30rpx 0;
    text-align: center;
    font-weight: 600;
    font-size: 18rpx;
  }

  .sub-title {
    font-size: 18px;
    font-weight: 600;

    .model-tag {
      float: right;
      background-color: #27dc70;
      color: #fff;
      padding: 5rpx 10rpx;
      border-radius: 5rpx;
      font-size: 14rpx;
    }
  }

  .tips {
    color: #595959;
    font-size: 15rpx;
    margin: 20rpx 0;
    line-height: 2;
  }

  .pay-model {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    height: 60rpx;
    border: 1rpx solid #1ab345;
    border-radius: 5rpx;
    background-color: rgba(241, 255, 245, 0.3);
    color: #1ab245;
    font-size: 18rpx;
    letter-spacing: 2rpx;

    image {
      margin-right: 8rpx;
      width: 20rpx;
      height: 20rpx;
    }
  }

  .hover-model {
    background-color: #1ab345;
    color: #fff;
  }
}</style>
