<template>
  <!-- 自定义工作台头部 -->
  <NavBar :count="state.count" :title="'工作台'"></NavBar>
  <view
    class="contaner"
    :style="{
      marginTop: navbarRect.height + navbarRect.top + 'px',
      height: navbarRect.safeHeight + 'px',
    }"
  >
    <!-- 筛选条件 -->
    <view class="time-filter">
      <up-text
        v-for="item in timeList"
        :key="item.id"
        :text="item.name"
        :color="`${
          stateNew.filterTimeValue === item.name ? '#00DCEE' : '#999999'
        }`"
        :size="'32rpx'"
        @click="handleFilter(item)"
      ></up-text>
    </view>
    <!-- 数据汇总面板 -->
    <view class="summary">
      <view class="panel" v-for="(item, index) in summaryList" :key="index">
        <image
          :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pages/${item.imgUrl}`"
        />
        <view class="box">
          <view class="num">{{ formatMoney(item.num, 2) }}</view>
          <view class="title">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 其他核心模块 -->
    <view class="core-content">
      <view>
        <text class="title">收货入库</text>
        <up-grid :border="false">
          <up-grid-item
            v-for="(item, index) in stateNew.receiveList"
            :key="index"
            @click="handleClick(item)"
          >
            <up-badge
              max="99"
              :value="item.num"
              :absolute="true"
              :offset="[10, 10]"
            ></up-badge>
            <up-image
              :src="`/static/img/home/${item.icon}`"
              width="184rpx"
              height="162rpx"
            ></up-image>
            <view class="name">{{ item.title }}</view>
          </up-grid-item>
        </up-grid>
      </view>
      <view style="margin-top: 30rpx">
        <text class="title title-shipment">出货销售</text>
        <up-grid :border="false">
          <up-grid-item
            v-for="(item, index) in stateNew.shipmentList"
            :key="index"
          >
            <up-badge
              max="99"
              :value="item.num"
              :absolute="true"
              :offset="[10, 10]"
            ></up-badge>
            <up-image
              :src="`/static/img/home/${item.icon}`"
              width="184rpx"
              height="162rpx"
            ></up-image>
            <view class="name">{{ item.title }}</view>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
    <!-- <up-empty
      v-if="
        !isShowModule(receiveList.concat(shipmentList)) &&
        !isShowModule(appList)
      "
      mode="permission"
      icon="http://cdn.uviewui.com/uview/empty/permission.png"
      :text="'暂无相关权限, 请联系管理员'"
    >
    </up-empty> -->
  </view>

  <TabBar />
</template>

<script setup lang="ts">
import { timeList, homeInitData } from "@/utils/data";
import { useMemberStore } from "@/store/index";
import {
  MessageApi,
  ProfileApi,
  ReceiveApi,
  ShipmentApi,
} from "@/services/index";
import TabBar from "@/components/TabBar/index.vue";
import { formatMoney } from "@/utils";
import { onBackPress, onShow } from "@dcloudio/uni-app";
import pinia from "@/store";

const store = useMemberStore(pinia);
const navbarRect = reactive({
  height: 42,
  top: 48,
  safeHeight: 500,
});

const getSafeHeight = () => {
  // #ifdef APP-PLUS || MP-WEIXIN
  uni.getSystemInfo({
    success: (res) => {
      navbarRect.safeHeight =
        res.windowHeight - 50 - navbarRect.top - navbarRect.height;
    },
  });
  // #endif
};

const stateNew = reactive({
  filterTimeValue: "本月",
  receiveList: homeInitData.receiveList,
  shipmentList: homeInitData.shipmentList,
});
const handleFilter = (item: { id: number; name: string }) => {
  stateNew.filterTimeValue = item.name;
};

const summaryList = reactive([
  {
    title: "总收货/KG",
    num: 0,
    imgUrl: "01.png",
  },
  {
    title: "收货总支出/元",
    num: 0,
    imgUrl: "02.png",
  },
  {
    title: "总出货/KG",
    num: 0,
    imgUrl: "03.png",
  },
  {
    title: "出货总收入/元",
    num: 0,
    imgUrl: "04.png",
  },
]);
const state = reactive({
  count: 0,
});
const init = () => {
  // 消息统计
  MessageApi.getUserNoticeInfoNumVo().then((res: any) => {
    if (res.code === 200) {
      state.count = res.data.unreadNoticeNum;
    }
  });
  // 收货入库相关信息
  ReceiveApi.countOrderByMonth().then((res) => {
    if (res.code === 200) {
      const {
        totalReceipt,
        totalExpenditure,
        toBePriced,
        toBeTare,
        audit,
        toBePaid,
      } = res.data;
      summaryList[0].num = totalReceipt;
      summaryList[1].num = totalExpenditure;
      stateNew.receiveList[0].num = toBePriced;
      stateNew.receiveList[1].num = toBeTare;
      stateNew.receiveList[2].num = audit;
      stateNew.receiveList[3].num = toBePaid;
    }
  });
  // 出货相关信息
  ShipmentApi.countOrderByMonth().then((res) => {
    if (res.code === 200) {
      const {
        totalShipment,
        totalIncome,
        toBeShipped,
        roughWeight,
        shipmentReview,
        toBeSettled,
      } = res.data;
      summaryList[2].num = totalShipment;
      summaryList[3].num = totalIncome;
      stateNew.shipmentList[0].num = toBeShipped;
      stateNew.shipmentList[1].num = roughWeight;
      stateNew.shipmentList[2].num = shipmentReview;
      stateNew.shipmentList[3].num = toBeSettled;
    }
  });

  // 重新获取权限
  ProfileApi.getUserInfo().then((res: any) => {
    if (res.code === 200) {
      store.setProfile({ ...res.data, token: store.profile.token });
    }
  });
};
const handleClick = (item: any) => {
  uni.navigateTo({
    url: item.path, // 要跳转到的页面路径
  });
};
onMounted(() => {
  // #ifdef MP-WEIXIN
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  navbarRect.height = menuButtonInfo.height;
  navbarRect.top = menuButtonInfo.top;
  getSafeHeight();
  // #endif
  // #ifndef MP-WEIXIN
  const systemInfo = uni.getSystemInfoSync();
  navbarRect.safeHeight = (systemInfo.safeArea as any).height;
  getSafeHeight();
  // #endif
});
onShow(() => {
  if (store.profile?.token) {
    init();
  } else {
    // 当应用启动时,检查是否已显示过启动页
    if (Boolean(uni.getStorageSync("hasLaunched"))) {
      // 如果已显示过,不再显示启动页
      uni.reLaunch({
        url: "/pagesLogin/login/index",
      });
    } else {
      // 如果未显示过,标记为已显示,并保存到存储
      uni.setStorageSync("hasLaunched", true);
      uni.reLaunch({ url: "/pagesLaunch/index" });
    }
  }
});
</script>

<style lang="scss" scoped>
.contaner {
  padding: 17rpx;
  /* #ifdef H5 */
  height: calc(100vh - 67px - 70px) !important;
  /* #endif */
  overflow: auto;
  .time-filter {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 16rpx 130rpx;
    > view {
      justify-content: center;
    }
  }

  .summary {
    .panel {
      width: 50%;
      display: inline-block;
      height: 155rpx;
      position: relative;
      // background: url('/static/img/01.png');
      image {
        width: 100%;
        height: 100%;
      }
      .box {
        position: absolute;
        padding: 20rpx 0rpx 0rpx 40rpx;
        margin-top: -155rpx;
        .num {
          font-size: 40rpx;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #ffffff;
        }
        .title {
          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }

  .core-content {
    padding: 22rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
    border-radius: 13rpx;
    position: relative;
    .title {
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #000000;
      padding-left: 20rpx;
      &::before {
        content: "";
        position: absolute;
        margin-top: 6px;
        margin-left: -20rpx;
        width: 6rpx;
        height: 26rpx;
        background: #22d594;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
        border-radius: 3rpx;
      }
    }
    .title-shipment {
      &::before {
        content: "";
        background: #ff782b;
      }
    }
    .name {
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
    }
    ::v-deep.u-grid-item {
      padding: 22rpx 0rpx 0rpx 0rpx;
    }
    ::v-deep.u-badge {
      z-index: 999;
    }
  }
}
</style>