<template>
  <!-- 自定义工作台头部 -->
  <NavBar></NavBar>
  <view
    class="contaner"
    :style="{
      marginTop: navbarRect.height + navbarRect.top + 'px',
      height: navbarRect.safeHeight + 'px',
    }"
  >
    <!-- 数据汇总面板 -->
    <!-- `url('/static/img/${item.imgUrl}')`, -->
    <view class="summary">
      <!-- :style="{
          'background': 'url(\'/static/img/'+ item.imgUrl +'\')',
          backgroundSize: 'cover',
        }" -->
      <view class="panel" v-for="(item, index) in summaryList" :key="index">
        <image :src="`/static/img/${item.imgUrl}`" />
        <view class="box">
          <view class="num">{{ item.num }}</view>
          <view class="title">{{ item.title }}</view>
        </view>
      </view>
    </view>

    <view class="data-detail">
      <view class="p-15">
        <!-- 收货入库 -->
        <text class="title">收货入库</text>
        <view class="data-receive">
          <up-row justify="center" gutter="10">
            <up-col span="3" v-for="(item, index) in receiveList" :key="index" @click="(item as any).fn()">
              <view
                class="box"
                :style="{
                  backgroundColor: boxStyleList[index].backgroundColor,
                  borderColor: boxStyleList[index].borderColor,
                  boxShadow: `0rpx 7rpx 12rpx 0rpx ${boxStyleList[index].shadowColor}`,
                }"
              >
                <view
                  class="num"
                  :style="{ color: boxStyleList[index].numColor }"
                >
                  <text>{{ item.num }}</text>
                </view>
                <view class="desc">
                  <text>{{ item.title }}</text>
                </view>
              </view>
            </up-col>
          </up-row>
        </view>

        <!-- 出货入库 -->
        <text class="title title-shipment">出货入库</text>
        <view class="data-shipment">
          <up-row justify="center" gutter="10">
            <up-col span="3" v-for="(item, index) in shipmentList" :key="index" @click="(item as any).fn()">
              <view
                class="box"
                :style="{
                  backgroundColor: boxStyleList[index].backgroundColor,
                  borderColor: boxStyleList[index].borderColor,
                  boxShadow: `0rpx 7rpx 12rpx 0rpx ${boxStyleList[index].shadowColor}`,
                }"
              >
                <view
                  class="num"
                  :style="{ color: boxStyleList[index].numColor }"
                >
                  <text>{{ item.num }}</text>
                </view>
                <view class="desc">
                  <text>{{ item.title }}</text>
                </view>
              </view>
            </up-col>
          </up-row>
        </view>
      </view>

      <!-- 线条 -->
      <view class="line"> </view>

      <!-- 常用应用 -->
      <view class="app-list">
        <view class="name">常用应用</view>
        <u-grid :border="false" col="4">
          <u-grid-item v-for="(item, listIndex) in appList" :key="listIndex" @click="item.fn">
            <up-image
              :src="`/static/img/${item.icon}`"
              width="40rpx"
              height="40rpx"
            ></up-image>
            <text class="grid-text">{{ item.title }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
  </view>

  <!-- 工作台底部菜单 -->
  <view>
    <view class="tabBar">
      <view class="tabMenuBox">
        <view class="circle-box"></view>
        <u-grid :border="false">
          <u-grid-item
            v-for="(item, listIndex) in tabMenuList"
            :key="listIndex"
            @click="item.fn"
          >
            <up-image
              :src="`/static/img/TabMenu/${item.icon}`"
              width="33rpx"
              height="40rpx"
              mode="aspectFill"
              class="grid-icon"
            ></up-image>
            <text
              class="grid-text"
              :style="{ color: listIndex === 1 ? '#fff' : '' }"
              >{{ item.title }}</text
            >
          </u-grid-item>
        </u-grid>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useMemberStore } from "@/store/index";
import { ReceiveApi, ShipmentApi } from "@/services/index";
const store = useMemberStore();
const navbarRect = reactive({
  height: 32,
  top: 28,
  safeHeight: 500,
});

const getSafeHeight = () => {
  // #ifdef APP-PLUS || MP-WEIXIN
  uni.getSystemInfo({
    success: (res) => {
      navbarRect.safeHeight =
        res.windowHeight -
        uni.upx2px(80) -
        navbarRect.height -
        navbarRect.top -
        40 -
        17;
    },
  });
  // #endif
};
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 boxStyleList = reactive([
  {
    borderColor: "rgba(240, 147, 107, 1)",
    backgroundColor: "#FFFAF7",
    shadowColor: "rgba(146,44,0,0.2)",
    numColor: "rgba(240, 145, 105, 1)",
  },
  {
    borderColor: "rgba(218, 193, 88, 1)",
    backgroundColor: "#FFFEF7",
    shadowColor: "rgba(138,111,0,0.2)",
    numColor: "rgba(217, 193, 88, 1)",
  },
  {
    borderColor: "rgba(88, 173, 232, 1)",
    backgroundColor: "#F7FCFF",
    shadowColor: "rgba(8, 82, 92, 0.20)",
    numColor: "rgba(88, 173, 232, 1)",
  },
  {
    borderColor: "rgba(82, 210, 207, 1)",
    backgroundColor: "#F7FFFF",
    shadowColor: "rgba(0, 106, 103, 0.20)",
    numColor: "rgba(84, 212, 208, 1)",
  },
]);

const receiveList = reactive([
  {
    title: "待定价",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pages/index/pricing", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "待过皮重",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pages/index/tareing", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "付款审核",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pages/index/payReview", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "待支付",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pages/index/payReview", // 要跳转到的页面路径
      });
    },
  },
]);
const shipmentList = reactive([
  {
    title: "待出货",
    num: 999,
    fn: () => {
      uni.navigateTo({
        url: "/pages/index/shipmenting", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "待过毛重",
    num: 999,
    fn: () => {
      uni.navigateTo({
        url: "/pages/index/grossWeight", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "出货结算",
    num: 999,
    fn: () => {
      uni.navigateTo({
        url: "/pages/index/payReview", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "待结算",
    num: 999,
    fn: () => {
      uni.navigateTo({
        url: "/pages/index/payReview", // 要跳转到的页面路径
      });
    },
  },
]);

const appList = reactive([
  {
    icon: "app1.png",
    title: "收货补单",
    fn: () => {
      uni.navigateTo({
        url: "/pages/app/receiveSpl", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "app2.png",
    title: "出货补单",
    fn: () => {
      uni.navigateTo({
        url: "/pages/app/shipmentSpl", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "app4.png",
    title: "收货明细",
    fn: () => {
      uni.navigateTo({
        url: "/pages/app/receiveDetail", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "app3.png",
    title: "出货明细",
    fn: () => {
      uni.navigateTo({
        url: "/pages/app/shipmentDetail", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "app5.png",
    title: "收货作废",
    fn: () => {
      uni.navigateTo({
        url: "/pages/app/receiveCl", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "app6.png",
    title: "出货作废",
    fn: () => {
      uni.navigateTo({
        url: "/pages/app/shipmentCl", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "app7.png",
    title: "供应商管理",
    fn: () => {
      uni.navigateTo({
        url: "/pages/app/supplierMgt", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "app8.png",
    title: "客户管理",
    fn: () => {
      uni.navigateTo({
        url: "/pages/app/customerMgt", // 要跳转到的页面路径
      });
    },
  },
]);

const tabMenuList = reactive([
  {
    icon: "statistics.png",
    title: "统计",
    fn: () => {
      uni.navigateTo({
        url: "/pages/statistics/index", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "home.png",
    title: "工作台",
  },
  {
    icon: "profile.png",
    title: "我的",
    fn: () => {
      uni.navigateTo({
        url: "/pages/profile/index", // 要跳转到的页面路径
      });
    },
  },
]);

// 收货入库相关信息
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
    receiveList[0].num = toBePriced
    receiveList[1].num = toBeTare
    receiveList[2].num = audit
    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
    shipmentList[0].num = toBeShipped
    shipmentList[1].num = roughWeight
    shipmentList[2].num = shipmentReview
    shipmentList[3].num = toBeSettled
  }
});
onMounted(() => {
  // #ifdef APP-PLUS || MP-WEIXIN
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  navbarRect.height = menuButtonInfo.height;
  navbarRect.top = menuButtonInfo.top;
  getSafeHeight();
  // #endif
  // 获取统计数据
});
</script>

<style lang="scss" scoped>
.contaner {
  padding: 17rpx;
  /* #ifdef H5 */
  height: calc(100vh - 67px - 70px) !important;
  /* #endif */
  overflow: auto;
  .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;
        }
      }
    }
  }

  .p-15 {
    padding: 15rpx;
  }
  .data-detail {
    margin-top: 15rpx;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
    border-radius: 13rpx;
    position: relative;
    .title {
      font-size: 27rpx;
      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;
      }
    }

    .data-receive,
    .data-shipment {
      margin: 15rpx 15rpx 15rpx;
      .box {
        width: 141.15rpx;
        height: 141.15rpx;
        background: #fffaf7;
        border: 1px solid #f0936b;
        box-shadow: 0rpx 7rpx 12rpx 0rpx rgba(146, 44, 0, 0.2);
        border-radius: 26rpx;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
        // display: flex;
        // align-items: center;
        position: relative;
        top: 50%;
        // transform: translateY(-50%);
        .num {
          font-size: 32rpx;
          font-family: Source Han Sans CN;
          font-weight: bold;
          /* #ifdef H5 */
          margin-top: 0.7rem;
          /* #endif */
        }
        .desc {
          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #000000;
        }
      }
    }
    .data-shipment {
      margin-bottom: 21rpx;
    }

    .line {
      height: 18rpx;
      background: #f8f8f8;
    }

    .app-list {
      padding: 15rpx;
      padding-bottom: 0rpx;
      .name {
        text-align: center;
        font-size: 27rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #000000;
        margin-bottom: 20rpx;
      }
      .grid-text {
        margin-top: 17rpx;
        margin-bottom: 20rpx;
        font-size: 24rpx;
      }
    }
  }
}
.tabBar {
  background: url("/static/img/TabMenu/bg.png");
  height: 140rpx;
  background-size: cover;
  position: sticky;
  width: 100%;
  bottom: 0px;
  .tabMenuBox {
    padding-top: 30rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;

    .grid-text {
      margin-top: 10rpx;
    }
    .circle-box {
      width: 154rpx;
      height: 154rpx;
      background: linear-gradient(0deg, #1992ef, #00f6ff);
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 50, 100, 0.12);
      border-radius: 50%;
      font-weight: 500;
      color: #ffffff;
      position: absolute;
      margin-top: -49rpx;
      margin-left: calc(50% - 78rpx);
    }
    .normal-box {
      width: 150rpx;
      height: 150rpx;
      text-align: center;
    }
  }
}
</style>
