<script setup lang="ts">
//import {House} from "@element-plus/icons-vue";
import BrokenLine from "./echart/BrokenLine.vue";
import pie from "./echart/Pie.vue";
import Trading from "./echart/Trading.vue";
import { HomeOutlined} from '@ant-design/icons-vue';
import {ref} from 'vue'

const list=ref([
  {
    style:'success',
    message:'昨天的订单高峰期系统有些卡顿，请检查。'
  },
  {
    style:'info',
    message:'新增功能测试完成，无明显bug，可上线。'
  },
  {
    style:'warning',
    message:'客户反映配送时间显示不准确，需优化。'
  },
  {
    style:'error',
    message:'下周促销活动准备就绪，请确保系统稳定。'
  },
  {
    style:'warning',
    message:'请关注最近一周的销售数据波动情况。'
  },
  {
    style:'warning',
    message:'高峰期配送员不够，请考虑增加人手。'
  },
])
</script>

<template>
  <a-breadcrumb class="header">
    <a-breadcrumb-item href="">
      <home-outlined />
    </a-breadcrumb-item>
    <a-breadcrumb-item>{{ $route.name }}</a-breadcrumb-item>
  </a-breadcrumb>
<!-- <div class="header">
  <el-icon class="icon"><House /></el-icon>
    /{{route.name}}
</div>-->
  <div class="mainLeft">
    <div class="overview">
      <div class="container">
        <div class="square">
          <p>每日交易量</p>
          <img src="../images/cart.png" width="35px">
          <h2>996</h2>
        </div>
        <div class="square">
          <p>每日跑腿接单</p>
          <img src="../images/cart.png" width="35px">
          <h2>996</h2>
        </div>
        <div class="square">
          <p>订单好评总数</p>
          <img src="../images/cart.png" width="35px">
          <h2>996</h2>
        </div>
        <div class="square">
          <p>活跃用户数</p>
          <img src="../images/cart.png" width="35px">
          <h2>996</h2>
        </div>
      </div>
    </div>
    <div class="brokenLine">
      <BrokenLine></BrokenLine>
    </div>
     <div class="pie1">
       <pie></pie>
    </div>


  </div>
  <div class="mainRight">
     <div class="feedback">
       <h3>留言板</h3>
       <div style="max-width: 600px" class="feedback">
         <el-alert v-for="(item,index) in list" :key="index" :title="item.message" :type="item.style" show-icon class="message"/>
         <!-- <el-alert title="Info alert" type="info" show-icon class="message"/>
         <el-alert title="Warning alert" type="warning" show-icon class="message"/>
         <el-alert title="Error alert" type="error" show-icon class="message"/>
         <el-alert title="Error alert" type="error" show-icon class="message"/>
         <el-alert title="Error alert" type="error" show-icon class="message"/>-->

       </div>
     </div>
    <div class="trade">
      <Trading></Trading>
    </div>
  </div>
</template>

<style scoped>
.header {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: white;
  margin-top: 0;
}

.mainLeft {
  display: inline-block;
  width: 65%;
  height: 90%;
  .overview {
    width: 95%;
    height: 13%;
    margin: 0 auto;
  }
}
.mainRight {
  float: right;
  width: 35%;
  height: 90%;
}

.container {
  display: flex;
  margin-top: 15px;
  justify-content: space-between;
}
h2 {
  display: inline-block;
  margin-top: 0;
}
.square {
  width: 150px;
  height: 80px;
  background-color: rgba(0, 204, 255, 0.72);
  border-radius: 15px;
}
p {
  margin-bottom: 0;
  padding-left: 15px;
}
.brokenLine {
  margin: 0 auto;
  width: 100%;
  height: 40%;
}
h3 {
  text-align: center;
  margin-top: 20px;
  padding-top: 10px;
}
.feedback {
  width: 87%;
  height: 60%;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 auto;
}
.message {
  margin: 10px 0 0;
  border-radius: 10px;
}
.message:first-child {
  margin: 0;
}
.pie1 {
  width: 90%;
  height: 35%;
}
.trade {
  width: 100%;
  height: 40%;
}
</style>
