<template>
  <!-- 自定义工作台头部 -->
  <NavBar :count="state.count" :title="'工作台'"></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="`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="data-detail">
      <view
        class="p-15"
        v-if="isShowModule(receiveList) || isShowModule(shipmentList)"
      >
        <!-- 收货入库 -->
        <view v-if="isShowModule(receiveList)">
          <text class="title">收货入库</text>
          <view class="data-receive">
            <up-row justify="flex-start" gutter="10">
              <up-col
                span="3"
                v-for="(item, index) in receiveList"
                :key="index"
                @click="(item as any).fn()"
                :customStyle="{
                  display: isShowModule([{ title: item.title }]) ? '' : 'none',
                }"
              >
                <view
                  v-if="isShowModule([{ title: item.title }])"
                  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 v-if="isShowModule(shipmentList)">
          <text class="title title-shipment">出货销售</text>
          <view class="data-shipment">
            <up-row justify="flex-start" gutter="10">
              <up-col
                span="3"
                v-for="(item, index) in shipmentList"
                :key="index"
                @click="(item as any).fn()"
                :customStyle="{
                  display: isShowModule([{ title: item.title }]) ? '' : 'none',
                }"
              >
                <view
                  v-if="isShowModule([{ title: item.title }])"
                  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>

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

      <!-- 常用应用 -->
      <view class="app-list" v-if="isShowModule(appList)">
        <view class="name">常用应用</view>
        <u-grid :border="false" col="4">
          <u-grid-item
            v-for="(item, listIndex) in appList"
            :key="listIndex"
            @click="item.fn"
            :customStyle="{
              display: isShowModule([{ title: item.title }]) ? '' : 'none',
            }"
          >
            <up-image
              v-if="isShowModule([{ title: item.title }])"
              :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pagesHome/${item.icon}`"
              width="60rpx"
              height="60rpx"
            ></up-image>
            <text
              class="grid-text"
              v-if="isShowModule([{ title: item.title }])"
              >{{ item.title }}</text
            >
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <!-- 当收货 出货 常用app全部为空 显示暂无权限 -->
    <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 { 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 -
        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: "/pagesReceive/pricing?scaleStatus=0", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "待过皮重",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pagesReceive/pricing?scaleStatus=1", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "付款审核",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pagesReceive/payReview?scaleStatus=2", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "待支付",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pagesReceive/payReview?scaleStatus=3", // 要跳转到的页面路径
      });
    },
  },
]);
const shipmentList = reactive([
  {
    title: "待出货",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pagesShipment/shipmenting?scaleStatus=0", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "待过毛重",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pagesShipment/shipmenting?scaleStatus=1", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "出货结算",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pagesShipment/shipmentSettlement?scaleStatus=2", // 要跳转到的页面路径
      });
    },
  },
  {
    title: "待结算",
    num: 0,
    fn: () => {
      uni.navigateTo({
        url: "/pagesShipment/shipmentSettlement?scaleStatus=3", // 要跳转到的页面路径
      });
    },
  },
]);

const appList = reactive([
  {
    icon: "01.png",
    title: "收货补单",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/receiveSpl", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "03.png",
    title: "收货明细",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/receiveDetail", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "05.png",
    title: "收货作废",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/receiveCl", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "07.png",
    title: "供应商管理",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/supplierMgt", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "02.png",
    title: "出货补单",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/shipmentSpl", // 要跳转到的页面路径
      });
    },
  },

  {
    icon: "04.png",
    title: "出货明细",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/shipmentDetail", // 要跳转到的页面路径
      });
    },
  },

  {
    icon: "06.png",
    title: "出货作废",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/shipmentCl", // 要跳转到的页面路径
      });
    },
  },

  {
    icon: "08.png",
    title: "客户管理",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/customerMgt", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "11.png",
    title: "收货产品",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/receiveProduct", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "10.png",
    title: "收货分类",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/receiveType", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "09.png",
    title: "出货产品",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/shipmentProduct", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "18.png",
    title: "出货分类",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/shipmentType", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "14.png",
    title: "人员管理",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/user", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "15.png",
    title: "权限管理",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/role", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "17.png",
    title: "供应商分类",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/supplierType", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "16.png",
    title: "库存卡管理",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/stockCard", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "12.png",
    title: "支付明细",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/paymentDetail", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "13.png",
    title: "收入明细",
    fn: () => {
      uni.navigateTo({
        url: "/pagesApp/incomeDetail", // 要跳转到的页面路径
      });
    },
  },
]);

// 收货、出货、常用app是否显示
const isShowModule = (list: any) => {
  let flag = false;
  list.forEach((item: any) => {
    if (store.profile.menusNameList.indexOf(item.title) > -1) {
      flag = true;
      return;
    }
  });
  return flag;
};
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;
      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;
    }
  });

  // 重新获取权限
  ProfileApi.getUserInfo().then((res: any) => {
    if (res.code === 200) {
      store.setProfile({ ...res.data, token: store.profile.token });
    }
  });
};
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;
  .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: 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;
      }
    }

    .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: 26rpx;
          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: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #000000;
        margin-bottom: 20rpx;
      }
      .grid-text {
        margin-top: 17rpx;
        margin-bottom: 20rpx;
        font-size: 26rpx;
      }
    }
  }
}
</style>
