<template>
  <div class="app-container">
    <span style="font-size: 18px">{{ userName }}，欢迎</span>
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="total-frame">
            <img src="../../img/dashBoard/product.png" class="total-icon">
            <div class="total-title">今日商品订单</div>
            <div class="total-value">数量:{{ entityOrder }}</div>
            <div class="total-value">营业额:￥{{ entityTurnover }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="total-frame">
            <img src="../../img/dashBoard/课程表.png" class="total-icon">
            <div class="total-title">今日课程订单</div>
            <div class="total-value">数量:{{ serviceOrder }}</div>
            <div class="total-value">营业额:￥{{ serviceTurnover }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="total-frame">
            <img src="../../img/dashBoard/3.1拍摄.png" class="total-icon">
            <div class="total-title">今日拍摄订单</div>
            <div class="total-value">数量:{{ photoOrder }}</div>
            <div class="total-value">营业额:￥{{ photoTurnover }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="un-handle-layout">
      <div class="layout-title">待处理事务</div>
      <div class="un-handle-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="un-handle-item">
              <span class="font-medium">待发货订单</span>
              <span style="float: right" class="color-danger">{{ waitDeliverOrder }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="un-handle-item">
              <span class="font-medium">待付款订单</span>
              <span style="float: right" class="color-danger">{{ waitPayOrder }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="un-handle-item">
              <span class="font-medium">待拍摄订单</span>
              <span style="float: right" class="color-danger">{{ waitPhotoOrder }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="un-handle-item">
              <span class="font-medium">待上课订单</span>
              <span style="float: right" class="color-danger">{{ waitConsumption }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">商品总览</div>
            <div style="padding: 40px">
              <el-row class="font-medium">
                <el-col :span="8" class="overview-item-title">全部商品</el-col>
                <el-col :span="8" class="overview-item-title">已下架</el-col>
                <el-col :span="8" class="overview-item-title">已上架</el-col>
              </el-row>
              <el-row>
                <el-col :span="8" class="overview-item-value">{{ totalProductNum }}</el-col>
                <el-col :span="8" class="overview-item-value">{{ offshelvesNum }}</el-col>
                <el-col :span="8" class="overview-item-value">{{ shelvesNum }}</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">服装总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="overview-item-title">全部服装</el-col>
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">已租赁服装</el-col>
                <el-col :span="6" class="overview-item-title">已下架</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-value">{{ totalClothes }}</el-col>
                <el-col :span="6" class="overview-item-value">{{ totalListingClothes }}</el-col>
                <el-col :span="6" class="overview-item-value">{{ rentedClothes }}</el-col>
                <el-col :span="6" class="overview-item-value">{{ totalDelistClothes }}</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import myAxios from '@/api/myAxios'
import {ref, onMounted} from 'vue'
import {userStore} from "@/store/userStore";

let dashBord = new Map()   //仪表盘map集合

const store = userStore()  //用户信息
const userName = store.loginUser.userName

const photoTurnover = ref(0)  //写真当日营业额
const photoOrder = ref(0)  //写真订单数量
const entityTurnover = ref(0)  //实体类当日营业额
const entityOrder = ref(0)  //实体类当日订单数量
const serviceTurnover = ref(0)   //服务类当日营业额
const serviceOrder = ref(0)  //服务类订单数量
const totalProductNum = ref(0) //全部商品数量
const shelvesNum = ref(0)   //已上架商品数量
const offshelvesNum = ref(0)  //已下架商品数量
const waitPhotoOrder = ref(0)  //待拍摄订单
const waitDeliverOrder = ref(0)  //待发货订单
const waitPayOrder = ref(0)  //待支付订单数量
const waitConsumption = ref(0)  //待消费订单
const totalListingClothes = ref(0)   //全部已上架服装
const totalClothes = ref(0)   //全部服装
const rentedClothes = ref(0)   //已租赁服装
const totalDelistClothes = ref(0)   //全部已下架服装

onMounted(() => {
  getDashBoard()
})
const getDashBoard = async () => {
  const res = await myAxios.post('/global/queryAll', {})
  // console.log('信息',res.data.data);
  if (res.data.code === 1) {
    dashBord = new Map(Object.entries(res.data.data))
    photoTurnover.value = dashBord.get('今日写真预约类订单营业额')
    photoOrder.value = dashBord.get('今日写真预约订单数')
    entityTurnover.value = dashBord.get('今日实体类商品订单营业额')
    entityOrder.value = dashBord.get('今日实体类商品订单数')
    serviceTurnover.value = dashBord.get('今日服务类商品订单营业额')
    serviceOrder.value = dashBord.get('今日服务类商品订单数')
    totalProductNum.value = dashBord.get('全部商品数量')
    shelvesNum.value = dashBord.get('全部已上架商品数量')
    offshelvesNum.value = dashBord.get('全部已下架商品数量')
    waitPhotoOrder.value = dashBord.get('写真预约类待拍摄订单')
    waitDeliverOrder.value = dashBord.get('实体类待发货订单')
    waitPayOrder.value = dashBord.get('所有待支付订单数量')
    waitConsumption.value = dashBord.get('服务类待消费订单')
    totalListingClothes.value = dashBord.get('全部已上架服装数量')
    totalClothes.value = dashBord.get('全部服装数量')
    rentedClothes.value = dashBord.get('已租赁订单数量')
    totalDelistClothes.value = dashBord.get('全部已下架服装数量')
  }
  // console.log(res.data.data)
}
</script>

<style scoped>
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
  min-width: 800px;
}

.total-layout {
  margin-top: 20px;
}

.total-frame {
  border: 1px solid #DCDFE6;
  border-radius: 10px;
  padding: 20px;
  height: 100px;
}

.total-icon {
  color: #409EFF;
  width: 60px;
  height: 60px;
}

.total-title {
  position: relative;
  font-size: 20px;
  color: #909399;
  left: 70px;
  top: -60px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 70px;
  top: -45px;
}

.un-handle-layout {
  margin-top: 20px;
  border: 1px solid #DCDFE6;
  border-radius: 15px;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #F2F6FC;
  font-weight: bold;
}

.un-handle-content {
  padding: 20px 40px;
}

.un-handle-item {
  border-bottom: 1px solid #EBEEF5;
  padding: 10px;
}

.un-handle-item {
  border-bottom: 1px solid #EBEEF5;
  padding: 10px;
}

.overview-layout {
  margin-top: 20px;
}

.out-border {
  border: 1px solid #DCDFE6;
  border-radius: 15px;
}

.overview-item-value {
  font-size: 24px;
  text-align: center;
}

.overview-item-title {
  margin-top: 10px;
  text-align: center;
}
</style>