<template>
  <navigationTitle :postion="false" :title="'工作台'"></navigationTitle>
  <view class="content">
    <view class="head">
      <view class="head-image">
        <image :src="vdata.userImg"></image>
      </view>
      <view class="head-rignt">
        <view class="head-text">
          <text class="head-title">{{ vdata.userName }}</text>
          <text class="head-id">ID：{{ vdata.userId }}</text>
        </view>
        <view class="head-set" @tap="goSetAccount">
          <image :src="imageInfo.setting"></image>
        </view>
      </view>
    </view>

    <view class="title">
      <text>管理工具</text>
    </view>
    <view class="entrances-body">
      <view class="entrances" :class="{ 'grid-box': vdata.isList === false }">
        <view class="entrance-box" @tap="toPage('applicationManagement')">
          <view class="left">
            <image :src="imageInfo.apply"></image>
            <text>进件管理</text>
          </view>
          <view class="right">
            <image :src="imageInfo.arrowGray"></image>
          </view>
          <!-- <view class="border"></view> -->
          <view class="grid-border"></view>
        </view>
        <view class="entrance-box" @tap="toPage('merchantManagement')">
          <view class="left">
            <image :src="imageInfo.merchant"></image>
            <text>商户管理</text>
          </view>
          <view class="right">
            <image :src="imageInfo.arrowGray"></image>
          </view>
          <!-- <view class="border"></view> -->
          <view class="grid-border"></view>
        </view>
        <view class="entrance-box" @tap="toPage('setUp')">
          <view class="left">
            <image :src="imageInfo.setUp"></image>
            <text>设置</text>
          </view>
          <view class="right" style="border-bottom: none">
            <image :src="imageInfo.arrowGray"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="title">
      <text>数据统计</text>
    </view>
    <view class="header animation-close" :style="{ height: vdata.isA ? '230rpx' : '110rpx' }">
      <view class="date-filter">
        <view
          class="date"
          :class="vdata.selectFlge == item.index ? 'select' : ''"
          v-for="(item, index) in vdata.selectList"
          :key="index"
          @click="onSelsct(index)"
        >
          <text>{{ item.text }}</text>
        </view>
        <view class="close" @click="onClose">
          <image :class="vdata.isA ? 'animation' : ''" src="../../static/indexImg/down.png" mode=""></image>
        </view>
      </view>
      <view class="time-picker">
        <xp-picker @confirm="confirm" mode="ymdhi" :startTime="vdata.startDate">{{ vdata.startDate }}</xp-picker>
        <text>——</text>
        <xp-picker @confirm="confirmEnd" mode="ymdhi" :startTime="vdata.endDate">{{ vdata.endDate }}</xp-picker>
      </view>
    </view>
    <view class="statistics" style="margin-top: 20rpx; background-color: #262e4d">
      <view class="amount">
        <text>收款金额（元）</text>
      </view>
      <view class="money">
        <text>{{ (indexData.payAmount / 100).toFixed(2) }}</text>
      </view>
      <view class="other">
        <view class="deal-amount">
          <text>收款笔数（笔）</text>
          <text style="color: #ffffff; font-size: 28rpx">{{ indexData.payCount }}</text>
        </view>
        <view class="refund">
          <text>退款金额（元）</text>
          <text style="color: #ffffff; font-size: 28rpx">{{ (indexData.refundAmount / 100).toFixed(2) }}</text>
        </view>
        <view class="refund-amount">
          <text>退款笔数（笔）</text>
          <text style="color: #ffffff; font-size: 28rpx">{{ indexData.refundCount }}</text>
        </view>
      </view>
    </view>
    <view class="statistics" style="background-color: #3981ff; border-radius: 0 0 20rpx 20rpx">
      <view class="amount">
        <text>商户总数</text>
      </view>
      <view class="money" style="color: #ffffff">
        <text>{{ vdata.mchCount.mchAllCount }}</text>
      </view>
      <view class="other">
        <view class="deal-amount">
          <text>新增商户数</text>
          <text style="color: #ffffff; font-size: 28rpx">{{ vdata.mchCount.mchTodayAddCount }}</text>
        </view>
        <view class="refund">
          <text>入网商户数</text>
          <text style="color: #ffffff; font-size: 28rpx">{{ vdata.mchCount.mchOnNetCount }}</text>
        </view>
        <view class="refund-amount">
          <text>新增入网商户数</text>
          <text style="color: #ffffff; font-size: 28rpx">{{ vdata.mchCount.mchOnNetNewCount }}</text>
        </view>
      </view>
    </view>
    <view class="footer"> </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { $statistics, $payIfDefines, $getUserInfo, $getPayDayCount, $getPayConfigIfcodes } from "@/http/apiManager.js"
import { onLoad, onBackPress, onShow } from "@dcloudio/uni-app"
import { intNum } from "@/util/intNumber.js"
import { getDay } from "@/util/timeInterval.js"
import navigationTitle from "@/components/jeepayNavigationTitle/jeepayNavigationTitle.vue"
const baseImage = ref("/static/iconImg/")
const blanceInfo = ref({})
const imageInfo = reactive({
  setting: baseImage.value + "setting.svg",
  close: baseImage.value + "icon-close.svg",
  eyeClose: baseImage.value + "eye-close.svg",
  list: baseImage.value + "grid.svg",
  arrow: baseImage.value + "arrow-right.svg",
  arrowGray: baseImage.value + "arrow-right-gray.svg",
  apply: "/static/navImg/nav-jinjian.svg",
  merchant: "/static/navImg/nav-shangdian.svg",
  setUp: "/static/iconImg/setting.svg",
  mch: baseImage.value + "store.svg",
})
const indexData = ref({})
const otherData = ref({})
const vdata = reactive({
  amount: 0,
  isPassword: true,
  isList: false,
  mchAllCount: 0,
  mchTodayAddCount: 0,
  userImg: "",
  userName: "",
  userId: "",
  isA: false, //动画
  isS: false,
  selectFlge: 0, //时间选择框标志符
  startDate: "", //开始时间
  endDate: "", //结束时间
  selectList: [
    { index: 0, value: "today", text: "今天" },
    { index: 1, value: "yesterday", text: "昨天" },
    { index: 2, value: "week", text: "近7天" },
    { index: 3, value: "mounth", text: "近30天" },
    { index: 4, value: "customer", text: "自定义" },
  ],
  searchObj: {
    isApp: true,
    queryDateRange: "today",
  },
  staticObj: {
    isApp: true,
    queryDateRange: "today",
    countType: 1,
    agentNo: "",
  },
  mchCount: {},
})
const withdrawalPopup = ref()

onLoad(() => {
  vdata.startDate = `${getDay(0, "-")} 00:00`
  vdata.endDate = `${getDay(0, "-")} 23:59`
})
onShow(() => {
  $getUserInfo().then(({ bizData }) => {
    vdata.userImg = bizData.avatarUrl
    vdata.userName = bizData.realname
    vdata.userId = bizData.sysUserId
  })
  getStatistics(vdata.staticObj)
})

const getStatistics = (staticObj) => {
  $statistics(staticObj).then(({ bizData }) => {
    otherData.value = bizData
    vdata.mchCount = bizData.mchCount
    vdata.orderCount = bizData.orderCount
    vdata.agentCount = bizData.agentCount
    indexData.value = bizData.orderCount
  })
}
const onSelsct = (index) => {
  vdata.selectFlge = index

  switch (index) {
    case 0:
      vdata.startDate = `${getDay(0, "-")} 00:00`
      vdata.endDate = `${getDay(0, "-")} 23:59`
      vdata.staticObj.queryDateRange = "today"

      getStatistics(vdata.staticObj)
      break
    case 1:
      vdata.startDate = `${getDay(-1, "-")} 00:00`
      vdata.endDate = `${getDay(-1, "-")} 23:59`
      vdata.staticObj.queryDateRange = "yesterday"

      getStatistics(vdata.staticObj)
      break
    case 2:
      vdata.startDate = `${getDay(-7, "-")} 00:00`
      vdata.endDate = `${getDay(0, "-")} 23:59`
      vdata.staticObj.queryDateRange = "near2now_7"

      getStatistics(vdata.staticObj)
      break
    case 3:
      vdata.startDate = `${getDay(-30, "-")} 00:00`
      vdata.endDate = `${getDay(0, "-")} 23:59`
      vdata.staticObj.queryDateRange = "near2now_30"

      getStatistics(vdata.staticObj)
      break
    case 4:
      if (!vdata.isA) {
        vdata.isA = true
      }
      vdata.startDate = `${getDay(0, "-")} 00:00`
      vdata.endDate = `${getDay(0, "-")} 23:59`
      break
  }
}
//时间选择器确定
const confirm = (e) => {
  vdata.startDate = e.value
  vdata.selectFlge = 4
  // vdata.staticObj.queryDateRange = `customDate_${vdata.startDate}:00_${vdata.endDate}:59`
  // getStatistics(vdata.staticObj)
}
const confirmEnd = (e) => {
  vdata.endDate = e.value
  vdata.selectFlge = 4

  vdata.staticObj.queryDateRange = `customDate_${vdata.startDate}:00_${vdata.endDate}:59`

  getStatistics(vdata.staticObj)
}
const onClose = () => {
  vdata.isA = !vdata.isA
}
function toPage(path) {
  if (path === "applicationManagement") {
    // 获取进件列表的颜色 和 icon,给下一个页面用，因为异步请求的原因，所以在这里进行处理
    let iconList = ref([])

    $getPayConfigIfcodes("CURRENT", "agentApplyment", "").then(({ bizData }) => {
      bizData.forEach((item) => {
        iconList.value.push([item.bgColor, item.ifCode, item.icon])
      })
      uni.navigateTo({
        url: `/pageApply/applyList?iconList=${JSON.stringify(iconList.value)}`,
      })
    })

    return
  }
  uni.navigateTo({
    url: `../../pageWork/${path}/${path}`,
  })
}

let isShowSun = ref(false)
// 切换函数 睁眼闭眼 与 管理工具排列
function switchButton(sign) {
  if (sign === "eye") {
    vdata.isPassword = !vdata.isPassword
    if (!vdata.isPassword) {
      isShowSun.value = true
      imageInfo.eyeClose = "../../static/workImg/eye-open.svg"
    } else {
      isShowSun.value = false
      imageInfo.eyeClose = "../../static/workImg/eye-close.svg"
    }
  } else if (sign === "format") {
    vdata.isList = !vdata.isList
    if (!vdata.isList) {
      imageInfo.list = "../../static/workImg/grid.svg"
    } else {
      imageInfo.list = "../../static/workImg/list.svg"
    }
  }
}

function toTabPage(path) {
  uni.switchTab({
    url: `../${path}/${path}`,
  })
}
function goSetAccount() {
  uni.navigateTo({
    url: "../../pageWork/setUp/setUp",
  })
}
</script>
<style>
page {
  background: #f5f6fc;
}
</style>
<style lang="scss" scoped>
.content {
  .animation-close {
    transition: height 0.5s;
  }
  .animation {
    transform: rotate(-180deg);
  }
  .select {
    padding: 10rpx 10rpx;
    border-radius: 10rpx;
    background: rgba(57, 129, 255, 0.1);
    font-weight: 500;
    color: #3981ff;
  }
  box-sizing: border-box;
  // padding: 0 50rpx;
  image {
    display: block;
  }

  .head,
  .banner-box,
  .title,
  .entrances-body {
    box-sizing: border-box;
    padding: 0 50rpx;
  }
  .head {
    display: flex;
    width: 100%;
    height: 90rpx;
    margin: 30rpx 0 50rpx 0;
    .head-image {
      width: 90rpx;
      height: 90rpx;
      border-radius: 20rpx;
      overflow: hidden;
      //margin-right: 10rpx;
      flex-shrink: 0;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .head-rignt {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      margin-left: 10rpx;

      .head-text {
        display: flex;
        flex-direction: column;
        .head-title {
          font-size: 30rpx;
          font-weight: 700;
          color: #292f46;
        }
        .head-id {
          font-size: 22rpx;
          color: #adacb3;
        }
      }
      .head-set {
        width: 40rpx;
        height: 40rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .light {
    background: #3981ff !important;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40rpx;
    margin: 50rpx 0 30rpx 10rpx;
    text {
      font-size: 28rpx;
      font-weight: 700;
    }
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .grid-box {
    /* 九宫格 */
    display: flex;
    flex-wrap: wrap;
    .entrance-box {
      position: relative;
      width: 33.33% !important;
      height: 200rpx !important;
      box-sizing: border-box !important;
      justify-content: center !important;
      align-items: center !important;
      .left {
        flex-direction: column !important;
        image {
          margin: 0 auto 22rpx auto !important;
        }
      }
      .right {
        image {
          display: none !important;
        }
      }
      .grid-border {
        display: block !important;
        position: absolute;
        right: 0;
        width: 2rpx;
        height: 200rpx;
        background: #f0f1f7;
      }
    }
  }

  .entrances {
    border-radius: 20rpx;
    overflow: hidden;
    .entrance-box {
      display: flex;
      justify-content: space-between;
      padding-left: 30rpx;
      height: 110rpx;
      background: #fff;
      position: relative;
      .left {
        display: flex;
        align-items: center;
        image {
          margin-right: 20rpx;
          width: 50rpx;
          height: 50rpx;
        }
        text {
          color: #797b80;
          font-size: 27rpx;
          font-weight: 500;
        }
      }
      .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 30rpx;
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .border {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 550rpx;
        height: 2rpx;
        background: #f0f1f7;
      }
      .grid-border {
        display: none;
      }
    }
  }
  .roll-links {
    width: 100%;
    height: 650rpx;
    .swiper {
      width: 100%;
      height: 500rpx;
      position: relative;
      box-sizing: border-box;
      .position-item {
        position: absolute;
        left: -160rpx;
        top: 0;
      }
      .first-item,
      .second-item,
      .more {
        position: relative;
        border-radius: 20rpx;
        height: 500rpx;
        overflow: hidden;
        image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        .swiper-text-box {
          position: relative;
          width: 100%;
          height: 100%;
          z-index: 9;
          box-sizing: border-box;
          padding: 50rpx 0 0 50rpx;
          .swiper-text {
            display: flex;
            flex-direction: column;
            margin-bottom: 40rpx;
            .swiper-title {
              display: block;
              color: rgba(255, 255, 255, 0.5);
              font-size: 25rpx;
              margin-bottom: 15rpx;
            }
            .swiper-amount {
              font-size: 40rpx;
              font-weight: 700;
              color: #ffffff;
            }
          }
        }
      }
      .first-item {
        width: 500rpx;
        margin-left: 50rpx;
      }
      .second-item {
        width: 570rpx;
        display: flex;
        image {
          width: 325rpx;
          border-radius: 20rpx;
        }
        .more {
          width: 330rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #fff;
          text {
            color: #797b80;
          }
        }
      }
    }
  }
  .header {
    box-sizing: border-box;

    //height: 335rpx;
    width: 650rpx;
    background-color: #ffffff;
    border-radius: 20rpx;

    margin: 20rpx auto;
    margin-bottom: 0;
    overflow: hidden;

    .date-filter {
      box-sizing: border-box;
      height: 90rpx;
      width: 100%;
      // background-color: #18BC37;

      //border-bottom: 2rpx solid #FAFBFC;

      display: flex;
      justify-content: space-between;
      align-items: center;

      padding-left: 20rpx;
      padding-right: 20rpx;
      padding-top: 20rpx;
      // padding-bottom: 20rpx;

      .date {
        //width: 92rpx;
        //height: 53rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        padding: 10rpx 10rpx;
      }
      .close {
        height: 60rpx;
        width: 60rpx;
        // background-color: #007AFF;
        //transform: rotate(180deg);
        image {
          height: 60rpx;
          width: 60rpx;

          transition: transform 0.5s;
        }
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    }
    .time-picker {
      box-sizing: border-box;
      width: 610rpx;
      height: 72rpx;
      border-radius: 10rpx;
      background: #f5f6fc;

      margin: 36rpx auto;

      display: flex;
      justify-content: space-between;
      align-items: center;

      padding-left: 20rpx;
      padding-right: 20rpx;

      font-size: 25rpx;

      overflow: hidden;
    }
  }
  .statistics {
    box-sizing: border-box;

    overflow: hidden;

    width: 650rpx;
    height: 368rpx;
    border-radius: 20rpx;
    background: #3981ff;
    border-radius: 20rpx 20rpx 0 0;
    margin: 0 auto;

    display: flex;
    flex-direction: column;

    padding: 50rpx 35rpx 50rpx 35rpx;
    .amount {
      height: 40rpx;

      font-weight: 500;
      font-size: 23rpx;
      color: rgba(255, 255, 255, 0.6);
    }
    .money {
      // background-color: #18BC37;

      display: flex;
      align-items: center;

      font-weight: bold;
      font-size: 70rpx;
      color: #fff;

      padding: 10rpx 0 50rpx 0;
    }
    .other {
      height: 100rpx;
      width: 100%;
      // background-color: #18BC37;

      display: flex;
      justify-content: space-between;
      .deal-amount {
        height: 85%;
        width: 30%;
        //background: #555500;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        font-weight: 500;
        font-size: 23rpx;
        color: rgba(255, 255, 255, 0.6);
      }
      .refund {
        @extend .deal-amount;
      }
      .refund-amount {
        @extend .deal-amount;
      }
    }
  }
  .footer {
    height: 1rpx;
    width: 100%;
    margin-top: 30rpx;
  }
}
</style>
