<template>
  <div class="container-wrapper">
    <div class="left">
      <div class="yuJin">
        <div class="kuCun">
          <InventoryAlert></InventoryAlert>
        </div>
        <div class="xiaoQi">
          <ValidityWarning></ValidityWarning>
        </div>
      </div>
      <div class="business">
        <BusinessOverview></BusinessOverview>
      </div>
      <PaymentDetails></PaymentDetails>
    </div>
    <div class="right">
      <Card v-model="userMessage"></Card>
      <CustomerService v-model="proxyMessage"></CustomerService>
      <SystemMessage v-model="systemMessage"></SystemMessage>
<!--      <Banner></Banner>-->
    </div>
  </div>


</template>
<script setup lang="ts">
import {ref, onMounted, nextTick} from "vue"
import Card from "@/components/home/index/Card.vue";
import CustomerService from "@/components/home/index/CustomerService.vue";
import SystemMessage from "@/components/home/index/SystemMessage.vue";
import Banner from "@/components/home/index/Banner.vue";
import PaymentDetails from "@/components/home/index/PaymentDetails.vue";
import BusinessOverview from "@/components/home/index/BusinessOverview.vue";
import InventoryAlert from "@/components/home/index/InventoryAlert.vue";
import ValidityWarning from "@/components/home/index/ValidityWarning.vue";

onMounted(() => {
  getData()
})
// 定义系统消息的数据结构
interface SystemMessage {
  title: string;
  content: string;
  time: string;
}
const systemMessage = ref<SystemMessage[]>()
const proxyMessage = ref("")
const userMessage = ref("")
let appConfig: any = null;

async function getData() {
  const response = await fetch('/info/data.json?v=' + Date.now());
  appConfig = await response.json();
  systemMessage.value = appConfig.systemMessage
  proxyMessage.value = appConfig.proxy
  userMessage.value = appConfig.user
}
</script>
<style scoped lang="scss">
@use "@/assets/scss/base";
.container-wrapper {
  display: flex;
  padding:0 24px;
  background: #F1F5FB;

  .left {
    flex: 1;
    margin-right: 24px;
    display: flex;
    flex-direction: column;

    .yuJin {
      height: 208px;
      display: flex;
      .kuCun{
        flex: 1;
      }
      .xiaoQi{
        flex: 1;
      }

    }

    .business {
      flex: 1;
      margin: 24px 0;
    }
  }

  .right {
    width: 388px;
    display: flex;
    flex-direction: column;

    .system-notification {
      flex: 1;


    }


  }

}

@media (max-width: 1920px) {
  .item-name {
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>